elementor教學：新手用頁面編輯器做WordPress頁面

Elementor 是什麼？為什麼它是 WordPress 頁面編輯器

Elementor 是 WordPress 的拖拉式頁面編輯器，適合用來建立首頁、服務頁、活動頁與一頁式網站。這篇 elementor教學 的重點，是讓新手能從安裝到完成一個可發布頁面。

Elementor 的核心用途

Elementor 讓你在 WordPress 後台用視覺化方式編輯頁面。你可以把標題、文字、圖片、按鈕、表單、容器等小工具拖到畫布上，邊做邊看前台效果。

對新手來說，Elementor頁面編輯器最大的價值是降低版面製作門檻。我的判斷是：只要你要做的是品牌形象頁、服務介紹頁或活動頁，先用 Elementor 做出第一版，通常比先研究佈景主題設定更快。

Elementor 和 WordPress 的關係

WordPress 是網站管理系統，Elementor 是安裝在 WordPress 裡的外掛。你仍然需要 WordPress、佈景主題、頁面與選單；Elementor 負責頁面內容與版面設計。

項目	負責範圍	新手要理解的重點
WordPress	網站後台、文章、頁面、媒體、外掛	網站的基礎平台
佈景主題	網站基本外觀、頁首、頁尾、版面基礎	Hello Elementor、Astra 常被拿來搭配
Elementor	頁面拖拉編輯、即時預覽、區塊設計	主要處理單一頁面的內容呈現

Elementor 適合做哪些頁面

Elementor 特別適合需要視覺呈現的頁面，例如首頁、服務頁、關於我們、活動報名頁、作品集與一頁式網站。若你要補完整架站脈絡，可以先看 WordPress 架站教學，再回來做頁面。

Elementor 適合誰？什麼情況不一定要用

Elementor 適合想快速做出客製化頁面的品牌主、行銷人與接案設計者；如果網站以大量文章更新為主，Gutenberg 區塊編輯器可能更輕量。

適合使用 Elementor 的情境

情境	適合原因	建議做法
小型品牌首頁	需要 Hero、服務區塊、案例與按鈕	用 Container 建立主要區塊
活動頁或銷售頁	版面變化多，更新頻率低	先用免費版完成骨架
接案作品集	需要視覺排列與分類呈現	依作品類型規劃卡片區塊

不一定要用 Elementor 的情況

如果網站主要是部落格文章、知識庫或新聞更新，Gutenberg 的區塊編輯器通常比較夠用。Elementor 可以做得更漂亮，但也會增加維護、效能與版面檢查成本。

很多新手的誤區，是一開始就把每篇文章都用 Elementor 做。我的建議是：文章用 WordPress 原生編輯器，關鍵頁面再用 Elementor。

替代方案怎麼選

需求	建議工具	原因
一般文章更新	Gutenberg	輕量、維護成本低
形象首頁與服務頁	Elementor	拖拉編輯與視覺控制較直覺
還在選 CMS	先比較平台	可參考 CMS 選擇指南

安裝 Elementor 前要先準備什麼

安裝 Elementor 前，至少要有可登入的 WordPress 後台、已啟用的佈景主題、清楚的頁面目標，以及準備好的文字與圖片素材。

確認 WordPress 後台可正常使用

先確認你能登入 WordPress 後台，並能進入「外掛」、「頁面」、「外觀」等選單。如果你還停在主機、網域或 WordPress 安裝階段，應先完成 網站架設流程。

選一個乾淨的佈景主題

Elementor 可以搭配多數符合 WordPress 標準的佈景主題。新手常見選擇是 Hello Elementor 或 Astra，原因是預設樣式較少，比較不容易和 Elementor 版面互相干擾。

準備頁面內容與素材

• 頁面目的：首頁、服務頁、活動頁或一頁式網站。
• 主要標題：一句話說清楚你提供什麼。
• 段落文字：每個區塊先準備 2 到 4 句即可。
• 圖片素材：先壓縮尺寸，避免一開始就拖慢頁面。
• 按鈕連結：例如聯絡頁、表單、LINE 或預約頁。

如何安裝 Elementor 並開啟第一個頁面

