【Elementor 教學】免費版到 Pro 完整操作指南｜8 大功能實戰詳解

Elementor 是 WordPress 平台上最受歡迎的拖放式頁面編輯器外掛，全球超過 1,600 萬個網站使用，讓你不需要寫任何程式碼就能設計專業網頁。

Elementor 是什麼？免費版與 Pro 版差異一次看清楚

Elementor 核心功能簡介

Elementor 是一款專為 WordPress 設計的視覺化頁面編輯器外掛。它的核心運作方式是「所見即所得」（WYSIWYG）——你在編輯器中看到的畫面，就是訪客最終看到的網頁。

Elementor 的三大核心能力：

• 拖放式編輯：從左側元件庫拖曳文字、圖片、按鈕等元件到頁面上，直接在前端調整位置和樣式
• 即時預覽：每一個修改——無論是改字體大小、調整間距或換背景顏色——都會立即反映在預覽畫面上，不需要反覆切換「編輯」和「預覽」
• 響應式設計：內建桌機、平板、手機三種視圖切換，你可以針對不同裝置分別調整排版，確保網站在任何螢幕上都有良好的閱讀體驗

截至撰文時，Elementor 在 WordPress 外掛目錄上的活躍安裝數超過 1,600 萬，是全球使用量最大的頁面編輯器外掛之一。

Elementor 免費版 vs Pro 版功能對照表

許多人搜尋「Elementor 免費」或「Elementor Pro 費用」，最想知道的就是：免費版夠不夠用？什麼時候該升級？

以下是免費版與 Pro 版的核心功能差異：

Elementor Pro 費用（截至撰文時）：

• Essential 方案：$49/年（約 NT$1,568/年），授權 1 個網站
• Advanced 方案：$99/年（約 NT$3,168/年），授權 3 個網站
• Expert 方案：$199/年（約 NT$6,368/年），授權 25 個網站
• Agency 方案：$399/年（約 NT$12,768/年），授權 1,000 個網站

價格僅供參考，以官方定價頁為準。

透過官方連結訂閱 Elementor Pro，享有 30 天退款保證，可在無風險的情況下完整體驗所有 Pro 功能。如果試用後覺得不符合需求，在 30 天內申請退款即可。

判斷建議：如果你只是建立一個簡單的形象頁面或部落格，免費版已經足夠。但如果你需要自訂選單、建立聯絡表單、設計彈出視窗，或者要用 WooCommerce 做電商，Pro 版幾乎是必要的投資。

Elementor 外掛 vs Elementor Hosting 的區別

除了外掛本身，Elementor 還推出了「Elementor Hosting」——一個包含主機服務的整合方案。兩者的定位完全不同：

如果你已經有穩定的 WordPress 主機（例如 Bluehost 或 Hostinger），只需要安裝 Elementor 外掛即可。Elementor Hosting 比較適合完全不想碰主機設定的使用者，但月費相對較高。

安裝 Elementor 前的準備與安裝步驟

系統需求確認

在安裝 Elementor 之前，請先確認你的主機環境符合以下最低需求：

• WordPress 版本：6.0 或以上（建議使用最新版本）
• PHP 版本：7.4 或以上（建議 8.0+，效能更好）
• MySQL 版本：5.6 或以上（或 MariaDB 10.0+）
• 記憶體限制：至少 256MB（建議 512MB 以上，避免編輯複雜頁面時記憶體不足）

如何確認 PHP 版本？

登入 WordPress 後台 → 前往「工具」→「網站健康狀態」→「資訊」→ 展開「伺服器」區塊，即可看到目前的 PHP 版本。如果版本過舊，需要聯繫你的主機商升級。

推薦主機規格：Elementor 的編輯器在運作時會消耗較多伺服器資源。如果你使用共享主機，建議至少選擇中階方案。例如 Hostinger Business 方案（NT$128/月）提供足夠的記憶體和處理能力，或 Bluehost Choice Plus（NT$174/月）含免費域名和 SSL。

安裝 Elementor 免費版

確認環境沒問題後，安裝只需要 5 個步驟：

1. 登入 WordPress 後台：在瀏覽器輸入 你的網址/wp-admin，用管理員帳號登入
2. 進入外掛安裝頁面：在左側選單點擊「外掛」→「安裝外掛」
3. 搜尋 Elementor：在右上角搜尋框輸入「Elementor」，第一個結果就是「Elementor Website Builder」（作者為 Elementor.com）
4. 安裝並啟用：點擊「立即安裝」，等待安裝完成後點擊「啟用」
5. 確認安裝成功：啟用後，左側選單會出現「Elementor」選項。前往任何頁面，你會在頂部看到「使用 Elementor 編輯」的按鈕——點擊它就能進入視覺化編輯器

