找我們做網站
↑
Wordpress · Elementor 教學

Elementor 教學:WordPress Elementor 免費版操作與設定入門

Elementor 教學發布 2018.08.30更新 2026.10.02閱讀約 10 分鐘
Elementor 教學:WordPress Elementor 免費版操作與設定入門

重點整理
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 萬,仍持續更新。

Elementor 官方網站首頁(2018 年畫面),介紹拖拉式 WordPress 頁面編輯器
Elementor 官方網站首頁(2018 年畫面),介紹拖拉式 WordPress 頁面編輯器

它的幾個主要特色:

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

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

Elementor 官網介紹盒型、全寬等版面配置方式(2018 年畫面)
Elementor 官網介紹盒型、全寬等版面配置方式(2018 年畫面)
Elementor 官網介紹不同裝置可分別設定內距與外距的響應式編輯(2018 年畫面)
Elementor 官網介紹不同裝置可分別設定內距與外距的響應式編輯(2018 年畫面)

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

Elementor 官網展示可直接套用的網頁版型(2018 年畫面)
Elementor 官網展示可直接套用的網頁版型(2018 年畫面)

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

Elementor 官網列出各種小工具(Widget)的示意畫面(2018 年畫面)
Elementor 官網列出各種小工具(Widget)的示意畫面(2018 年畫面)

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 後台「安裝外掛」頁面
WordPress 後台「安裝外掛」頁面

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

在 WordPress 外掛搜尋結果中找到 Elementor 並點選立即安裝
在 WordPress 外掛搜尋結果中找到 Elementor 並點選立即安裝

步驟二:建立一個可以重複使用的範本

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

WordPress 後台的 Elementor 範本選單(2018 年舊版介面)
WordPress 後台的 Elementor 範本選單(2018 年舊版介面)

點「新增範本」。

Elementor 儲存的範本列表,上方有新增範本按鈕(舊版介面)
Elementor 儲存的範本列表,上方有新增範本按鈕(舊版介面)

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

新增範本視窗,選擇範本類型並輸入範本名稱(舊版介面)
新增範本視窗,選擇範本類型並輸入範本名稱(舊版介面)

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

在 Elementor 編輯器中建立一個標題範本並準備發佈(舊版介面)
在 Elementor 編輯器中建立一個標題範本並準備發佈(舊版介面)

步驟三:在頁面中插入儲存的範本

到「頁面」列表,在要編輯的頁面下方點「使用 Elementor 編輯」。

WordPress 頁面列表中的「使用 Elementor 編輯」連結
WordPress 頁面列表中的「使用 Elementor 編輯」連結

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

Elementor 編輯畫面中,滑鼠移到區塊上出現的編輯標籤(舊版區段介面)
Elementor 編輯畫面中,滑鼠移到區塊上出現的編輯標籤(舊版區段介面)

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

Elementor 新增區塊處的加號與資料夾(範本庫)按鈕(舊版介面)
Elementor 新增區塊處的加號與資料夾(範本庫)按鈕(舊版介面)

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

Elementor 範本庫的「我的範本」分頁與插入按鈕(舊版介面)
Elementor 範本庫的「我的範本」分頁與插入按鈕(舊版介面)

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

範本插入頁面後的結果
範本插入頁面後的結果

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

WordPress 頁面列表中的編輯連結
WordPress 頁面列表中的編輯連結
WordPress 編輯器中的「使用 Elementor 編輯」按鈕與頁面設定(舊版傳統編輯器畫面)
WordPress 編輯器中的「使用 Elementor 編輯」按鈕與頁面設定(舊版傳統編輯器畫面)

Elementor 後台設定項目各是做什麼的?

Elementor 的後台選單在幾次改版後重新整理過,依 2026 年官方文件,多數管理項目集中在「Elementor → Editor」頁面的面板中。下面的截圖是舊版畫面,項目名稱與位置會不同,但功能大致相同:

全站設定(Site Settings)

舊版在後台「設定」裡調整的內容寬度、預設字型、圖片燈箱等,新版大多移到編輯器裡的「網站設定」(Site Settings),可以統一設定全站色彩、字型、按鈕樣式與版面寬度。

Elementor 舊版後台設定頁,包含內容寬度、字型等全站樣式選項
Elementor 舊版後台設定頁,包含內容寬度、字型等全站樣式選項

角色管理員(Role Manager)

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

Elementor 角色管理員,可設定各使用者角色的編輯權限(舊版介面)
Elementor 角色管理員,可設定各使用者角色的編輯權限(舊版介面)

工具(Tools)

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

Elementor 工具頁,包含取代網址、版本回復與維護模式(舊版介面)
Elementor 工具頁,包含取代網址、版本回復與維護模式(舊版介面)

系統資訊(System Info)

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

Elementor 系統資訊頁,列出網站使用的程式版本(舊版介面)
Elementor 系統資訊頁,列出網站使用的程式版本(舊版介面)

說明文件與自訂字型

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

Elementor 官方說明文件的搜尋頁面(2018 年畫面)
Elementor 官方說明文件的搜尋頁面(2018 年畫面)
Elementor 自訂字型功能需升級 Pro 版的提示(舊版介面)
Elementor 自訂字型功能需升級 Pro 版的提示(舊版介面)

熟悉基本操作後,可以接著看 Elementor 範本教學了解範本與內建版型的進階用法,或用 Loop Grid 自訂文章與商品列表。

常見問題

Elementor 免費版夠用嗎?

做一般形象網站的頁面通常夠用,容器排版、基本小工具與響應式編輯都在免費版裡;需要表單、彈出視窗、自訂頁首頁尾或文章列表時,才需要 Elementor Pro 或其他外掛補足。

換掉佈景主題,用 Elementor 做的頁面會不見嗎?

不會,頁面內容存在 WordPress 資料庫,只要 Elementor 外掛還啟用,換主題後頁面仍會顯示;但頁首、頁尾、側邊欄等由主題負責的部分會跟著改變。

停用 Elementor 之後會怎樣?

停用後頁面只會剩下沒有排版的文字和圖片,所以已經用 Elementor 建好的網站不要隨意停用;要更換編輯器時,最好先在測試站確認每個頁面要如何重做。

結語

Elementor 讓不會寫程式的人也能用拖拉方式排出完整的頁面,免費版已包含容器排版、基本小工具與響應式編輯,適合先上手再決定要不要升級 Pro。實際操作時,先把網站設定裡的色彩與字型統一好,再把常用區塊存成範本,可以省下很多重複工作;更新 Elementor 前記得備份,萬一出問題還能用版本控制退回。

鵠學苑・鵠崙設計鵠崙設計 2014 年成立,專注 WordPress 網站開發,400 多個網站在我們自己的主機上運作。鵠學苑的文章由團隊實際操作後整理,工具與外掛的功能以撰文當時為準。
鵠崙設計

不想自己摸索,
就交給我們做。

外掛設定、主機效能、改版搬家,這裡寫的每一件事,都是我們每天在客戶網站上做的工作。留下需求,1 個工作天內回覆。