Elementor 安裝方式是在 WordPress 後台進入外掛新增頁面，搜尋 Elementor Website Builder，安裝並啟用後，就能在頁面中點選 Edit with Elementor 開始編輯。

從後台安裝 Elementor 免費版

1. 登入 WordPress 後台。
2. 進入「外掛」中的「安裝外掛」。
3. 搜尋「Elementor Website Builder」。
4. 點選「立即安裝」。
5. 安裝完成後點選「啟用」。

Elementor 官方的 安裝說明 也以這個流程為主。若你只是做第一個頁面，先安裝免費版即可。

新增第一個 WordPress 頁面

1. 進入「頁面」並點選「新增頁面」。
2. 輸入頁面名稱，例如「首頁」或「服務介紹」。
3. 儲存草稿。
4. 點選「Edit with Elementor」。

選擇空白開始或套用範本

新手可以從空白畫布開始，學會 Container、標題、文字、圖片與按鈕的基本操作。範本能加快速度，但也常帶入太多不需要的區塊，後續清理反而花時間。

Elementor 編輯器介面怎麼看

Elementor 編輯器主要分成左側面板、中央畫布、上方工具列與結構導覽。新手只要先熟悉小工具、樣式、進階設定與 Navigator，就能完成基本頁面。

主要介面對照表

介面區域	用途	新手常用操作
左側面板	新增小工具與調整內容	拖拉標題、文字、圖片、按鈕
中央畫布	即時預覽頁面	點選要編輯的區塊
Navigator	查看頁面層級	選取容器、調整順序
Site Settings	管理全站字體、顏色、版面	先設定品牌樣式
響應式模式	切換桌機、平板、手機預覽	檢查手機版跑版

內容、樣式、進階三個分頁

內容分頁負責文字、圖片、連結；樣式分頁負責顏色、字體、背景；進階分頁負責間距、定位、動態效果與響應式可見性。新手最容易犯的錯，是把間距都用空白區塊硬撐，後面手機版會很難修。

用 Navigator 管理結構

Navigator 是 Elementor 頁面整理的關鍵工具。當頁面區塊變多時，直接在畫布上點選會越來越難，改用 Navigator 可以快速找到父容器、子容器與小工具。

用 Container/Flexbox 建立頁面版面

2026 年使用 Elementor 建頁面，應以 Container 和 Flexbox 作為主要版面邏輯。你可以把頁面理解成父容器包住子容器，再用方向、對齊與間距控制排列。

Container 的新版版面邏輯

Elementor 官方說明指出，Container 已取代舊的 section、column、inner section 結構，並能降低不必要的包裹層級。可參考 Elementor Container 官方文件。

概念	意思	操作重點
父容器	包住整個區塊	設定最大寬度、背景、上下留白
子容器	放在父容器內	負責左右欄、卡片、內容群組
方向	水平或垂直排列	桌機可左右排，手機常改上下排
間距	元素之間的距離	優先用 gap 和 padding 管理

新手建立版面的步驟

1. 先新增一個父容器，代表一個頁面區塊。
2. 設定容器內容寬度，例如置中並限制最大寬度。
3. 依需求加入一個或兩個子容器。
4. 把標題、文字、圖片、按鈕放進對應子容器。
5. 調整方向、對齊、gap、padding。
6. 切換手機版，檢查左右欄是否改成上下排列。

常見版面錯誤提醒

• 容器巢狀太深：頁面會難維護，也可能增加 DOM 複雜度。
• 每個元件都個別調 margin：手機版會出現不一致空隙。
• 只看桌機版：手機版常會出現圖片太大、按鈕被擠壓。
• 用空白區塊推距離：後續 RWD 幾乎一定要重修。

從空白頁完成一個基本首頁

用 Elementor 做基本首頁，可以先完成 Hero、服務介紹、信任證明、作品或案例、聯絡行動五個區塊。免費版就能做出可發布的第一版。

規劃首頁區塊順序

新手不要一開始追求很複雜的視覺效果。先把首頁當成一條清楚的說服路徑：你是誰、提供什麼、為誰解決問題、為什麼可信、下一步要做什麼。