延伸閱讀：如果你還沒有 WordPress 網站，可以先參考 WordPress 教學完成基礎安裝。

首次啟動必做設定：開啟 Container 功能

安裝完成後，有一個關鍵設定建議你立即執行——開啟 Container（容器）功能。

Elementor 在近年推出了全新的 Container 架構，取代傳統的 Section + Column 結構。Container 基於 CSS Flexbox，提供更彈性的排版能力和更好的效能表現。目前 Elementor 預設已啟用 Container，但如果你的版本較舊或設定被關閉，可以手動開啟：

1. 前往 WordPress 後台 →「Elementor」→「設定」
2. 點擊「功能」（Features）分頁
3. 找到「Flexbox Container」選項，確認它已設為「啟用」（Active）
4. 儲存變更

開啟後，當你在編輯器中新增版面結構時，就會使用 Container 而非舊版的 Section。本教學後續的操作說明都以 Container 架構為主。

Elementor 編輯器介面完整導覽

第一次打開 Elementor 編輯器，畫面上的各種面板和按鈕可能讓你不知從何下手。這個章節會帶你逐一認識每個區域的功能，讓你在開始設計前就有完整的認知地圖。

左側面板：元件庫、全域設定、Navigator 導覽器

左側面板是你最常使用的區域，它包含三個核心功能：

元件庫（Widget Panel）：這是所有可用元件的清單，分為「基礎」和「Pro」兩大類。你可以直接從這裡拖曳元件到右側的頁面預覽區。面板頂部有搜尋框，輸入關鍵字（如「button」或「image」）可以快速找到需要的元件。

全域設定入口：點擊左上角的漢堡選單（三條橫線），可以進入「Site Settings」（網站設定），這裡管理全站的顏色、字型、按鈕預設樣式等。

Navigator 導覽器：點擊面板底部的「Navigator」圖示（或按快捷鍵 Ctrl + I），會彈出一個樹狀結構面板，顯示目前頁面上所有元件的層級關係。當頁面結構複雜時，Navigator 能幫你快速選取被遮蓋的元件、調整元件順序，是進階使用者不可或缺的工具。

右側預覽區：即時編輯、響應式切換

右側佔據大部分螢幕空間的就是預覽區域。這裡有兩個核心操作：

即時編輯：直接在預覽區點擊任何元件，就能選取它並在左側面板中編輯其內容和樣式。你也可以直接在預覽區中雙擊文字元件來修改文字內容，不需要切換到左側面板。

響應式切換：預覽區底部有三個裝置圖示——桌機、平板、手機。點擊後，預覽區會模擬該裝置的螢幕寬度，讓你針對不同裝置分別調整字體大小、間距、元件顯示/隱藏等設定。

頂部工具欄：頁面設定、儲存草稿、發布

頂部工具欄提供頁面層級的操作：

• 頁面設定（齒輪圖示）：設定頁面標題、頁面佈局（全寬 / 盒裝 / Canvas）、背景顏色或圖片
• 儲存草稿：點擊「發布」按鈕旁的箭頭，可以選擇「儲存草稿」，讓你在設計過程中隨時保存進度
• 預覽變更：在發布前先預覽頁面在前台的實際效果
• 發布 / 更新：確認設計完成後，點擊綠色的「發布」按鈕讓頁面正式上線

全域設定（Global Settings）：一次設定全站顏色、字型、按鈕樣式

在開始設計個別頁面之前，強烈建議你先完成全域設定。這樣做的好處是：當你之後在任何頁面新增元件時，它們會自動套用全域設定的顏色和字型，大幅減少重複調整的時間。

設定路徑：左上角漢堡選單 → Site Settings

關鍵設定項目：

• 全域顏色（Global Colors）：設定品牌的主色、輔色、文字色、強調色。之後在任何元件的顏色選擇器中，都可以直接選用這些全域顏色
• 全域字型（Global Fonts）：設定主要標題、次要標題、內文、強調文字的字型和大小。如果你的網站需要使用中文字體，可以在這裡統一設定
• 按鈕預設樣式：設定按鈕的預設背景色、文字色、圓角、hover 效果等

頁面版面配置：Container 與 Section 怎麼選？

版面配置是 Elementor 設計的基礎。理解 Container 和 Section 的差異，能幫你從一開始就選擇正確的架構，避免日後需要大量重建。

