
重點整理
Elementor 是 WordPress 的拖拉式視覺化頁面編輯外掛,免費版就能用容器排版、數十個基本小工具、全站設定與手機/平板預覽;表單、彈出視窗、主題建構器、自訂字型等進階功能要買 Elementor Pro(2026 年 10 月官網 Essential 方案首年 US$49、1 個網站)。這篇說明 Elementor 的特色、從 WordPress 後台安裝的 2 個步驟、用「儲存的範本」在多個頁面重複使用同一個區塊,以及後台設定、角色管理員、工具、系統資訊各自是做什麼的。
剛開始架站的人最常卡在「網頁內容要怎麼排」:WordPress 內建編輯器可以寫文章,但要做出有背景、分欄、按鈕的頁面,往往要寫 CSS 或依賴佈景主題附的編輯器。Elementor 把這件事變成拖拉操作,畫面上看到的就是前台的樣子,介面也有繁體中文。這篇是 Elementor 的入門總覽:先認識它能做什麼、免費版和 Pro 差在哪,再一步步安裝、建立第一個範本,最後逐一說明後台選單裡的設定項目。
Elementor 是什麼?有哪些特色?
Elementor 是獨立的 WordPress 外掛,不綁特定佈景主題。官方網站是 elementor.com,外掛本體可在 WordPress.org 外掛目錄下載。2026 年 10 月查詢時,WordPress.org 上的版本是 4.3.3,啟用安裝數超過 1,000 萬,仍持續更新。

它的幾個主要特色:
- 不限佈景主題:任何 WordPress 主題都能搭配使用,文章、頁面、自訂文章類型都可以用 Elementor 編輯。少數付費主題可能與它有衝突,選主題前可先查主題是否標示相容 Elementor。
- 所見即所得:在預覽畫面上直接點選、修改內容,不用在後台與前台之間來回切換。
- 容器排版:新版以 Flexbox 容器與 Grid 容器排版,取代早期的「區段+欄位」,在免費版就能使用。
- 響應式編輯:可以切換桌面、平板、手機模式,分別調整間距、字級與顯示方式。

版面寬度可以設定為內容寬度或全寬,區塊的高度、寬度、內距(Padding)、外距(Margin)都能在面板中用數值或拖拉調整,不必另外寫 CSS。


編輯畫面中也能直接插入官方做好的版型與區塊,換上自己的文字和圖片就能完成初版頁面,對新手來說是很快的學習方式。

每一種內容元素在 Elementor 裡叫做「小工具」(Widget),例如標題、圖片、按鈕、影片、圖示清單等,都可以細部設定樣式與動態效果。

Elementor 免費版和 Pro 差在哪?
免費版(官方稱 Elementor Core)已經包含拖拉編輯器、容器排版、基本小工具、全站設定與響應式編輯,做一般形象頁面就夠用。依官方說明,Elementor Pro 另外提供 60 多個進階小工具(例如文章列表、表單、價格表、輪播),以及主題建構器(自訂頁首、頁尾、文章範本、彙整頁)、彈出視窗、捲動與滑鼠動態效果、自訂字型、自訂程式碼等。
2026 年 10 月查詢 Elementor 定價頁,Pro 最入門的 Essential 方案首年 US$49、可用於 1 個網站,年繳方案提供 30 天退款保證;其他方案的價格會依地區與促銷變動,請以定價頁顯示為準。
另外要注意,Elementor 4 開始推出新一代的「Editor V4」(Atomic 元素),以「類別(Class)」管理樣式,面板也從「內容/樣式/進階」三個分頁改為「一般/樣式」兩個分頁。依官方文件,在 Elementor 4.x 網站上 V4 元素預設啟用,並且可以和原本的容器、小工具混用,舊頁面不需要轉換。這篇以多數教學仍在使用的 3.x 小工具介面說明。
步驟一:在 WordPress 後台安裝 Elementor
到 WordPress 後台「外掛 → 安裝外掛」,在右上角搜尋框輸入 Elementor。

找到 Elementor(作者為 Elementor)後點「立即安裝」,完成後按「啟用」。

步驟二:建立一個可以重複使用的範本
如果每個頁面都要放同一款標題、聯絡資訊或行動呼籲區塊,可以先做成範本,之後在任何頁面插入。啟用 Elementor 後,後台側邊欄會出現 Elementor 與「範本」相關選單(新版選單名稱與位置和舊截圖不同),找到「儲存的範本」(Saved Templates)即可管理所有範本。

