Elementor 教學：WordPress Elementor 免費版操作與設定入門
重點整理
Elementor 是 WordPress 的拖拉式視覺化頁面編輯外掛，免費版就能使用容器排版、數十個基本小工具、全站設定，以及手機與平板預覽。表單、彈出視窗、主題建構器、自訂字型等進階功能則需要購買 Elementor Pro（2026 年 10 月官網 Essential 方案首年 US$49，1 個網站）。這篇說明 Elementor 的特色、從 WordPress 後台安裝的兩個步驟、用「儲存的範本」在多個頁面重複使用同一區塊，以及後台的設定、角色管理員、工具與系統資訊各自的用途。
本文目錄
剛開始架站的人最常卡在「網頁內容要怎麼排」：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。
WordPress 後台「安裝外掛」頁面
找到 Elementor（作者為 Elementor）後點「立即安裝」，完成後按「啟用」。
在 WordPress 外掛搜尋結果中找到 Elementor 並點選立即安裝
步驟二：建立一個可以重複使用的範本
如果每個頁面都要放同一款標題、聯絡資訊或行動呼籲區塊，可以先做成範本，之後在任何頁面插入。啟用 Elementor 後，後台側邊欄會出現 Elementor 與「範本」相關選單（新版選單名稱與位置和舊截圖不同），找到「儲存的範本」（Saved Templates）即可管理所有範本。
WordPress 後台的 Elementor 範本選單（2018 年舊版介面）
點「新增範本」。
選擇範本類型並取一個好辨認的名稱，例如「頁面」代表整頁內容、「區段」或「容器」代表單一區塊，再按建立範本。免費版可選的類型比 Pro 少，主題建構器相關類型（頁首、頁尾等）需要 Pro。
新增範本視窗，選擇範本類型並輸入範本名稱（舊版介面）
進入編輯器後，放上要重複使用的內容，例如一個標題小工具，完成後按「發佈」。
在 Elementor 編輯器中建立一個標題範本並準備發佈（舊版介面）
步驟三：在頁面中插入儲存的範本
到「頁面」列表，在要編輯的頁面下方點「使用 Elementor 編輯」。
WordPress 頁面列表中的「使用 Elementor 編輯」連結
滑鼠移到畫面上的區塊會出現藍色外框與控制標籤，可以在區塊之間新增內容。
空白區域會有兩個按鈕：加號是新增容器（排版結構），資料夾圖示是開啟範本庫。點資料夾圖示。
在範本庫切換到「我的範本」分頁，找到剛剛建立的範本，點「插入」。
範本就會出現在頁面上。用這個方法，不同頁面可以快速放入格式一致的內容。要注意，插入後的內容是「複製一份」，之後修改原範本不會同步更新已插入的頁面；需要一改全改的話，可以使用 Pro 的全域小工具或主題建構器。
範本插入頁面後的結果
在頁面列表直接點「編輯」，會進入 WordPress 編輯器，畫面上同樣有切換到 Elementor 編輯的按鈕；由佈景主題提供的頁面範本等設定，也是在這個畫面調整。
WordPress 頁面列表中的編輯連結
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 前記得備份，萬一出問題還能用版本控制退回。
搭配使用