傳統 Section + Column 架構

在 Elementor 早期版本中，頁面結構是這樣的：

• Section（區塊）：頁面的最大結構單位，一個 Section 橫跨整個頁面寬度
• Column（欄）：Section 內部的垂直分割，每個 Section 可以包含 1-10 個 Column
• Widget（元件）：放在 Column 裡面的實際內容

這個架構的限制在於：Section 內只能有一層 Column，無法在 Column 裡面再嵌套 Column。如果你需要更複雜的巢狀排版（例如一個欄位裡面再分成兩欄），就需要使用 Inner Section，操作上比較繁瑣。

適用情境：如果你正在維護一個已經用 Section 架構建好的舊網站，不需要刻意全部改成 Container。舊架構仍然可以正常運作。

新版 Container 架構（Flexbox）：更彈性、效能更好

Container 架構基於 CSS Flexbox，帶來三個顯著優勢：

1. 無限巢狀：Container 裡面可以再放 Container，不再受限於 Section → Column 的兩層結構。這讓複雜的排版（如卡片式佈局、多層嵌套的 Grid）變得簡單許多
2. 更少的 DOM 元素：傳統架構中，一個兩欄佈局需要 Section + 2 個 Column = 3 個 HTML 元素。Container 架構只需要 1 個 Container + 2 個子 Container = 3 個元素，但在更複雜的佈局中，Container 產生的 HTML 元素明顯更少，頁面載入速度更快
3. Flexbox 排列控制：你可以輕鬆設定子元件的排列方向（水平/垂直）、對齊方式（靠左/置中/靠右/分散對齊）、換行行為等，這些在傳統架構中需要額外的 CSS 才能實現

判斷建議：如果你是新建網站，一律使用 Container 架構。它是 Elementor 的未來發展方向，新功能和優化都會優先支援 Container。

實際操作：新增 Container → 設定欄數 → 拖入元件

以下是使用 Container 建立一個兩欄佈局的實際步驟：

1. 新增 Container：在編輯器的預覽區中，點擊「+」按鈕，選擇你想要的欄數結構（例如選擇兩欄 50/50 的佈局）
2. 調整 Container 設定：選取 Container 後，在左側面板的「Layout」分頁中，你可以調整：
3. Direction（方向）：Row（水平排列）或 Column（垂直排列）
4. Justify Content（主軸對齊）：控制子元件在主軸上的分佈方式
5. Align Items（交叉軸對齊）：控制子元件在交叉軸上的對齊方式
6. Gap（間距）：子元件之間的間距
7. 拖入元件：從左側元件庫拖曳 Heading、Image、Button 等元件到 Container 中
8. 巢狀 Container：如果需要更複雜的佈局，直接在現有 Container 內再拖入一個 Container 元件

常用元件操作教學（從基礎到進階）

文字元件：標題（H1-H6）與段落的設定

文字是網頁最基本的內容。Elementor 提供兩個文字相關元件：

Heading（標題）元件：

• 拖入後，在左側面板的「Content」分頁輸入標題文字
• HTML Tag：選擇 H1-H6 標籤。注意每個頁面只應有一個 H1，其餘用 H2-H6 依層級排列（這對 SEO 很重要）
• Style 分頁：調整字體、大小、顏色、行高、字距。如果你已經設定了全域字型，這裡會自動套用

Text Editor（段落）元件：

• 提供類似 WordPress 經典編輯器的文字編輯介面
• 支援粗體、斜體、列表、超連結等基本格式
• 適合放置較長的段落內容

圖片元件：插入、調整尺寸、設定 Alt Text

Image（圖片）元件的操作步驟：

1. 拖入 Image 元件到 Container 中
2. 點擊「Choose Image」從媒體庫選擇圖片，或直接上傳新圖片
3. Image Size：選擇圖片尺寸（Thumbnail / Medium / Large / Full）。建議不要使用 Full 尺寸，選擇適合版面寬度的尺寸可以加快載入速度
4. Alt Text：在「Content」分頁的「Caption」區域下方，或直接在媒體庫中設定圖片的替代文字。Alt Text 對 SEO 和無障礙訪問都非常重要——搜尋引擎靠它理解圖片內容，螢幕閱讀器靠它為視障使用者描述圖片
5. Style 分頁：調整圖片寬度、最大寬度、圓角、邊框、陰影等

按鈕元件：文字、連結、樣式設定

按鈕是引導使用者行動的關鍵元件。設定要點：

