許多人開始動手架設 WordPress 網站，都會先撞上 Elementor 這個名字。根據 Elementor 官方公佈的數據，這套外掛目前已經裝在超過 2,200 萬個網站上，約佔全球網站總數的 13%，等於路上隨便挑八個網站，就有一個在用它排版。數字這麼大，卻不代表它容易一次搞懂——很多人搜尋「Elementor 教學」時，腦中真正想解開的其實有三層疑問：這套工具是什麼、它跟 WordPress 內建的區塊編輯器差在哪裡，以及免費版夠不夠用，還是遲早得升級 Pro。
這篇文章會把 Elementor 本體與 Elementor Pro 一次講清楚。前半段拆解免費版能做到哪裡、跟內建編輯器有什麼本質差異；後半段一項一項攤開 Pro 多出來的進階能力，把整張功能地圖畫完整，讓你看完就有清楚的判斷依據。先從 Elementor 是什麼講起，再往下拆它怎麼運作。
Elementor 是什麼？
Elementor 是一套安裝在 WordPress 上的視覺化拖放頁面編輯器外掛，不需要寫程式碼，編輯畫面裡看到的樣子，前台發布後幾乎就長那樣，也就是所謂的所見即所得。它是外掛，不是佈景主題，代表你得先有一個裝好 WordPress 的網站，才能安裝並啟用它；換句話說，Elementor 負責的是排版設計，底層的資料庫、使用者系統仍然由 WordPress 本身撐著。
它涵蓋的範圍其實比頁面編輯器聽起來還廣。除了一般的內頁與首頁，Elementor（尤其是升級 Pro 之後）還能用來設計網站的頁首、頁尾與文章版型，這部分後面會有專門段落細講。適合用它的網站類型很廣，從個人部落格、中小企業官網、行銷活動頁，到電商與線上課程網站都看得到它的蹤影。
不少人會擔心用了 Elementor 網站會不會因此變慢。比較接近事實的說法是，效能好不好多半取決於怎麼用它——圖片有沒有壓縮、元件堆得多不多、有沒有裝一堆彼此打架的外掛，而不是這套編輯器本身注定拖慢網站。真要優化效能，是另一個值得細講的題目。
拖曳式編輯器怎麼運作？
Elementor 的畫面骨架建立在兩個概念上：Container（容器）與 Widget（元件）。一個頁面由多個 Container 堆疊組成，Container 負責決定內容怎麼排列，一列並排還是上下堆疊、間距抓多少；Widget 則是放進 Container 裡的實際內容，像標題文字、圖片、按鈕這些看得到的東西。設計一個頁面，基本上就是先拉出幾個 Container 定骨架，再把 Widget 一個個拖進去填肉。
這套 Container 系統的排列邏輯基於網頁設計常見的 Flexbox，也可以視需要切換成 CSS Grid，兩種版面運算方式各有擅長的場景，彈性排列用 Flexbox、精準的格狀版面用 Grid。它取代了 Elementor 早期使用、如今已經停用的 Section 加 Column 兩層結構。舊制要先建一個 Section，裡面再切出 Column，才能放東西進去，層層相扣；Container 把這兩層合併成一層，還能無限往下巢狀堆疊，畫面結構需要的 HTML 元素也變少了。
改版面的當下，畫布就會直接呈現改完的樣子，不用另外按預覽才看得到結果，這也是所見即所得的具體呈現。最新版本又往前推了一步，Elementor 官方把第 4 代編輯器稱為 Atomic Editor（原子化編輯器），把每一個設計元素拆成更細的原子建構區塊，並新增一個 Design System 面板，統一管理全站共用的顏色、字型這些變數，改一處設定，套用它的元件就跟著一起變，不用逐一元件重設。這部分牽涉到容器排版與響應式設計的實際操作，留給後面專門的操作篇幅細講。
怎麼安裝並啟用 Elementor？
安裝前，先確認主機環境有沒有到門檻，這樣才不會裝好卻卡在編輯器跑不動、甚至白屏。Elementor 官方公佈的最低需求是 WordPress 6.5 以上、PHP 7.4 以上、MySQL 5.6（或 MariaDB 10.5）以上，WordPress 記憶體上限至少要有 256MB；若想要更順的編輯體驗，官方建議盡量使用最新版 WordPress、PHP 升級到 8.x 以上，記憶體拉高到 512MB，有餘裕的話給到 768MB 會更保險。
規格確認沒問題，安裝步驟本身很單純：
- 登入 WordPress 後台，進入「外掛」→「安裝外掛」。
- 在搜尋框輸入 Elementor，找到官方釋出的同名外掛。
- 點選「立即安裝」，等待安裝完成。
- 安裝完成後按「啟用」，讓外掛正式生效。
- 啟用後，後台左側選單會多出 Elementor 專屬的選項；這時打開任何一個頁面，畫面上也會出現「使用 Elementor 編輯」的按鈕，點下去就能進入編輯器。
如果規格沒達標，常見的症狀是編輯器載入到一半卡住、儲存草稿時轉圈圈轉不停，這種情況多半不是操作錯誤，而是主機端的記憶體或 PHP 版本不夠撐，得回頭請主機商或工程師調整設定。
Elementor 編輯器介面總覽：三大操作區塊怎麼分？
打開編輯器的第一眼，畫面大致分成三塊。左側是元件面板，列出所有可拖曳的 Widget，上方有搜尋框，想找按鈕或圖庫元件，打關鍵字比一路滾動找快很多。中間是畫布，也就是即時編輯區，改什麼、畫面就跟著變什麼，右上角還能切換桌機、平板、手機三種裝置預覽，確認每種尺寸下的排版都沒跑掉。點選畫面上任一個元件，右側（或跳出的浮動面板）就會出現該元件的設定，固定分成內容、樣式、進階三個分頁：內容管文字與素材本身，樣式管顏色字型間距這些視覺細節，進階則處理版面邊界、動畫效果、自訂 CSS 這類進階設定。
畫面結構複雜的頁面，常常某個元件被上面的東西蓋住，這時候可以打開 Navigator（導覽器），它會用樹狀結構列出整個頁面的元件層級，直接點樹狀圖裡的項目就能選到，不用在畫布上大海撈針。
還有一個建議開工前就先設定好的地方是 Site Settings（全站設定），藏在編輯器左上角的漢堡選單裡。先在這裡定好全站共用的顏色與字型，之後每拉一個新元件進畫面，都會自動套用這組全站設定，不用每換一個頁面就重新調一次顏色與字體，能省下不少重工。
免費版能做到哪？
免費版的內容其實頗有份量，不是隨便做做的展示版。光是可拖曳的免費元件就有 30 多個，涵蓋的類型也很齊全：
| 類型 | 常見元件 |
|---|---|
| 內容類 | 標題、文字編輯器、圖片、影片、按鈕 |
| 版面與設計類 | 圖庫、輪播、圖示清單、計數器、進度條 |
| 互動類 | 巢狀分頁、巢狀手風琴 |
| 其他 | 評分、地圖 |
除了元件，免費版也內建現成的範本可以直接套用，搭配 Container 與 Grid 的版面架構，以及桌機、平板、手機三種裝置各自獨立的響應式編輯，再加上基礎版的全站顏色與字型設定，一般單頁作品集、部落格，或是結構簡單的形象官網，免費版通常就已經撐得起來。
免費版的邊界主要卡在兩個地方。第一是跨頁重複的版型：免費版沒有工具能讓你設計一次頁首頁尾，就自動套用到全站每一頁，每個頁面的頭尾還是得靠佈景主題內建樣式，或是自己一頁一頁重排。第二是進階互動與行銷工具：像是彈出視窗、自訂表單、電商專用的排版，這些免費版都沒有。這兩塊留到後面 Pro 段落細講。
Elementor 和 WordPress 內建的區塊編輯器，有什麼差異？
不少人以為裝了 Elementor，原本 WordPress 內建的編輯器就該收起來，其實兩者的定位完全不同，不必二選一。WordPress 內建的區塊編輯器（Gutenberg）是核心功能的一部分，任何一個 WordPress 網站生來就有，拿來寫文章、排一般內容已經夠用。Elementor 是另外安裝的第三方外掛，提供更完整的拖放排版能力與更精細的樣式控制，還有像彈出視窗、頁首頁尾版型這類進階工具（後面幾節會細講）。
官方在自己的說明裡也明確講過，這兩套編輯器可以在同一個網站上並存，使用者能在每個頁面自行決定要用哪一套。實務上常見的做法是，部落格文章用內建編輯器寫，首頁、行銷活動頁這類需要精細排版的內容才交給 Elementor 設計。兩者各有比較適合的內容類型，沒有哪一個絕對比較好，差別在於手上這個頁面需要多細的排版控制。
Elementor Pro 是什麼？免費版之外，還多了哪些能力？
Elementor Pro 是免費版之上的付費擴充，不是另一套獨立軟體。要用 Pro，得先安裝好免費版的 Elementor，再另外安裝 Pro 這支外掛，並在後台輸入購買方案時取得的授權連接啟用，兩者缺一不可。也因為架構共用，Pro 用的還是同一套 Container 與 Widget 邏輯，只是在這套基礎上，多出一整批系統性的進階工具與元件。
大致分成幾大類：讓你自訂網站架構的 Theme Builder、蒐集名單與促銷用的 Popup 與 Form、給電商網站用的 WooCommerce Builder，還有能讓版面自動套用資料庫內容的動態內容與 Loop Builder，以及一批數量可觀的進階元件與客製化工具。這幾類接下來會一項一項拆開講，先在這裡把地圖攤開。
Theme Builder：自己設計頁首、頁尾與文章版型
這是 Pro 版最關鍵、也是免費版完全沒有的結構性功能。沒有 Theme Builder 的時候，頁首、頁尾、單篇文章版型這些幾乎每一頁都會用到的區塊，只能固定套用佈景主題內建的樣式，想調整就得每個頁面各自重排一次；有了 Theme Builder，你可以自己設計一份頁首範本、一份頁尾範本，改一次，全站套用它的頁面就一起跟著更新，不用逐頁手動改。
能自訂的範圍不只頁首頁尾，還包括單篇文章的版型、彙整頁（像是分類頁、標籤頁）的版型，以及找不到網頁時顯示的 404 頁。設計好之後，還能替每一份範本設定顯示條件，例如某個特殊頁首只在某個分類底下的文章才顯示，其他頁面維持原本的樣子。要用這項功能，在後台的位置是「範本」→「主題建構器」，裡面會分開列出頁首、頁尾、單篇文章等各種範本類型，逐步設定的細節留給後面專門講操作的篇幅。
行銷轉換工具：Popup Builder 與 Form Builder 怎麼使用？
Popup Builder（彈出視窗建構器）
Popup 用來做幾件常見的行銷工作：蒐集訪客的 Email、公告限時促銷、顯示會員登入視窗，都可以用它設計。除了外觀排版跟其他 Widget 一樣用拖放的方式設計，Popup 真正的重點在兩組條件設定。第一組是顯示條件，決定這個彈窗要出現在哪些頁面，例如只在首頁顯示，或是只在某個特定的活動頁面顯示。第二組是觸發條件，決定什麼時候跳出來：可以設成頁面載入後幾秒才跳、訪客往下滾動到某個百分比才跳、點擊某個按鈕才跳，或是偵測到滑鼠往瀏覽器上方移動、像是要離開頁面時才跳出來做最後挽留。逐一欄位怎麼設定，留給後面專門的操作篇幅。
Form Builder（表單建構器）
表單元件讓你不用另外裝表單專用外掛，就能在頁面裡放進聯絡表單、報名表單、詢價表單這類東西。欄位類型能自訂，文字、Email、下拉選單、核取方塊、檔案上傳都涵蓋在內；更重要的是提交後的動作也能設定，像是自動寄送通知信、導向感謝頁面，或是串接第三方服務的 Webhook，把資料同步到其他系統。對需要頻繁蒐集名單或詢價的網站，這項功能能省下額外裝外掛、彼此相容性打架的麻煩。
WooCommerce Builder：自訂電商頁面的排版工具
這項功能是給經營 WooCommerce 電商網站的人準備的，可以自訂商品頁面、商品列表頁、購物車頁、結帳頁，以及會員的「我的帳戶」頁面排版，不用被 WooCommerce 或佈景主題預設的樣板綁死。使用它有一個前提，網站得先裝好 WooCommerce 這套電商外掛，Elementor Pro 才有資料可以編輯；如果網站沒有要做電商，這塊功能基本上用不到。
對已經在用 WooCommerce 的網站來說，這項工具能解決的常見困擾是商品頁版面千篇一律，想加購買前的信任元素（像是常見問答、買家評價區塊）卻卡在樣板裡改不動。用 WooCommerce Builder 重新設計後，這些區塊的位置、樣式都能自由調整，逐頁設計的細節同樣留給後面專門篇幅。
讓版面自動套用資料：動態內容與 Loop Builder
動態內容（Dynamic Content）
一般情況下，元件裡打的文字或放的圖片是固定死的，改版面就得手動一個個換。動態內容做的事情正好相反，讓元件直接連結到 WordPress 資料庫裡已經存在的資料，像是文章標題、特色圖片、自訂欄位的內容，資料庫裡的資料一有更新，畫面就自動跟著換，不用手動逐一改。這也是前面提到的 Theme Builder，為什麼能設計一次就自動套用到每篇文章的真正原因。版型裡放置的不是某一篇文章固定的標題文字，而是一個動態欄位，連結到目前顯示的是哪一篇文章，畫面就自動帶出那一篇的標題與內容。
Loop Builder（迴圈版面建構器）
原本要用 Posts 或 Products 這類清單元件呈現一批文章或商品時，能調整的樣式選項相當有限，頂多改改欄數與間距。Loop Builder 解決的正是這個問題，讓你自己設計單一一項要長什麼樣子，例如一張文章卡片要顯示標題、特色圖、摘要、發布日期中的哪幾項，排版要怎麼排，設計好這份範本之後，套用到整批文章或整批商品的列表，每一項就都自動吃到同一份版型，不用一張一張手動排。
版面細節上可以調整欄數與項目間距，也能設定要單頁顯示還是分頁顯示；查詢條件也能自訂，例如指定文章類型、依作者或分類納入或排除內容、決定排序是新到舊還是舊到新。現況是，Loop Builder（在編輯器裡對應的元件叫 Loop Grid）已經是 Elementor 持續強化的重點功能之一，目前可以用在文章與自訂文章類型上，商品的支援也在陸續擴大。目前它只跟前面提到的 Flexbox Container 相容，用的是同一套版面邏輯。
還有哪些 Pro 才有的功能？
100 多個進階元件，涵蓋哪些類型？
除了前面幾節個別介紹過的功能，Pro 版還內建了一大批沒有獨立成一整節、但同樣實用的進階元件，一次點名幾個常見的：Posts（文章列表）、Portfolio（作品集）、Slides（輪播）、Price Table（價格表）、Nav Menu（自訂導覽選單）、Countdown（倒數計時）、Table of Contents（自動產生文章目錄）、Animated Headline（動態標題效果）、Call to Action（行動呼籲區塊）。這些元件都是拖進畫面就能用，樣式一樣能在設定面板裡細調。把前面 Theme Builder、Popup、Form、WooCommerce Builder、動態內容這些系統性工具用到的元件也一起算進去，Pro 依購買方案等級不同，解鎖的元件總數可以來到七、八十甚至上百個，方案等級愈高，能用的元件愈多。
自訂 CSS 與程式碼
細節想要摳得更精，這項功能就派得上用場。任何一個元件都能額外加上自訂 CSS，微調樣式表沒有內建選項能做到的細節；也能在網站的指定位置，像是頁首、內容開始處、內容結尾處，嵌入自訂的程式碼片段，例如流量追蹤碼，不用另外安裝專門的程式碼嵌入外掛。
Angie：Elementor 內建的代理式 AI 助手
Elementor 的 AI 功能其實分成好幾層，Angie 是裡面比較新、也比較進階的一種。它跟單純生成文案或生成圖片的 AI 工具不一樣，能依照用自然語言下的指令，直接在後台動手執行操作：建立版面、產生元件，甚至新增自訂文章類型都做得到，屬於會代替使用者動手操作的代理式 AI，而不只是產出一段文字或一張圖片讓人自己貼上去。免費版與 Pro 版都能用到部分 Angie 額度，但部分比較進階的動作，例如一次生成一份完整的表單，需要 Pro 訂閱才能執行。
Elementor Pro 方案怎麼分？價格級距一次看懂
目前 Pro 方案分成兩條產品線。一條是 Editor Pro 系列，單純針對編輯器本身，依照可以安裝的網站數量分級，從只給一個網站用的入門方案，到給代理商同時管理多個網站用的進階方案都有；等級愈高，除了可用網站數變多，解鎖的進階元件數量也愈多。以年繳計算，入門等級（通常只能裝在 1 個網站上）的價格落在 60 美元上下，中階等級（可以裝在 3 個網站上）約在 100 美元上下，再往上到可以裝 25 個網站的等級，則來到 200 美元左右；網站數量更多的團隊或代理商，還有價位更高的方案可以選。
另一條是後來才推出的 One 系列，把 Editor Pro 的功能之外，再加進 AI 生成額度、圖片最佳化、信件寄送、網站無障礙檢測工具、網站管理面板這些服務，打包成單一訂閱。它用的是點數制，一個月給一筆額度，依需要彈性分配在不同功能上，而不是每種服務各自另外收費。
不論選哪一條產品線，年繳方案都附帶 30 天內可以申請退款的保證，買了之後發現不適合，還有回頭路可以走。
什麼情況才值得升級 Pro？
免費版跟 Pro 版怎麼選，答案要看網站的規模與需求，不是免費版不夠好。以下幾種情境可以拿來對照自己的網站現況：
- 網站只是單頁作品集或結構簡單的形象頁：免費版的元件與範本通常就已經夠用，不必急著升級。
- 網站有好幾個頁面，不想在每一頁都重複設計頁首頁尾：Theme Builder 會是升級的關鍵理由，設計一次就能全站套用，省下的重工時間通常很快能回本。
- 需要蒐集名單，像是電子報訂閱、活動報名，或是想用促銷彈窗提升轉換：這時會需要 Popup 與 Form 這兩項工具，免費版沒有對應的替代方案。
- 網站的核心是電商：WooCommerce Builder 幾乎是必要配備，商品頁、購物車、結帳頁的排版自由度，直接影響顧客的購物體驗與信任感。
- 內容量大、希望版面能跟著資料庫自動更新：動態內容與 Loop Builder 能自動套用同一份版型到大量文章或商品卡片，省下逐頁手動排版的時間。
這幾種情境不是互斥的，一個網站常常同時踩中好幾項。真正該問的問題不是 Pro 值不值得，而是這幾項裡有沒有一項，是現在的網站真的用得到的。
Elementor 本體已經能讓多數網站不寫一行程式碼就完成排版，從單頁作品集到形象官網都撐得住。Pro 買的其實是結構化管理整個網站的能力：頁首頁尾版型統一管理、電商頁面自由自訂、名單蒐集流程自動化，這些是免費版天生做不到的系統性工程，不是免費版做得不夠好。要不要升級，端看網站的規模與需求成長的速度，免費版用得夠順手，不代表以後都不需要 Pro；反過來，現在用不到 Pro 的功能，也不代表白花錢。如果確定要往下走，接下來更聚焦的容器排版、Theme Builder 實作、Popup 設定這些操作細節，會是下一步該弄懂的東西。