點「新增範本」。

選擇範本類型並取一個好辨認的名稱,例如「頁面」代表整頁內容、「區段」或「容器」代表單一區塊,再按建立範本。免費版可選的類型比 Pro 少,主題建構器相關類型(頁首、頁尾等)需要 Pro。

進入編輯器後,放上要重複使用的內容,例如一個標題小工具,完成後按「發佈」。

步驟三:在頁面中插入儲存的範本
到「頁面」列表,在要編輯的頁面下方點「使用 Elementor 編輯」。

滑鼠移到畫面上的區塊會出現藍色外框與控制標籤,可以在區塊之間新增內容。

空白區域會有兩個按鈕:加號是新增容器(排版結構),資料夾圖示是開啟範本庫。點資料夾圖示。

在範本庫切換到「我的範本」分頁,找到剛剛建立的範本,點「插入」。

範本就會出現在頁面上。用這個方法,不同頁面可以快速放入格式一致的內容。要注意,插入後的內容是「複製一份」,之後修改原範本不會同步更新已插入的頁面;需要一改全改的話,可以使用 Pro 的全域小工具或主題建構器。

如果在頁面列表直接點「編輯」,會進入 WordPress 編輯器,畫面上同樣有切換到 Elementor 編輯的按鈕;頁面範本等由佈景主題提供的設定,也在這個畫面調整。


Elementor 後台設定項目各是做什麼的?
Elementor 的後台選單在幾次改版後重新整理過,依 2026 年官方文件,多數管理項目集中在「Elementor → Editor」頁面的面板中。下面的截圖是舊版畫面,項目名稱與位置會不同,但功能大致相同:
全站設定(Site Settings)
舊版在後台「設定」裡調整的內容寬度、預設字型、圖片燈箱等,新版大多移到編輯器裡的「網站設定」(Site Settings),可以統一設定全站色彩、字型、按鈕樣式與版面寬度。

角色管理員(Role Manager)
多人共同管理網站時,可以限制某些使用者角色「不能使用 Elementor 編輯器」或「只能修改既有內容、不能新增元素」。單人管理的網站不需要設定。

工具(Tools)
常用的有三個:網站搬家換網域後的「取代網址」、Elementor 更新後發生衝突時退回舊版的「版本控制」(Version Control),以及搭配自訂頁面顯示的「維護模式」。退版前務必先備份網站。

系統資訊(System Info)
列出伺服器、PHP、WordPress、佈景主題與外掛的版本資訊,網站出問題要回報給外掛或主機商時,可以直接複製這份資料。

說明文件與自訂字型
官方說明中心(Help Center)是英文,但搜尋小工具名稱(例如 heading、loop grid)就能找到對應的教學文章。自訂字型(上傳自己的字型檔)則需要 Elementor Pro。


熟悉基本操作後,可以接著看 Elementor 範本教學了解範本與內建版型的進階用法,或用 Loop Grid 自訂文章與商品列表。
常見問題
Elementor 免費版夠用嗎?
做一般形象網站的頁面通常夠用,容器排版、基本小工具與響應式編輯都在免費版裡;需要表單、彈出視窗、自訂頁首頁尾或文章列表時,才需要 Elementor Pro 或其他外掛補足。
換掉佈景主題,用 Elementor 做的頁面會不見嗎?
不會,頁面內容存在 WordPress 資料庫,只要 Elementor 外掛還啟用,換主題後頁面仍會顯示;但頁首、頁尾、側邊欄等由主題負責的部分會跟著改變。
停用 Elementor 之後會怎樣?
停用後頁面只會剩下沒有排版的文字和圖片,所以已經用 Elementor 建好的網站不要隨意停用;要更換編輯器時,最好先在測試站確認每個頁面要如何重做。
結語
Elementor 讓不會寫程式的人也能用拖拉方式排出完整的頁面,免費版已包含容器排版、基本小工具與響應式編輯,適合先上手再決定要不要升級 Pro。實際操作時,先把網站設定裡的色彩與字型統一好,再把常用區塊存成範本,可以省下很多重複工作;更新 Elementor 前記得備份,萬一出問題還能用版本控制退回。