• Text：按鈕上顯示的文字，建議使用動作導向的文案（如「立即報名」「免費下載」而非「點擊這裡」）
• Link：按鈕點擊後導向的 URL。可以設定在新分頁開啟（Open in new window）
• Icon：可以在按鈕文字旁加入圖示，增加視覺吸引力
• Style 分頁：調整背景色、文字色、邊框、圓角、padding。特別注意設定 Hover 狀態的樣式——當滑鼠移到按鈕上時的顏色變化，能提供使用者明確的互動回饋

Nav Menu 選單元件：設定網站導覽選單

Nav Menu 是 Elementor Pro 的功能，讓你在頁面中建立自訂的導覽選單。這對於使用 Elementor 的 Theme Builder 自訂頁首（Header）時特別重要。

設定步驟：

1. 前置作業：先在 WordPress 後台 →「外觀」→「選單」中建立好選單結構（新增選單項目、設定層級）
2. 拖入 Nav Menu 元件：在 Elementor 編輯器中搜尋「Nav Menu」並拖入
3. 選擇選單：在「Content」分頁的「Menu」下拉選單中，選擇你在 WordPress 後台建立的選單
4. Layout 設定：
5. Layout：Horizontal（水平排列，適合頁首）或 Vertical（垂直排列，適合側邊欄）
6. Align：選單項目的對齊方式
7. Pointer：滑鼠 hover 時的指示效果（底線、背景色、邊框等）
8. Mobile Menu 設定：設定手機版的漢堡選單圖示、展開動畫、斷點（在多寬的螢幕下切換為手機選單）

表單元件（Pro）：欄位設定、提交後行為、Email 通知設定

表單是商業網站的核心功能——聯絡表單、報名表單、詢價表單都靠它。Elementor Pro 的 Form 元件功能完整，不需要額外安裝表單外掛。

欄位設定：

• 預設包含 Name、Email、Message 三個欄位
• 點擊「Add Item」新增欄位，可選擇的欄位類型包括：Text、Email、Textarea、Number、URL、Tel、Select（下拉選單）、Radio、Checkbox、Date、Time、File Upload 等
• 每個欄位可以設定：Label（標籤）、Placeholder（預設提示文字）、Required（是否必填）、Column Width（欄位寬度，用於並排顯示）

提交後行為（Actions After Submit）：

• Email：將表單資料寄送到指定的 Email 地址（最常用）
• Redirect：提交後跳轉到感謝頁面
• Webhook：將資料傳送到第三方服務（如 Zapier、Make）
• 可以同時設定多個 Action

Email 通知設定：

• To：收件人 Email
• Subject：郵件主旨（可使用動態標籤，如 [field id="name"] 帶入表單欄位值）
• Message：郵件內容（同樣可使用動態標籤）
• Reply-To：設定為 [field id="email"]，這樣你回覆郵件時會直接回覆給填表人

互動元件：Tabs 標籤切換、Popup 彈出視窗

Tabs 標籤切換：

Tabs 元件適合在有限空間內展示多組內容（如產品規格、常見問題、服務方案比較）。

1. 拖入 Tabs 元件，預設會有兩個標籤
2. 點擊「Add Item」新增更多標籤
3. 每個標籤可以設定 Title（標籤名稱）和 Content（內容區域）
4. 在 Style 分頁調整標籤的字體、背景色、邊框、active 狀態樣式
5. 響應式調整：在手機版上，Tabs 可能不適合水平排列，建議在手機視圖中調整為垂直堆疊

Popup 彈出視窗（Pro）：

Popup 是 Elementor Pro 的強大功能，可以用來建立訂閱表單、促銷公告、登入視窗等。

1. 前往 WordPress 後台 →「Templates」→「Popups」→「Add New」
2. 選擇一個 Popup 範本或從空白開始設計
3. 使用 Elementor 編輯器設計 Popup 內容（可以放入任何元件）
4. 設定 Conditions（顯示條件）：在哪些頁面顯示
5. 設定 Triggers（觸發條件）：
6. On Page Load（頁面載入後 X 秒）
7. On Scroll（滾動到頁面 X% 時）
8. On Click（點擊特定按鈕時）
9. On Exit Intent（偵測到使用者要離開頁面時）
10. 設定 Advanced Rules：顯示頻率（每次造訪 / 每天一次 / 只顯示一次）、裝置限制等

樣式調整與動態效果設定

元件樣式調整：字體、背景、邊框、陰影的設定邏輯

每個 Elementor 元件都有三個設定分頁：Content（內容）、Style（樣式）、Advanced（進階）。樣式調整主要在 Style 和 Advanced 分頁中進行。