區塊	內容目標	可用小工具
Hero	說明品牌與主要價值	標題、文字、按鈕、圖片
服務介紹	列出 3 到 4 個服務重點	容器、圖示、標題、文字
信任證明	呈現客戶、經驗、評價	文字、計數器、卡片
案例區	讓讀者看到成果	圖片、文字、按鈕
聯絡行動	引導諮詢或填表	按鈕、表單或連結

建立 Hero 區塊

1. 新增父容器，設定上下 padding。
2. 建立左右兩個子容器。
3. 左側放標題、說明文字與按鈕。
4. 右側放品牌相關圖片或重點資訊。
5. 手機版改成上下排列，按鈕寬度維持容易點擊。

建立服務與聯絡區塊

服務區塊建議用 3 欄卡片呈現，每張卡片只放一個服務主題。聯絡區塊不要塞太多話，保留一個明確按鈕即可。若你的目標是一頁式網站，可延伸閱讀 一頁式網站規劃。

如何設定全站字體、顏色與樣式

Elementor 的 Site Settings 可以集中管理全域字體、全域色彩、版面寬度、背景與 Lightbox。先設定全站樣式，後續做頁面會更穩定。

Site Settings 可以管理什麼

Elementor 官方 Site Settings 文件 提到，這裡可管理 Design System、Theme Style 與 Settings。新手最應先處理全域字體、全域色彩與內容寬度。

設定項目	用途	建議
Global Colors	管理主要色、輔助色、文字色	先設定 4 到 6 個常用色
Global Fonts	管理標題與內文字體	避免每個小工具單獨調字體
Layout	控制內容寬度與間距基準	先建立一致的桌機寬度
Site Identity	網站名稱、描述、Logo、Favicon	上線前務必補齊

先設計全域，再微調單一區塊

• 標題字級先在全域設定，單一頁面只微調特殊區塊。
• 品牌色先建立全域色票，按鈕和連結都引用同一組色彩。
• 區塊寬度先統一，避免頁面上方寬、下方窄。
• 不同頁面共用的樣式不要各自手動調整。

和 UI/UX 設計的關係

Site Settings 不是完整設計系統，但能讓新手建立基本一致性。字體、色彩、按鈕和間距一致，使用者才容易掃讀內容。若要深入設計原則，可參考 UI/UX 設計指南。

Elementor 手機版與 RWD 怎麼調

Elementor 手機版調整要從響應式模式進入，逐一檢查桌機、平板與手機斷點。重點是欄位順序、文字大小、間距、按鈕可點擊性與隱藏元素。

斷點與響應式模式

Elementor 的 響應式編輯文件 說明，斷點依螢幕寬度運作，不是依裝置名稱本身。這點很重要，因為平板設定也可能影響小筆電。

檢查項目	桌機	平板	手機
欄位順序	可左右排列	視寬度調整	通常改上下排列
標題字級	可較大	需避免換行太碎	先確保可讀
圖片尺寸	可橫向呈現	避免擠壓文字	控制高度與比例
按鈕	可並排	保留間距	可改滿版或上下排列

手機版常用調整清單

• 把雙欄容器改為垂直方向。
• 縮小 Hero 標題字級。
• 減少上下 padding，避免首屏只看到一段空白。
• 將不必要的裝飾元素在手機版隱藏。
• 確認按鈕文字沒有換到奇怪的位置。
• 測試表單欄位是否容易點選。

繼承值要小心

Elementor 的響應式數值會有繼承邏輯。桌機設定可能往較小斷點影響，但手機版的修改通常不會反過來影響桌機。我的實務做法是：先完成桌機，再做平板，最後才修手機。

Elementor 免費版夠用嗎？Pro 值不值得買

Elementor 免費版足夠完成基本頁面；Pro 是否值得買，取決於你是否需要表單、Theme Builder、動態內容、彈出視窗、WooCommerce 版面或更完整的範本能力。

適合免費版的使用者

如果你只要做一個首頁、服務頁或簡單活動頁，免費版通常已足夠。標題、文字、圖片、按鈕、容器等基礎小工具，已能完成大部分入門頁面。

需求	免費版可否完成	備註
基本首頁	可以	用 Container 與基礎小工具完成
服務介紹頁	可以	適合小型品牌與個人網站
自訂頁首頁尾	通常需要 Pro	Theme Builder 是核心差異
原生表單小工具	通常需要 Pro	也可用其他表單外掛替代

