Elementor免費版提供基本的拖放編輯器、響應式編輯、以及32個可編輯的小部件，如文字、圖片、按鈕等。
使用Elementor可以讓你在對前端知識一無所知的情況下建立專業的網站。我們在這篇Elementor佈局教程中使用Elementor免費版搭建了這樣的一個模組。
Elementor Pro是Elementor的升級版本，提供除了免費版的功能外，還包括86個高級小部件（如表單、社交媒體按鈕、菜單等）、主題構建器、彈窗構建器、動態內容功能、提供專業模板、以及對WooCommerce插件的完全支援。
是否有必要使用Elementor專業版？
我個人建議可以先從Elementor的免費版本開始嘗試Elementor免費版的功能來看能否滿足自己的需求。
如果你需要更進階的功能，可以隨時升級到Elementor Pro。而之前使用免費版的搭建出來的頁面和模板在升級過程中會幫你保留下來。
什麼時候需要升級成ElementorPRO？
- 需要彈跳窗（Popup）、浮動按鈕等活動組件
- 需要自訂產品/案例詳情頁/自訂Blog樣式
- 需要動態內容（ACF/CPT）、Loop/歸檔清單卡、全域樣式/小工具跨頁重複使用
如果你目的是建置ToB外貿行銷型網站，那我是建議直接入手Elementor Pro，因為我們會非常需要Elementor專業版提供的詢盤表單功能、產品頁面自訂、全域小工具功能等。
Elementor現在也出了對應的AI 功能（如大量改寫，產品圖風格統一修改）。但是Elementor的AI功能為獨立訂閱，可依需求另開。
Elementor Pro跟Elementor免費版的差別
其中我們在搭建外貿網站中使用得比較多的高級功能有：詢盤表單製作（包括後續的表單跳轉）、主題建構器、彈框表單以及對WooCommerce產品頁面的客製化支援等。
套餐價格對比
以下是Elementor免費版和付費版套餐的價格比較：
| 計劃 | 可用站點數 | 年費（常見） | 月等價（按年付） |
|---|---|---|---|
| Free | 不限 | $0 | $0 |
| Essential | 1 | $59/年 | $4.99/月 |
| Advanced Solo | 1 | $79/年 | $6.99/月 |
| Advanced | 3 | $99/年 | $8.25/月 |
| Expert | 25 | $199/年 | $16.99/月 |
| Agency | 1000 | $399/年 | $33.25/月 |
單一站點入門檔Essential為$59/年；官網顯示的月訂閱價格為$4.99（按年付款）。以近期匯率折算，約￥420/年或￥35/月（年付換算）。
Elementor提供30天退款保障，但僅限首次購買；續費/升級與Elementor AI訂閱不在退款範圍內。
關於授權與啟動：
Elementor Pro採用帳號授權方式，不是強網域綁定。你可以在Elementor後台解除A站的授權，再在B站重新啟動；同時啟動的網站數受你的訂閱檔位限制（單站/3個網站/25個網站/1000個網站等）
解除授權後，網站功能不受影響，但無法更新Pro相關的小工具，也無法在編輯器裡拖入新的Pro小工具；
所以我們可以先在A站啟動Elementor Pro完成網站搭建，隨後在Elementor後台帳號解除A站授權並在B站重新啟動。
提醒：
解綁只是移除授權，這時候我們不要卸載Pro插件；否則A站基於Pro小部件的設計可能無法正常顯示。 A站雖然失去Pro授權與更新，但現有範本仍可正常運作。
功能模組對比
我在這裡比較了免費版、Essential和Advanced PRO版的功能模組差異。 Advanced、Expert、Agency只有在雲端模版和團隊協作上面有略微區別。
| 功能 | Free | Essential | Advanced |
|---|---|---|---|
| 可用網站數量 | 不限 | 1 | 最多3 |
| 免費小部件 | 32 | 32 | 32 |
| Pro小工具 | — | 57 | 86 |
| 雲端模板 | — | 10 | 30 |
| 官方支持 | — | ✅️ | ✅️ |
| 範本庫 | ✅️ | ✅️ | ✅️ |
| 模板導入/匯出 | ✅️ | ✅️ | ✅️ |
| 行動端編輯 | ✅️ | ✅️ | ✅️ |
| 自訂斷點 | ✅️ | ✅️ | ✅️ |
| 主題建構器 | — | ✅️ | ✅️ |
| 動態標籤 | — | ✅️ | ✅️ |
| ACF集成 | — | — | ✅️ |
| 元素顯示條件 | — | — | ✅️ |
| 全域小工具 | — | — | ✅️ |
| 協作批註 | — | — | ✅️ |
| 角色管理 | — | — | ✅️ |
| Google字體庫 | ✅️ | ✅️ | ✅️ |
| 視頻燈箱 | ✅️ | ✅️ | ✅️ |
| 動效 | — | ✅️ | ✅️ |
| 頁面轉場 | — | ✅️ | ✅️ |
| 滾動吸附 | — | ✅️ | ✅️ |
| 自訂字體 | — | ✅️ | ✅️ |
| 自訂程式碼 | — | — | ✅️ |
| 自訂CSS | — | — | ✅️ |
| 全域自訂CSS | — | — | ✅️ |
| Link in Bio | ✅️ | ✅️ | ✅️ |
| 聯絡按鈕 | ✅️ | ✅️ | ✅️ |
| 懸浮元素 | ✅️ | ✅️ | ✅️ |
| 表單建構器 | — | ✅️ | ✅️ |
| 表單提交 | — | — | ✅️ |
| 表單集成 | — | — | ✅️ |
| 彈跳窗建構器 | — | — | ✅️ |
| 自訂屬性 | — | — | ✅️ |
| PayPal集成 | — | — | ✅️ |
| Stripe集成 | — | — | ✅️ |
| WooCommerce建構器 | — | — | ✅️ |
專業版提供更多的小工具
這些是Elementor專業版中提供的小工具。免費版允許我們使用的小部件有32個，升級到PRO版本的話有額外的86個高級小部件。
你可能不一定會用這麼多的小部件，但是在搭建網站的時候總會有合適的小部件能夠幫你實現你想要的功能和效果。
Post、Template、Table of Contents、Form、Slider、Loop這幾個是Elementor Pro中常用的小工具。
而在沒有Elementor Pro的時候，如果我們想要實現對應的功能，都需要安裝一個單獨的WordPress外掛來實現。
如果你只是需要更多Elementor的小工具，那麼你可以試試安裝：Ultimate Addons for Elementor 這個外掛程式。這個插件能夠提供Elementor更多的免費小工具。如果它能夠滿足你的需求，那就沒有必要升級成Elementor Pro。
Pro版本提供頁面模板（Template）
在Elementor中，模板代表了預先設計的頁面或部分頁面佈局，你可以直接在自己的網站上使用這些模板。
這些模板涵蓋了各種風格和用途，如首頁、聯絡頁面、服務頁面等，能夠讓你快速建立和啟動網站。
而且這些模板經過最佳化以滿足不同產業的需求，同時也支援響應式設計，能夠在各種裝置上都能正常顯示。
透過Templates –> Add New Template，我們可以使用Elementor建立網站模板。
Elementor專業版提供的範本功能會比免費版實用很多。
專業版提供的頁面範本：
免費版Elementor提供的範本：
Elementor專業版的Single Post和Single Page範本是我個人使用比較多的功能。
這個Single Post範本能夠讓我們對自己的Post頁面進行自訂，Single Page同理。
什麼意思呢？
我們Post頁面的展示內容和形式是由我們的WordPress主題的single.php/page.php檔案來決定的，一般來說可以調整的範圍十分地受限。
如果想要改變文章頁面的樣式或新增功能，往往需要安裝多個外掛程式。WordPress外掛都是有學習成本的，而且應用性沒有Elementor那麼廣泛。
我們只能根據WordPress主題預設的設定來對我們的文章展示頁面進行調整，但是有了Single Post模板就不一樣了。
我們可以跟客製化頁面一樣來客製化我們的Post頁面，並結合展示條件這個功能，在特定的類別中來展示我們設定好的頁面模板。
我們可以像做普通頁面那樣排版文章頁：自訂標題區、作者/時間資訊、目錄、側邊工具條、相關文章區、CTA 等，並把它批量應用到所有文章，或只應用到某個分類的文章。
Single Page同理。
那如果我們沒有Elementor PRO，但想要實現相同的功能呢？
- 為了實現目錄功能，我需要安裝Tables of Content這個外掛；
- 為了讓側邊欄有磁吸效果，我需要安裝WP Sticky Sidebar；
- 增加相關文章區，我們也要安裝像Related Posts for WordPress這類外掛。
這樣就會多安裝很多WordPress插件，讓整個流程會繁瑣很多。
自訂Header Footer功能
Header是網站十分重要的一部分，很大一部分決定了整個網站的架構。而在Footer中我們會放置一些補充訊息，例如：隱私權政策、出貨退貨政策、關於我們等相對次要一點的頁面。
Header跟Footer兩個部分跟Post一樣，很多設定都是會受限於我們的WordPress主題。
如果你使用了客製化能力比較強的WordPress主題，像是Astra或GeneratePress，那麼Elementor Pro的這部分功能你可能不太需要。
Astra主題的Header定制功能
Astra主題的Footer客製化功能
而且WordPress中有一個免費的插件：Elementor Header & Footer Builder 可以讓我們使用Elementor來實現Header和Footer功能的客製化。
可以自行嘗試。
推薦閱讀：
Loop Builder
Loop Builer可以用來為「清單類別內容」（部落格卡片、案例庫、產品清單、職缺清單等）先做一個單一卡片的範本（Loop Item），再用Loop Grid 在頁面上按網格/清單循環渲染。
比起舊的Posts小工具更靈活，可自由插入動態欄位（如ACF、自訂欄位等）。能夠實現越複雜的效果。
可跟WooCommerce整合提供更多客製化選項
如果你想客製WooCommerce的產品頁面、購物車頁面、結帳頁面等，那麼就很有必使用Elementor專業版了。
Pro的Theme Builder（WooCommerce範本） 能視覺化接手這些頁面的結構與樣式，並以顯示條件精確控制套用範圍。
無論是ToB還是ToC的網站都能夠使用的上，只是用在ToB網站上的話，因為ToB網站不需要購物功能，所以這個插件會顯得有些臃腫。
Elementor Pro提供了專門適用於WooCommerce的響應式小部件，包括產品網格、產品分類、添加到購物車按鈕、定價表和推薦產品等。
這些工具可以讓我們輕鬆展示產品和促銷活動，同時提高用戶的購買體驗和網站流量轉換率。
推薦閱讀：
自訂CSS功能
使用Elementor專業版可以在為網頁新增小工具的時候增加自訂CSS。當然這並不是唯一的自訂CSS入口，透過網站層級的Additional CSS功能也可以。
這個自訂CSS的意義在於我們可以更精細地調整小部件的樣式。
我們可以在新增小工具時透過小工具的Advanced標籤→ Custom CSS為該元素編寫樣式。
以Image Box這個小工具為例：Elementor預設已提供圖片、標題、描述的對齊與間距等設定；如果要做更細的規則（例如僅調標題與描述的局部邊距），就可以用自訂CSS來補位。
如果使用免費版，也可以先在小部件的進階選項裡加入CSS 類，再把樣式寫到網站級的自訂CSS中，實現同樣的效果。
全域小工具
Elementor的全域小工具（Global Widgets）功能允許在多個頁面或整個網站上重複使用同一個自訂小工具。
例如，你有一個詢問表單、訂閱按鈕或社群媒體連結欄，你可以將其設定為全域小工具，並在網站的多個頁面上使用。這樣，無論何時需要更新這些元素，只需修改一次全域小工具，所有使用該小工具的頁面都會自動更新，減少重複勞動。
要使用全域小部件，我們只需要：右鍵點擊我們想要設定為全域小工具，然後點擊“Save as a global”
我們即可將這個小部件儲存為全域小部件。
然後要怎麼使用呢？
我們選中容器後點擊Elementor頂部欄的+號，然後點擊「Globals」即可看到我們儲存過的全域小工具。