字體樣式：

• Font Family：字體選擇。Elementor 整合了 Google Fonts，提供數百種字型。中文網站建議使用 Noto Sans TC 或系統預設字型
• Size：字體大小，可使用 px、em、rem 單位
• Weight：字重（100-900），常用 400（Regular）和 700（Bold）
• Line Height：行高，建議設定為字體大小的 1.5-1.8 倍，提升閱讀舒適度

背景：

• 支援單色、漸層色、圖片、影片四種背景類型
• 圖片背景可以設定 Position（位置）、Attachment（固定/滾動）、Size（Cover / Contain）

邊框與陰影：

• Border：設定邊框樣式（實線/虛線/點線）、寬度、顏色、圓角
• Box Shadow：為元件添加陰影，營造立體感。參數包括水平偏移、垂直偏移、模糊度、擴散度、顏色

Padding 與 Margin 間距調整：響應式間距設定

間距是排版的靈魂。Elementor 中的間距分為兩種：

• Padding（內距）：元件內容與元件邊框之間的空間。增加 Padding 會讓元件「變胖」，內容離邊框更遠
• Margin（外距）：元件與其他元件之間的空間。增加 Margin 會讓元件之間「拉開距離」

響應式間距設定是新手最容易忽略的重點。在桌機上看起來間距剛好的設計，到了手機上可能會變得過大或過小。

操作方式： 1. 選取元件，進入 Advanced 分頁 2. 在 Padding 或 Margin 的設定區域，點擊右側的裝置圖示（桌機/平板/手機） 3. 針對不同裝置分別設定數值。例如：桌機上 Padding 設定 40px，手機上改為 20px

實用建議：先設計桌機版，確認整體佈局後，再切換到平板和手機視圖逐一調整間距。

動態效果（Motion Effects）：滾動效果、視差、滑鼠追蹤

動態效果能讓頁面更生動，但需要謹慎使用。設定路徑：選取元件 → Advanced 分頁 → Motion Effects。

Scrolling Effects（滾動效果）：

• Vertical Scroll：元件隨頁面滾動時以不同速度移動，產生視差效果
• Horizontal Scroll：元件在滾動時水平移動
• Transparency：元件在滾動過程中逐漸變透明或變不透明
• Rotate：元件在滾動時旋轉
• Scale：元件在滾動時放大或縮小

Mouse Effects（滑鼠效果）：

• Mouse Track：元件跟隨滑鼠位置移動
• 3D Tilt：元件根據滑鼠位置產生 3D 傾斜效果

Entrance Animation（進場動畫）：

• 元件首次進入視窗時的動畫效果（淡入、滑入、彈跳等）
• 可以設定動畫持續時間和延遲

小 Tips：UX、效能與無障礙注意事項

在使用 Elementor 設計網站時，有三個容易被忽略但影響很大的面向，這裡集中提醒：

UX（使用者體驗）：按鈕和可點擊元素的尺寸至少 44×44px（Apple 人機介面指南的建議），確保手機使用者能輕鬆點擊。導覽選單的層級不要超過三層，否則手機版的漢堡選單會變得難以操作。

效能：每個動態效果都需要額外的 JavaScript 計算，一個頁面上同時使用超過 5-6 個滾動效果，可能導致低階裝置出現卡頓。優先使用 CSS 動畫（如 Entrance Animation）而非 JavaScript 驅動的滾動效果，並在手機版上考慮關閉部分動態效果。使用快取外掛（如 WP Rocket）搭配 CDN 來減輕效能負擔。

無障礙（Accessibility）：為所有圖片填寫有意義的 Alt Text，不要只寫「圖片」或留空。確保文字與背景的色彩對比度符合 WCAG 2.1 AA 標準（對比度至少 4.5:1），可以用 WebAIM Contrast Checker 檢測。表單欄位務必設定 Label，不要只依賴 Placeholder 文字。

3 個提升效率的進階功能

Templates 範本庫：套用現成範本快速建站

Elementor 內建了範本庫（Template Library），提供數百個預先設計好的頁面範本和區塊範本。

使用方式： 1. 在編輯器中，點擊頁面中央的資料夾圖示，或點擊左側面板中的「Templates」圖示 2. 範本分為兩類： – Pages：完整的頁面範本（首頁、關於我們、服務頁、聯絡頁等） – Blocks：單一區塊範本（Hero 區塊、特色區塊、FAQ 區塊、CTA 區塊等） 3. 點擊「Insert」將範本插入到目前頁面 4. 插入後，所有元件都可以自由修改——更換文字、圖片、顏色、排版

