第一次打開 WordPress 後台，看到密密麻麻的選單、一堆專有名詞，很多人就卡在「我到底要怎麼做出一個看起來像樣的頁面」。我自己實測過十幾種頁面編輯方案，最後留下來天天用的還是 Elementor——因為它把「拖拉就能排版」這件事做到了新手也能上手，卻又保留了進階者需要的彈性。這篇教學，我會帶你從「Elementor 是什麼」一路走到「親手做出第一個可以上線的頁面」，中間該踩的坑、該注意的效能問題，我一次講清楚。
📌 本文重點
- Elementor 是 WordPress 上最普及的視覺化拖拉頁面編輯器，官方宣稱全球數以千萬計網站在使用，免費版即可做出完整頁面。
- 免費版足夠新手做首頁、關於我、聯絡頁；Pro 版（付費訂閱，方案與價格依 Elementor 官網為準）主要多了 Theme Builder、表單、動態內容與大量進階 Widget。
- 新手做第一個頁面的正確順序是：規劃區塊結構 → 從外到內（Section/Container → Column → Widget）疊出版面 → 最後才調字級與間距。
- 響應式（RWD）不是自動就完美，Elementor 提供桌機／平板／手機三種裝置的獨立微調，發布前務必逐一檢查手機版。
- Elementor 會增加頁面 DOM 與 CSS/JS 負擔，若不控管容易拖慢網站；控制 Widget 數量、開啟內建效能選項是必要功課。
Elementor 是什麼？免費版與 Pro 版怎麼分
簡單一句話：Elementor 是一款讓你「用滑鼠拖拉就能排版」的 WordPress 頁面編輯外掛（page builder）。傳統上要在 WordPress 做出漂亮版面，你得懂 HTML、CSS，甚至要改主題檔；Elementor 把這一切變成「所見即所得」——你在畫面左邊調參數，右邊即時看到結果，不用寫一行程式碼。根據 Elementor 官方網站，它是目前 WordPress 生態中安裝量最高的視覺化編輯器之一，這也代表遇到問題時，網路上幾乎都找得到教學與解法，這對新手是很重要的安全感。
很多人第一個問題是：「我需要付費嗎？」答案是——新手做基本頁面，免費版就非常夠用。免費版（Elementor Free，從 WordPress.org 外掛庫就能安裝）已經包含拖拉編輯器、數十種基礎 Widget（文字、圖片、按鈕、標題、圖示、分隔線等）、響應式設定與範本套用。你要做首頁、關於我、服務介紹、聯絡頁，這些免費版都能完成。
Pro 版（Elementor Pro）是付費訂閱制，主要多了幾個關鍵能力：Theme Builder（可自訂頁首、頁尾、文章版型、封存頁）、原生表單 Widget、彈出視窗（Popup Builder）、動態內容、WooCommerce 電商元件，以及大量進階 Widget。至於確切的方案分級與年費，市場資訊變動快，請直接以 Elementor 官方定價頁為準，別聽信轉貼的舊價格。以下用表格幫你快速判斷該用哪個版本：
| 面向 | 免費版（Free） | Pro 版（付費訂閱，方案依官網） |
|---|---|---|
| 拖拉編輯器 | ✅ 完整 | ✅ 完整 |
| 基礎 Widget（文字/圖片/按鈕…） | ✅ 數十種 | ✅ 更多，總數上百 |
| 頁首/頁尾自訂（Theme Builder） | ❌ | ✅ |
| 表單 Widget | ❌（需搭配其他表單外掛） | ✅ 原生 |
| 彈出視窗 / 動態內容 | ❌ | ✅ |
| 適合對象 | 新手、單頁/小型網站 | 接案者、需要全站客製與行銷功能 |
我的建議是：先用免費版把手感練熟，真的遇到「免費版做不到」的需求（例如要自訂頁首頁尾）再升級。很多新手一開始就衝 Pro，結果連基礎介面都還不熟，錢花了功能卻用不到。如果你還在猶豫整個技術棧要不要選 WordPress，可以先看這篇 為什麼選 WordPress 架站，確認方向對了再往下走。
安裝與啟用：三分鐘裝好 Elementor
Elementor 是 WordPress 外掛，所以前提是你已經有一個能登入後台的 WordPress 網站（還沒有主機的話，主機選擇會直接影響後續速度，這點後面效能段落會再提）。裝 Elementor 本身非常快，跟著下面步驟走：
- 登入 WordPress 後台：在網址後面加上
/wp-admin，用你的帳號密碼進入。 - 進入外掛安裝頁：左側選單點「外掛 → 安裝外掛」。
- 搜尋 Elementor：右上搜尋框輸入「Elementor」，找到由 Elementor.com 官方發布、名稱為「Elementor Website Builder」的那一個（認明官方，避免裝到來路不明的仿冒外掛）。
- 安裝並啟用：點「立即安裝」，跑完後按「啟用」。這時左側選單會多出「Elementor」項目。
- （建議）搭配一個輕量佈景主題：Elementor 官方推出的 Hello Elementor 主題極度精簡，是搭配 Elementor 的常見選擇，能減少主題與編輯器打架、也對速度友善。
- 建立第一個頁面來測試：到「頁面 → 新增頁面」，輸入標題後，點頁面上方的藍色按鈕「使用 Elementor 編輯」，就會進入編輯器。
一個常被忽略的細節：安裝來源請務必是 WordPress.org 官方外掛庫或 Elementor 官網。你可以在 WordPress.org 的 Elementor 外掛頁確認它的版本、評價與相容性資訊。網路上流傳的「破解 Pro 版」幾乎都藏有惡意程式碼，裝了等於把後門開給別人，YMYL 等級的傷害——別省這筆錢。
認識編輯器介面：Widget、Section/Container 與拖拉
第一次進 Elementor 編輯器，畫面大致分三塊：左邊是面板（放 Widget 清單與各種設定）、中間是你的頁面畫布、下方有裝置切換與發布按鈕。搞懂三個核心名詞，你就掌握了整個 Elementor 的邏輯。
1. Widget（小工具）：頁面的最小積木
Widget 就是一個個「功能元件」——標題、一段文字、一張圖、一顆按鈕、一個圖示，都是 Widget。你要做的事很單純：從左側面板把想要的 Widget「拖」到右邊畫布上放好，然後點它，左邊面板就會變成它的專屬設定（內容、樣式、進階三個分頁）。這就是 Elementor 最迷人的地方：拖進去、點一下、改參數，完成。
2. Section / Container：裝 Widget 的容器
Widget 不能憑空浮在頁面上，必須放進「容器」。舊版 Elementor 用的是 Section（區段）+ Column（欄） 的結構：一個 Section 裡放幾個 Column，Column 裡再放 Widget。新版則主推更彈性的 Container（彈性容器，底層是 CSS Flexbox/Grid），可以更自由地做並排、置中、間距控制。不論你的版本預設是哪一種，觀念都一樣：先有容器，才放 Widget；版面的「骨架」是容器決定的。
3. 拖拉與巢狀結構
把頁面想成俄羅斯娃娃：最外層是容器（決定一整條橫向區塊）、裡面切成幾欄、每欄再放 Widget。理解這個「由外到內」的巢狀關係，你排版時就不會手忙腳亂。下面用表格把三者關係講清楚：
| 層級 | 名稱 | 負責什麼 | 比喻 |
|---|---|---|---|
| 最外層 | Section / Container | 一整條橫向區塊、背景、內距 | 房間 |
| 中間層 | Column（欄） | 把區塊切成左右幾等分 | 房間裡的隔間 |
| 最內層 | Widget | 實際內容（字、圖、按鈕） | 隔間裡的家具 |
另外三個新手必學的小操作：手把（拖拉重新排序）、右鍵選單（複製、貼上樣式、刪除）、以及左下角的「導覽器」（Navigator，用樹狀清單管理所有元素）。當頁面越做越複雜，導覽器會是你快速定位元素的救命工具。
實作：一步步做出你的第一個 landing page
理論講完，來動手。我們的目標是做一個最基礎、但結構完整的 landing page（單頁式著陸頁），包含：主視覺區（大標＋副標＋按鈕）→ 特色三欄區 → 行動呼籲區（CTA）。這是絕大多數個人品牌、服務介紹頁的通用骨架。跟著做一次，你就懂了。
步驟一：規劃再動手（別跳過這步）
在拖任何東西之前，先在紙上或腦中畫出頁面「有幾條橫向區塊」。以我們的範例就是三條：主視覺、特色、CTA。先想結構、再填內容，是做頁面不返工的關鍵。新手最常見的錯誤就是想到什麼拖什麼，最後版面歪七扭八還要重來。
步驟二：建立主視覺區（Hero Section）
- 在空白畫布點「+」新增一個容器，選單欄結構。
- 拖一個「標題」Widget 進去，打上你的主標（例如「幫你把想法變成上線的網站」）。
- 下面再拖一個「文字編輯器」Widget，寫一兩句副標說明。
- 最後拖一個「按鈕」Widget，文字改成「立即聯絡」之類的行動指令。
- 點容器本身 → 「樣式」分頁 → 設定背景色或背景圖，並在「版面配置」把內容垂直與水平置中、拉高最小高度，主視覺就有氣勢了。
步驟三：建立特色三欄區
- 新增第二個容器，這次選三欄結構（或用 Container 設定三個並排）。
- 在每一欄放入「圖示方塊」（Icon Box）Widget——它一次就包含圖示、標題、說明文字，很適合列特色。
- 三欄分別填入你的三個賣點，例如「快速上線」「響應式設計」「SEO 友善」。
- 選其中一欄調好樣式後，用右鍵「複製」再貼上，就不用每欄重調，效率翻倍。
步驟四：建立 CTA 行動呼籲區
- 新增第三個容器，設一個明顯的背景色（跟主視覺呼應）。
- 放一個標題（「準備好開始了嗎？」）＋一顆按鈕。
- 按鈕的「連結」欄位填上你的聯絡頁或表單網址。
步驟五：預覽、發布
- 點左下角的「眼睛」圖示預覽，用讀者視角看一遍。
- 沒問題後，點綠色的「發布」按鈕，頁面就正式上線。
- 回到 WordPress 後台，還能到「設定 → 閱讀」把它指定為首頁。
做到這裡，你已經完成一個結構完整的頁面了。想讓版面更專業，關鍵其實不在 Widget 用得多，而在留白、對齊、字級層次這些排版基本功。這方面我整理過一篇 WordPress 網站設計的 8 個排版與視覺原則，搭配這篇一起看，你的頁面會從「能看」升級到「好看」。
響應式（RWD）調整：讓手機版也好看
很重要的觀念：Elementor 桌機版排得再漂亮，也不代表手機版自動就對。台灣讀者超過一半用手機瀏覽，手機版沒調好，等於放掉一半流量。好消息是 Elementor 內建完整的響應式工具，你不用另外寫 media query。
操作方式是點編輯器下方的裝置圖示（桌機／平板／手機）切換視圖。切到手機模式時，你對「字級、間距、對齊、隱藏」等設定的修改，只會套用在該裝置上，不會影響桌機。這就是 Elementor 響應式的核心邏輯。以下是新手最該檢查的幾件事：
- 字級太大：桌機的大標放到手機常常爆版，切到手機視圖把標題字級調小。
- 三欄要不要疊起來：多數情況手機上三欄自動變成一欄堆疊，但你可以手動設定堆疊順序與間距。
- 間距（Padding/Margin）：桌機的大留白在手機上會顯得空洞，記得縮小。
- 隱藏非必要元素：某些裝飾性區塊可在特定裝置「隱藏」，讓手機載入更輕。
- 按鈕大小：手機是用手指點，按鈕要夠大、間距要夠，避免誤觸。
發布前，務必用手機模式從頭到尾捲一遍，最好也拿真實手機打開網址看看。這個五分鐘的檢查，能幫你擋掉最尷尬的版面災難。
效能提醒：別讓 Elementor 拖慢你的網站
這段是很多教學不會講、但我一定要提醒你的：Elementor 的便利是有代價的——它會產生較多的 HTML 結構（DOM）與額外的 CSS/JS，若不控管，頁面容易變重、載入變慢。而網站速度直接影響使用者體驗與 Google 的 Core Web Vitals 評分，是 SEO 的硬指標。以下是我實測後最有感的幾個控管做法：
- Widget 別貪多：能用一個 Icon Box 解決的，別疊三四個 Widget 拼。元素越少，DOM 越輕。
- 善用內建效能選項：Elementor 後台「設定 → 功能」裡通常有「改善資產載入」「延遲載入背景圖」「內嵌字型」等實驗性/效能選項，開啟它們能減少不必要的載入。
- 圖片一定要壓縮：頁面變慢最大宗元兇通常是沒壓縮的大圖，上傳前先轉成 WebP、控制尺寸。
- 外掛不要無限加：Elementor 生態有大量第三方擴充 Widget 包，裝越多、負擔越重，克制安裝。
- 選對主機：便宜的共享主機在 Elementor 這種較吃資源的環境下會很吃力，主機等級是速度的地基。
如果你發現頁面已經有點慢，別急著怪 Elementor，先做完整診斷。我把三個最關鍵的速度指標與實際優化步驟寫成了 WordPress 網站速度優化實戰（Core Web Vitals 三項指標），照著做能把 Elementor 頁面的速度拉回可接受範圍。外掛太多也是常見拖累來源，這篇 我把網站精簡到 11 支外掛的取捨清單提供了實際的減法思路。至於地基層的主機挑選，可以參考 WordPress 虛擬主機推薦 2026，主機夠力，Elementor 才跑得順。
一句話總結效能觀念：Elementor 是好用的工具，但工具不會替你做取捨——把版面做輕、圖片壓好、主機選對，速度與美觀可以兼得。
常見問題 FAQ
Elementor 一定要買 Pro 版嗎？
不一定。做首頁、關於我、聯絡頁等基本頁面，免費版就足夠。只有當你需要自訂頁首頁尾（Theme Builder）、原生表單、彈出視窗或動態內容時，才會需要 Pro。建議先用免費版把手感練熟，確認有進階需求再升級，方案與價格請以 Elementor 官方定價頁為準。
Elementor 會不會拖慢我的網站？
會有影響。Elementor 會產生較多 DOM 與額外 CSS/JS，若不控管容易變慢。但透過控制 Widget 數量、開啟內建效能選項、壓縮圖片與選用夠力的主機，多數網站都能維持在良好的載入速度。速度是 SEO 硬指標，值得花時間優化。
新手第一次做頁面，大概要多久？
如果先規劃好結構，一個三段式的基礎 landing page，熟悉介面後大約半小時到一小時就能完成。第一次會慢一點，主要時間會花在熟悉 Widget 位置與樣式設定；做過兩三次之後速度會明顯變快。
Elementor 和 WordPress 內建的區塊編輯器（Gutenberg）差在哪？
Gutenberg 是 WordPress 內建、以「區塊」為單位的內容編輯器，偏向寫文章與基礎排版；Elementor 則是更強的視覺化頁面編輯器，拖拉自由度、樣式控制與版面彈性都更高，適合做設計感較強的頁面。兩者可以共存，很多人用 Gutenberg 寫部落格文章、用 Elementor 做首頁與著陸頁。
用 Elementor 做的頁面，換主題會不會跑掉？
Elementor 頁面的版面資料存在頁面本身，換佈景主題時內容通常還在，但頁首、頁尾與全站樣式可能會跟著主題變動。若你大量使用 Pro 的 Theme Builder，換主題前建議先備份，並在測試環境確認無誤再套用到正式站。
延伸閱讀
- 為什麼選 WordPress 架站？2026 年的 5 個理由與 3 個不適合的情況
- WordPress 網站設計實戰：8 個讓版面更專業的排版與視覺原則
- WordPress 網站速度優化實戰：Core Web Vitals 三項指標
- WordPress 虛擬主機推薦 2026：新手架站 5 大主機商比較