不適合立刻買 Pro 的情況

如果你還沒完成第一個頁面、還不確定網站內容、也沒有明確需要 Theme Builder，先不要急著升級。Pro 會給你更多功能，但功能變多也會讓新手更容易分心。

替代方案與購買矩陣

Elementor 官方的 Theme Builder 說明 指出，它可管理頁首、頁尾、文章範本、彙整頁與顯示條件，但仍需搭配已啟用的 WordPress 佈景主題。

網站類型	Pro 優先度	判斷原因
小型形象網站	中	若要自訂頁首頁尾，Pro 較方便
純部落格	低	Gutenberg 和佈景主題可能更輕
接案作品集	中	視覺頁面多時 Pro 會省時間
電商網站	中到高	若要深度客製商品頁才考慮
課程或會員網站	中	要看 LMS 或會員外掛整合需求

Elementor 會影響速度與 SEO 嗎

Elementor 可以做 SEO 友善頁面，但不會自動提升排名。速度與 SEO 風險主要來自過深 DOM、過大圖片、太多外掛、字體載入與未做好快取。

常見速度與 SEO 風險

風險	影響	改善方向
容器巢狀過深	DOM 變複雜，維護也變難	用較少容器完成同樣版面
圖片太大	影響 LCP 與載入速度	上傳前壓縮並設定合適尺寸
動畫過多	手機版體驗變差	只保留必要動效
外掛堆疊	CSS、JS 載入增加	刪除不用的小工具外掛
標題結構混亂	內容語意不清	每頁維持清楚 H1、H2、H3 層級

Elementor 內建效能功能

Elementor 官方 效能功能文件 提到，效能功能包含 DOM 最佳化、元素快取、圖示與圖片載入相關改善。這些功能有幫助，但不能取代良好的頁面規劃。

• 開啟穩定的效能功能前，先備份網站。
• 避免為了裝飾加入過多小工具。
• 使用快取外掛與圖片壓縮流程。
• 檢查 Core Web Vitals，不只看桌機分數。
• 更多速度處理可參考 網站速度優化指南。

Elementor SEO 操作重點

• 每頁只設定一個清楚 H1。
• 圖片補上 ALT，避免只放裝飾圖卻沒有語意。
• 按鈕文字要具體，例如「查看服務內容」比「了解更多」清楚。
• 不要把重要文字做成圖片。
• 發布前檢查 title、description、網址與內部連結。

Elementor 常見問題排查

Elementor 常見問題多半出在外掛衝突、快取、佈景主題樣式、記憶體限制或響應式設定。排查時先備份，再一次只停用或調整一個變因。

排錯表

問題	可能原因	處理方式
編輯器一直 Loading	外掛衝突、記憶體不足、瀏覽器快取	清快取、停用可疑外掛、檢查系統需求
前台樣式沒生效	快取或 CSS 檔未更新	清除網站快取並重新產生 CSS
手機版跑版	桌機間距繼承、容器方向未改	切到手機斷點逐一修正
更新後版面異常	Elementor、Pro、佈景主題版本不一致	先備份，逐項更新並檢查
頁首或頁尾消失	Theme Builder 條件或佈景主題衝突	檢查顯示條件與頁面範本

排查順序

1. 先備份網站與資料庫。
2. 清除瀏覽器、快取外掛與主機快取。
3. 確認 Elementor 與 Elementor Pro 版本相容。
4. 暫時停用非必要外掛，測試是否恢復。
5. 切換到乾淨佈景主題測試。
6. 回報問題前記錄錯誤畫面與操作步驟。

不要一口氣改太多

我最常看到的維護問題，是一次更新十幾個外掛，然後才發現頁面壞掉。Elementor 網站要穩，更新前備份、更新後抽查關鍵頁面，比事後猜原因有效得多。

發布 Elementor 頁面前的最後檢查

發布 Elementor 頁面前，至少要檢查桌機、平板、手機版面，SEO title、圖片 ALT、按鈕連結、表單、速度、快取與備份，避免上線後才發現錯誤。

發布檢查表