Pro 版範本庫包含 300+ 專業範本和完整的範本套件（Kit）。一個 Kit 通常包含 10-15 個風格統一的頁面範本，讓你快速建立整個網站的視覺一致性。

如何使用範本套件（Kit）：前往 WordPress 後台 →「Templates」→「Kit Library」，瀏覽並預覽各種 Kit。選定後點擊「Apply Kit」，Elementor 會自動匯入該 Kit 的所有頁面範本、全域顏色和字型設定。你可以選擇匯入全部頁面或只匯入特定頁面，匯入後再逐頁修改內容即可。

免費版使用者也有約 30 個基礎範本可用，雖然數量較少，但作為起步點已經足夠。

儲存重複使用區塊（Global Widget / Saved Sections）

如果你的網站有多個頁面共用相同的區塊（例如 CTA 區塊、客戶評價區塊、頁尾資訊），每次都重新建立非常浪費時間。Elementor 提供兩種重複使用機制：

Saved Templates（儲存範本）： 1. 在編輯器中，右鍵點擊你想儲存的 Container 或 Section 2. 選擇「Save as Template」 3. 命名後儲存。之後在任何頁面的範本庫中，切換到「My Templates」分頁就能找到並插入 4. 注意：插入後的範本是獨立副本，修改不會同步到其他頁面

Global Widget（全域元件，Pro 功能）： 1. 右鍵點擊元件，選擇「Save as Global」 2. 儲存後，這個元件會變成全域元件（以橘色邊框標示） 3. 在任何頁面插入這個全域元件後，修改其中一處，所有頁面上的同一個全域元件都會同步更新 4. 適合用在：頁首 CTA 按鈕、聯絡資訊區塊、社群媒體連結等需要全站統一的元素

Navigator 導覽器：快速選取深層元件、調整層級順序

前面在介面導覽中簡單提過 Navigator，這裡深入說明它的進階用法：

快速選取：當頁面上有多個重疊的元件（例如背景圖片上方的文字和按鈕），直接點擊很難選到正確的元件。在 Navigator 中，所有元件以樹狀結構清楚列出，點擊即可精確選取。

拖曳排序：在 Navigator 中直接拖曳元件，可以改變它們在頁面上的順序，或將元件移動到不同的 Container 中。

重新命名：雙擊 Navigator 中的元件名稱可以重新命名（例如把「Heading」改成「主標題」），讓複雜頁面的結構更容易辨識。

顯示/隱藏：每個元件旁邊有一個眼睛圖示，點擊可以暫時隱藏該元件，方便你在不刪除元件的情況下測試不同的設計方案。

Elementor 擴充插件推薦（免費 + 付費）

Elementor 的內建元件已經涵蓋大部分需求，但如果你需要更多特殊元件或功能，擴充插件可以進一步擴展 Elementor 的能力。

Essential Addons for Elementor

這是 Elementor 生態系中最受歡迎的擴充插件，活躍安裝數超過 200 萬。

• 免費版：提供 50+ 個額外元件，包括 Post Grid、Data Table、Countdown Timer、Filterable Gallery、Pricing Table 等
• 付費版：70+ 個元件，額外包含 Protected Content、Instagram Feed、Parallax Slider 等。價格約 $39.97/年起（約 NT$1,279/年），請參考官方定價頁
• 適用情境：內容型網站、部落格、企業形象網站。如果你需要文章網格、定價表、倒數計時器等元件，Essential Addons 是首選

Ultimate Addons for Elementor

由 Brainstorm Force（Astra 佈景主題的開發團隊）開發，與 Astra 主題搭配使用效果最佳。

• 提供 40+ 個創新元件，包括 Party Propz（裝飾效果）、Content Toggle、Business Hours、Timeline 等
• 特色：元件設計感較強，適合需要視覺衝擊力的網站
• 適用情境：設計感要求高的品牌網站、作品集網站、創意工作室

PowerPack for Elementor

提供 70+ 個元件和 150+ 個範本，涵蓋範圍最廣。

• 特色元件包括：Advanced Menu、Off Canvas Content、Table of Contents、How To Schema、FAQ Schema 等
• Schema 元件是 PowerPack 的獨特優勢——可以直接在 Elementor 中建立結構化資料，對 SEO 有幫助
• 適用情境：電商網站、功能複雜的商業網站、重視 SEO 的內容網站

安裝擴充插件的步驟