檢查項目	要看什麼	是否完成
桌機版	區塊順序、文字可讀、按鈕清楚	待勾選
平板版	左右欄是否擁擠	待勾選
手機版	首屏、按鈕、表單是否正常	待勾選
SEO	H1、title、description、網址	待勾選
圖片	檔案大小、ALT、顯示比例	待勾選
連結	按鈕、選單、內部連結是否可點	待勾選
效能	快取、圖片壓縮、Core Web Vitals	待勾選
備份	更新前與發布前是否有備份	待勾選

上線前實測清單

• 用無痕視窗打開頁面，確認訪客看到的是最新版本。
• 用手機實機測試，不只看編輯器預覽。
• 點擊所有按鈕與表單送出流程。
• 確認頁面沒有測試文字、假連結或空白區塊。
• 發布後再清一次快取，並重新檢查前台。

不在這篇展開的主題

WordPress 下載、主機購買、完整電商建置、AI 產圖、接案報價與深度技術 SEO，都不在這篇 Elementor 教學展開。這些主題會影響網站成敗，但會分散「用 Elementor 建立 WordPress 頁面」的主線；需要時再分別查架站、CMS、優化與一頁式網站主題。

Elementor 怎麼用？

Elementor 的基本用法是先在 WordPress 新增頁面，點選 Edit with Elementor，接著用 Container 建立區塊，再拖入標題、文字、圖片、按鈕等小工具。完成桌機版後，要切換到平板與手機版檢查 RWD，最後再發布頁面。

Elementor 要錢嗎？免費版可以做什麼？

Elementor 有免費版，也有 Pro 付費版。免費版可以做基本頁面、首頁區塊、服務介紹、圖片文字排版與按鈕連結，適合新手完成第一個 WordPress 頁面。

Elementor Pro 值得買嗎？

Elementor Pro 是否值得買，要看你是否需要 Theme Builder、表單、動態內容、彈出視窗或 WooCommerce 版面。若只是做一個基本形象頁，免費版先做完再評估會比較務實。

Elementor 和 Gutenberg 差在哪？

Gutenberg 是 WordPress 原生區塊編輯器，適合文章與一般內容更新；Elementor 是視覺化頁面編輯器，適合需要更多版面控制的首頁、服務頁與活動頁。文章量大的網站，不一定每篇都要用 Elementor。

Elementor 的 Container 是什麼？

Container 是 Elementor 目前主要的版面容器，用來放置小工具或其他子容器。新手可以把它理解成頁面區塊的外框，再用方向、對齊、gap 與 padding 控制版面。

Elementor 手機版跑版怎麼辦？

先進入響應式模式，切到手機版，檢查容器方向、欄位順序、字級、圖片尺寸與間距。常見修法是把左右欄改成上下排列，縮小標題字級，並移除手機版不必要的裝飾元素。

Elementor 編輯器一直 Loading 怎麼辦？

可以先清除瀏覽器快取與網站快取，接著檢查 Elementor 版本、暫停可疑外掛、確認佈景主題相容性。如果近期剛更新外掛，應先回想是哪個更新後開始異常。

Elementor 會拖慢 WordPress 網站嗎？

Elementor 本身可以正常使用，但過多容器、過大圖片、太多動畫、小工具外掛與未設定快取，都可能讓網站變慢。速度好壞取決於頁面製作方式與後續優化。

Elementor 對 SEO 有幫助嗎？

Elementor 不會自動提升 SEO，但可以幫你做出結構清楚、易讀、行動版友善的頁面。SEO 仍要靠內容品質、標題結構、內部連結、圖片 ALT、速度與搜尋意圖匹配。

Elementor AI 好用嗎？新手需要用嗎？

Elementor AI 可以輔助產生文字、版面或程式碼想法，但新手不一定需要。先學會 Container、Site Settings、RWD 和發布檢查，比一開始依賴 AI 更重要。

WordPress 下載教學要放在這篇嗎？

不建議放在這篇。WordPress 下載與架站流程屬於網站建立前置作業，Elementor 教學應聚焦在已經有 WordPress 後台後，如何建立與發布頁面。

做一頁式網站適合用 Elementor 嗎？

適合。Elementor 很適合做一頁式網站，因為你可以用多個 Container 串起 Hero、服務、案例、FAQ 與聯絡區塊。要注意的是手機版順序、頁面速度與按鈕導向要清楚。