1. 登入 WordPress 後台
2. 前往「外掛」→「安裝外掛」
3. 在搜尋框中輸入擴充插件名稱（如「Essential Addons」）
4. 找到插件後，點擊「立即安裝」→「啟用」

啟用後，擴充插件新增的元件會自動出現在 Elementor 編輯器的左側面板中，通常會有獨立的分類標籤。

注意事項：插件數量與網站效能的平衡建議

擴充插件雖然好用，但每安裝一個都會增加網站的 CSS 和 JavaScript 載入量。根據評測經驗，以下是效能平衡的建議：

• 控制數量：Elementor 擴充插件建議最多安裝 1-2 個，不要同時安裝三個以上
• 停用不需要的元件：大部分擴充插件都允許你在設定中停用不需要的元件模組，只啟用你實際使用的元件，可以減少不必要的資源載入
• 定期更新：保持外掛更新至最新版本，確保與 Elementor 核心的相容性和安全性
• 效能監控：安裝擴充插件後，用 Google PageSpeed Insights 測試頁面速度，確認沒有顯著的效能下降

如果你發現網站速度因為 Elementor 和擴充插件而變慢，可以考慮升級到效能更好的主機方案。Hostinger Business 方案（NT$128/月）提供 LiteSpeed 快取和足夠的伺服器資源，是預算友善的選擇。

佈景主題相容性與推薦

Elementor 設計上與大多數 WordPress 佈景主題相容，但選擇一個「為 Elementor 優化」的主題，能讓你的設計體驗更順暢、效能更好。

推薦搭配的佈景主題：

為什麼主題選擇很重要？

某些功能豐富的主題（如 Avada、Divi）本身就內建了頁面編輯器，與 Elementor 同時使用可能產生 CSS 衝突、功能重複，甚至拖慢網站速度。選擇輕量主題搭配 Elementor，能確保設計完全由 Elementor 控制，避免不必要的相容性問題。如果你是從零開始建站，Hello Elementor 主題 + Elementor Pro 是最簡單的組合——Elementor 完全掌控頁首、頁尾、文章範本等每一個視覺元素，不會有任何主題樣式干擾。

想了解更多網頁設計軟體的選擇，可以參考完整的架站平台比較。

Elementor 影片教學資源

如果你偏好透過影片學習，Elementor 官方 YouTube 頻道提供了完整的系列教學，涵蓋從基礎操作到進階功能的各個面向。在 Elementor 的 YouTube 官方頻道 上，你可以找到 Container 架構教學、Theme Builder 設定、WooCommerce 整合等主題的詳細影片，搭配本文的圖文教學一起看，學習效果更好。

結論

全文重點回顧：

• 免費版 vs Pro 版：免費版提供約 40 個基礎元件，足夠建立簡單頁面；Pro 版新增表單、選單、彈出視窗、Theme Builder 等進階功能，Essential 方案約 $49/年
• Container 架構優先：新建網站一律使用 Container（Flexbox）架構，比傳統 Section + Column 更彈性、效能更好
• 全域設定先行：在設計個別頁面前，先完成全站顏色和字型的全域設定，能大幅減少後續的重複調整
• 範本庫加速建站：善用內建範本庫和儲存重複使用區塊，避免每個頁面都從零開始
• 擴充插件適量安裝：最多 1-2 個擴充插件，停用不需要的元件模組，維持網站效能

下一步行動建議：

如果你還沒有 WordPress 網站，第一步是選擇一個穩定的主機。Bluehost 是 WordPress 官方推薦主機，Basic 方案 NT$94/月起，含免費域名和 SSL，一鍵安裝 WordPress 後就能立即安裝 Elementor 開始設計。

如果你已經有 WordPress 網站，現在就前往「外掛」→「安裝外掛」搜尋 Elementor，5 分鐘內就能開始用拖放方式設計你的第一個頁面。

如果你不想自行管理主機和 WordPress，也可以考慮 WordPress.com 的託管方案——免費方案即可開始建站，不需要信用卡，Business 方案（NT$800/月）支援安裝 Elementor 等第三方外掛。

常見問題（FAQ）

Elementor 是什麼？

Elementor 是一款 WordPress 視覺化頁面編輯器外掛，讓你透過拖放操作設計網頁，不需要撰寫任何程式碼。它提供即時預覽、響應式設計工具和豐富的元件庫，是目前全球最多人使用的 WordPress 頁面編輯器，活躍安裝數超過 1,600 萬。

我可以在任何 WordPress 佈景主題上使用 Elementor 嗎？

技術上 Elementor 與大多數主題相容，但實際體驗差異很大。建議使用輕量主題如 Hello Elementor、Astra 或 GeneratePress，避免使用本身內建頁面編輯器的主題（如 Divi、Avada），以免產生功能衝突和效能問題。

如何獲得 Elementor 支援？

免費版使用者可以透過 WordPress.org 支援論壇 和 Elementor 社群 Facebook 社團提問，由社群志工和其他使用者回答。Pro 版使用者享有優先工單支援——登入 Elementor 官網後台即可提交工單，通常在 24 小時內獲得官方團隊回覆。此外，Elementor 的官方知識庫有大量圖文教學可供自助查詢。

Elementor Pro 的主要功能有哪些？

Pro 版在免費版基礎上新增了 50+ 個進階元件（表單、Nav Menu 選單、Slides 輪播等）、Theme Builder（自訂頁首、頁尾、文章範本）、WooCommerce Builder（自訂商品頁和購物車頁）、Popup Builder（彈出視窗建構器）、動態內容、自訂 CSS，以及 300+ 個專業範本。詳細對照請參考本文的功能比較表。

如何在 Elementor 中使用範本或範本套件？

在編輯器中點擊頁面中央的資料夾圖示，即可開啟範本庫。範本分為 Pages（完整頁面）和 Blocks（單一區塊）兩類，點擊「Insert」即可插入。Pro 版使用者可以使用範本套件（Kit）：前往「Templates」→「Kit Library」，選定 Kit 後點擊「Apply Kit」，Elementor 會自動匯入所有頁面範本和全域設定，你再逐頁修改內容即可。

不會寫程式可以用 Elementor 架站嗎？

完全可以。Elementor 的核心設計理念就是讓不會寫程式的人也能建立專業網站。所有操作都透過拖放和視覺化面板完成，不需要接觸任何 HTML、CSS 或 JavaScript。如果你想要更精細的客製化，Elementor Pro 提供自訂 CSS 功能，但這是選用的，不是必要的。

停止使用 Elementor 後，內容會怎樣？

如果你停用 Elementor 外掛，你的文字內容會保留在 WordPress 資料庫中，但會失去 Elementor 的排版和樣式。頁面會回到 WordPress 預設的區塊編輯器（Gutenberg）顯示，你可能會看到一堆未格式化的文字和短代碼。建議在停用前先匯出重要頁面的內容。

Elementor 和 Gutenberg 有什麼不同？

Gutenberg 是 WordPress 內建的區塊編輯器，提供基本的內容排版功能。Elementor 是獨立的第三方頁面編輯器外掛，提供更豐富的元件庫、更精細的樣式控制、響應式設計工具和進階功能（如 Popup Builder、Theme Builder）。簡單來說，Gutenberg 適合寫文章，Elementor 適合設計頁面。兩者可以在同一個網站上共存——用 Gutenberg 寫部落格文章，用 Elementor 設計首頁和服務頁。

Elementor 是否支援多語言網站（WPML/Polylang）？

支援。Elementor 與 WPML 和 Polylang 兩大多語言外掛都有官方相容性。你可以用 Elementor 設計頁面後，透過 WPML 的翻譯編輯器逐一翻譯每個元件的內容。Elementor Pro 的 Theme Builder 範本也支援多語言翻譯。

使用 Elementor 會讓網站變慢嗎？如何優化？

Elementor 本身經過效能優化，但複雜的頁面設計（大量元件、高解析度圖片、多個動態效果）確實可能影響載入速度。優化建議：(1) 壓縮圖片再上傳，使用 WebP 格式；(2) 限制每頁動態效果在 3-5 個以內；(3) 使用快取外掛如 WP Rocket；(4) 在擴充插件設定中停用不需要的元件模組；(5) 選擇效能好的主機，如 Hostinger 的 LiteSpeed 伺服器。

我可以用 Elementor 建立 WooCommerce 商店頁面嗎？

可以，但需要 Elementor Pro。Pro 版的 WooCommerce Builder 讓你用拖放方式自訂商品頁面、商品列表頁、購物車頁面和結帳頁面的設計。你可以完全控制這些頁面的排版和樣式，不受 WooCommerce 預設範本的限制。

Elementor 如何更新？更新前需要備份嗎？

Elementor 的更新會出現在 WordPress 後台的「外掛」頁面，點擊「更新」即可。強烈建議在每次更新前備份網站——雖然更新通常很順利，但偶爾會出現與其他外掛或主題的相容性問題。你可以使用 Jetpack Backup 或主機商提供的備份功能。如果更新後出現問題，可以立即還原到備份版本。