最後更新時間：2026-01-01，由 Dean 更新 
WordPress 網站預設使用區塊編輯器，可以很方便地架出網站，但在設計銷售頁、行銷活動頁等特定頁面時，無法自訂太多外觀和功能，通常會建議改用頁面編輯器來設計，可拖放 + 圖形化介面也對新手來說較友善。
基本上，我只要自己架設網站都會安裝 Elementor，除了外觀設定，這個頁面編輯器還能根據不同裝置設定不同的字型尺寸、顏色、對齊位置、定位，也有頁面層級、更多響應式調整等細部設定，以上免費版都能做到。
這一篇 Elementor 教學文章，我會以實務的網頁設計流程，從新手最容易卡住的基礎概念開始介紹，並一步步帶你完成頁面設計，也會介紹怎麼使用模板，看完這篇至少就能懂 80% 以上。
Elementor 是什麼？
Elementor 是一款能夠直接用「拖曳」方式來設計頁面的 WordPress 頁面編輯器外掛，在 2016 年由 Yoni Luksenberg 和 Ariel Klikstein 兩位創辦人創立，目前安裝數已超過 1 千萬。
Elementor 優點
- 拖曳編輯：透過簡單的拖曳式介面快速設計網頁，不需要任何程式碼。
- 直覺調整：編輯時會有預覽畫面和圖層，可以更直觀地做調整，並調整圖層的上下順序。
- 繁中介面：介面可設定繁體中文，方便台灣用戶使用。
- 功能眾多：免費版提供 30+ 個基本小工具、30 +個頁面模板和 5 組完整網站模板，而專業版則提供 90+ 個小工具、1000+ 個頁面模板和 300+ 個完整網站模板。
- 全域管理：可建立網站常用色系、字體等等，不但效率高，也讓網頁設計風格一致。
- 響應式設計：可以調整網頁在電腦、平板與手機呈現的樣子，且不同裝置的設定不會相互影響。
- 網路資源豐富：發展較早且評價高，有大量中英文資源和外掛可使用，官方也開發了多種擴充外掛。
- 主題建構器管理方便：主題建構器能幫網站的不同區塊和頁面建立重複使用的範本，如商品頁、文章頁、頁首、頁尾、側邊欄等，並透過統一管理的方式同步更新，靈活組合，讓管理網站更方便 (Pro 功能)。
Elementor 缺點
- 未完全中文化：編輯器介面未完全中文化，還是有部分原文。
- 網站效能影響：主機效能會影響 Elementor 載入速度；安裝過多 Elementor 擴充外掛也會使網站速度變慢。
- 擴展外掛影響：若要實現更進階的功能或設計，要安裝擴充外掛，多少會影響到主機效能。
- 外掛相容問題：部分外掛程式、佈景主題可能與 Elementor 不相容，需要特別注意。(本篇常見問題會列出)
Elementor 適合對象
- 覺得 WordPress 預設編輯器很難用，想以拖放式設計頁面的新手。
- 想快速建立網站頁面或行銷活動頁面的行銷人員和經營者。
- 想用工具提高工作效率的網站設計師和程式設計師。
如何安裝 Elementor + 基本設定？
安裝 Elementor
首先，我們要先來安裝 Elementor。如果已經安裝了，可以略過這段。
到 WordPress 後台：
- 左側選單點開「外掛」，選「安裝外掛」。
- 等跳轉頁面後，右上角「搜尋外掛」欄位輸入「Elementor」。
- 等下方跳出結果，點「立即安裝」。
Elementor 有很多擴充外掛，名字可能很類似，要認清楚名稱和 Logo。
成功安裝並啟用 Elementor 後，等跳轉「已安裝的外掛」頁，在 Elementor 下方按「設定」。
如果你是已經從官網購買 Elementor Pro 的人，則要另外從後台下載 Pro 版安裝檔，再上傳到 WordPress，最後進行綁定。可以閱讀 Elementor Pro 安裝與綁定教學。
已知與 Elementor 不相容的外掛，記得不要安裝：
1. 網站備份外掛：Clone (可能會破壞 Elementor 的 JSON 數據)
2. 短代碼外掛：Shortcodes Ultimate (無法從 Elementor 編輯 Shortcodes Ultimate)
3. 轉碼外掛：qTranslate X Cleanup and WPML Import (和 Elementor 頁面架構衝突)
4. 優化網站外掛：Heartbeat Control (可能會破壞 Elementor 的設定)
設定 Elementor
安裝完畢後，進入正式的 Elementor 教學，我們先從「設定」開始。
Elementor 有提供優化、快取、本地加載 Google 字體、延遲加載圖片等功能，你可以跟著以下內容設定。
step 1
到 Elementor 首頁，左側列表的 Elementor 下按「設定」。
step 2
進入 Elementor 一般設定頁 (預設跳這頁)：
- 內容類型：預設是勾選「文章」和「頁面」。如果你有安裝 WooCommerce 電商外掛要記得勾選「商品」。
- 停用預設顏色：如果有在佈景主題設定顏色，建議勾選。
- 禁用預設字型：如果有在佈景主題設定字體、字型等，建議勾選。
- 使用數據共享：勾選後會向 Elementor 分享跟外掛相關的數據和資料，以改善品質，我通常不勾選。
以上都確認，按「儲存設定」。
step 3
接下來做「進階設定」，上方頁籤按「進階」：
- 切換編輯器裝載方法：如果 Elementor 編輯器無法載入，可開啟看看會不會恢復正常。
- 啟用未過濾的檔案上傳：
- 啟用：確認會用到 SVG 檔時才開啟。像我網站上有使用，都會開啟。
- 停用：確認網站不會用到 SVG、JSON、.exe、.bat、.js、.php 或其他 WordPress 不支援的媒體檔案等，或有安全疑慮，可選停用。
- Google Fonts：網站有使用 Google Fonts 的字體就要開啟，但可能會影響網站速度。
- Google Fonts Load (啟用 Google Fonts 才會出現這項)：決定 Google 字體的加載方式，建議選 Swap，會在載入網頁時先顯示備用字體，才切換到使用字體。
- 嵌入 Font Awesome 4 支援 (解決舊版本不相容的問題)：簡單來說，Elementor 的 icon 是使用 Font Awesome 這平台，但如果發現網站的圖示有部分無法顯示，代表版本是舊版，開啟這選項就能成功顯示。
- Generator Tag：會在程式碼中標記用 Elementor 的什麼版本製作網頁，因有安全上的疑慮，建議直接停用，不影響網站運作。
都確認後，按「儲存設定」。
step 4
接下來設定「效能」：
- CSS 列印方法：一律選外部檔案，讓 CSS 放在一個檔案裡加載，避免網頁過大影響載入速度。除非是測試用網站，才選內部嵌入。
- Optimized Image Loading：建議開啟，會特別針對 LCP 和 FCP 的圖片加載指標做優化。
- Optimized Gutenberg Loading：
- 啟用：若網站大多用 Elementor 製作，如形象網站、作品集網站等，要開啟這項。
- 停用：若網站大多用 WordPress 預設的區塊編輯器來編輯，則停用，避免部分區塊和腳本被移除。
- Lazy Load Background Images：
- 啟用：當網頁很長、有很多背景圖片，且這些圖片不在網頁打開時的「第一眼範圍」(首頁最上方) 時，建議開啟，能讓還沒滑到的圖片晚點載入，加快網頁速度。
- 停用：如果網頁不長，或背景圖片都在首屏 (同上，指第一眼範圍)，開了也不會有效果，關閉就好。
- Element Cache：
- 啟用：一般網站建議啟用，會把網頁上的部分資料先存起來，需要使用時才顯示。但如果有使用一些快取外掛，如 WP Rocket 等，就不要開啟，避免衝突。
- 停用：會員制網站、電商網站等使用大量動態元件的網站建議停用，避免使用者看到舊的頁面或資料。
以上都確認後，按「儲存設定」。
step 5
最後設定「功能」，分為「實驗」和「穩定」等兩類：
一、實驗功能：
這邊是 Elementor 還沒穩定使用的功能，開啟後要隨時注意網站狀態。
- Optimized Markup：維持預設值即可，雖然啟用可優化網頁結構，但容易有相容性的問題。
- Load Google Fonts Locally：把 Google 字型下載到你的主機，網站若有足夠主機資源，或是有歐盟的使用者，會建議選「Active」。
- Landing Pages：這功能已被官方棄用，可忽略。
- Element Caching：若在頁面上用很多 Elementor 小工具，建議選「Active」，可在進階設定中手動停用或啟用特定元件 (小工具) 的快取狀態。
二、穩定功能
- Inline Font Icons：建議選「Active」，會將 Icon 作為內嵌 SVG 加載，以減少網頁的檔案大小和請求次數。
- Additional Custom Breakpoints：維持預設值即可，因預設的桌機、平板和手機等 3 個設定已很夠用，除非你要讓網站能在更多不同尺寸的設備上瀏覽 (例如有些電商網站會需要)。
- Container：新網站選「Active」，預設用 Flexbox 和 Grid 設計頁面。但如果你網站本來就是用舊版本 Elementor 設計，先維持預設值，避免跑版。
- Nested Elements：要啟用「Container」功能才能設定，可在小工具內嵌套其他小工具，例如在表格內插入圖片或按鈕等，適合架構較複雜的網站設計，十分建議啟用。
- Editor Top Bar：直接啟用，頁面頂部會改成新型的編輯器，可切換頁面和其他捷徑鈕 (後面會介紹)。
- 數據共享：是否開啟功能頁中設定的數據以改進外掛，通常我是不勾選。
以上都確認完畢再按「儲存設定」。
PS. 左邊有閃綠燈的功能表示有在運作，所以有確定不用的，一定要點開選「Inactive」。
Elementor Manager
這項的功能是開啟或關閉 Elementor 小工具，可關閉不常用的，避免影響網站效能。
- 左側選單 Elementor 下點開「Elementor Manager」。
- 如果有安裝其他 Elementor 小工具外掛，在這邊篩選，會比較好找。
- 點開 Scan Elementor Usage，參考目前的使用次數。
- 在列表中選擇關閉哪些小工具，可以關閉使用次數少的。
- 確認後，再按「Save Changes」儲存設定。
Elementor 教學：介面介紹 + 全站設定
有 2 種方式可登入 Elementor 編輯器：
- 新增頁面：WordPress 後台點「頁面 > 新增頁面」，進入 WordPress 編輯器後，在上方按「使用 Elementor 編輯」鈕。
- 編輯已有頁面：WordPress 後台左側選單點「頁面 > 全部頁面」，在要編輯的頁面下按「使用 Elementor 編輯」連結。
使用介面
這是點進編輯器後看到的介面 (記得在 Features > Editor Top Bar 中設定啟用 )，共分為三個區塊：
- 左側設定區：有很多小工具的區塊，也可以設定其他項目，等等會介紹。
- 顯示/切換區：上方有螢幕切換、頁面切換、頁面檢視鈕和發佈等按鈕。
- 編輯/預覽區：在編輯時，會把左邊的小工具拖到這邊來，並即時看到顯示效果。
接下來，一一介紹各區按鈕：
「左側設定區」上方按鈕 (由左至右)：
- Elementor Logo：修訂紀錄、使用者偏好設定、主題建構器 (付費) 和回到 WP 後台等項目。
- 新增功能：新增小工具或回到小工具列表。
- 網站設定：包括顏色、字型、版面和其他樣式，等等會詳細介紹。
- 結構 (導覽器)：簡單來說就是圖層，點選後會跳出一個小視窗，可查看頁面每個元件的排序。在上面按右鍵可快速編輯，也可直接按 delete 鍵刪除。
右上方「顯示/切換區」按鈕 (由左至右)：
- 頁面切換：切換成其他頁面或新增頁面。
- 設置：如頁面標題、精選圖片、頁面說明等。
- 裝置切換鈕：Elementor 可依不同裝置做不同設定。
- 新手導覽任務：如網站 Logo 設定、網站設定、製作 3 個首頁和網站首頁等 (可在偏好設定隱藏)。
- What’s New：Elementor 的更新公告或最新通知。
- 查找器：搜尋 Elementor 編輯器中你正在編輯的所有內容 。
- 幫助：官方知識庫，可找到所有說明文件。
- 預覽：可預覽頁面 (會另開新視窗)。
- 發佈/儲存：可發佈頁面、儲存草稿或鎖定修正時間。
接下來詳細介紹左側設定區會用到的 6 類設定。
全站設定
設定區左上方按下「網站設定」，會看到 3 類設定：
- Design System (設計系統)：管理全站使用的顏色、字型。
- 佈景主題樣式：標題、按鈕、圖片、表單等樣式的設定。
- 設定：瀏覽器 Logo (網站識別)、網站背景、版面配置、圖片燈箱效果等。
要提醒你的是，Elementor 是和佈景主題互補的編輯器，所以你只需要設定佈景主題缺乏的部分。
比如：佈景主題如果無法設定 H1~H6 的標題，那你就要設定「排版樣式」；佈景主題如果沒有管理全站字型的功能，就要「全域字型」。
甚至，如果你的佈景主題沒有管理全站顏色、字型或排版樣式的功能 (但比較少見)，這邊全部都需要設定，統一整體風格。
以下詳細介紹幾個一定要做的重要設定：
點「網站設定 > Global Colors」進入介面，左邊用來設定顏色，右邊顯示色碼和色票。
在開始設定之前，如果你是第一次架站，我會建議先了解網站要怎麼配置顏色：
網站設計和平面設計有些不同，需要讓瀏覽的人覺得舒適，一看就知道哪個部分是主要內容、哪些不是，所以在一個頁面上，顏色不能太多。
最基礎的網站配色會有 3 種：
- 主色 (主要色)：是網站最重要的顏色，代表品牌形象。頁面中的主色面積最大，例如頁首、按鈕、連結等，通常佔網站整體色彩的 60%。
- 輔色 (次要色)：用來搭配主色的顏色，通常比主色的明度暗一些，可讓頁面看起來更有層次，常用於次要元素，例如區塊裝飾、分隔線、或與主色對比的按鈕，建議佔比約 30%。
- 強調色： 吸引目光、強調重點的顏色。 通常用鮮明色彩，少量點綴在重要位置，例如行動呼籲按鈕、提示訊息、重要圖示，佔比最少，約 10%，但要最顯眼，以突出可互動的功能或重要訊息。
在 Elementor 編輯器中，除了以上顏色外，建議再設定 2 個顏色給文字和背景使用：
- 文字色：做法是在色彩選擇器上選好主色後，往下加深，變得很接近黑色，盡量讓文字與背景做出對比，以方便閱讀。
- 背景色：按照文字色的做法，在選擇器中填入主色再往上選，讓主色變得很淺很淺，變得很接近白色，可用在網站背景、區塊背景或表格背景。
配好顏色之後，在設計頁面時都盡量使用這幾種顏色，在視覺上就會比較和諧舒適。如果覺得不夠，可再新增幾個淺色做搭配。
接下來介紹如何設定顏色：
step 1
加入主要和次要顏色：
- 點開「主要」和「次要」旁的顏色小框。
- 等跳出「色彩選擇器」，輸入色碼或選色。
step 2
加入文字色：
- 點開文字旁的小框。
- 在「色彩選擇器」視窗上選擇比主色更深的顏色 (明度加深)。
- 按「Save Changes」儲存設定。
step 3
加入強調色：
- 點開強調旁的小框。
- 在「色彩選擇器」視窗上選一個鮮豔的顏色 (彩度較高)。
step 4
加入自訂的背景色：
- 下方點「新增顏色」。
- 點開新項目的小框，選一個極淺的顏色 (白色是 #FFFFFF)。
- 點一下項目名稱，自訂一個名稱，如背景色。
- 最後按「Save Changes」存檔。
全域字型說明：
- 如果有在「Elementor > 設定 > 一般」勾選「停用預設顏色」，這裡不用設定，會自動帶入佈景主題設定的顏色，編輯小工具時選「樣式 > 文字色彩或背景色彩」就會看到預設的顏色了。
- 如果不小心選錯顏色，色彩選擇器上方有個回復圖示，按一下可恢復成預設值。
Lorem ipsum dol在「網站設定」點「全域字型」，左邊設定字型，右邊會顯示出來。
你需要依序設定字體：
- 點開編輯圖示。
- 等跳出「排版樣式」視窗，建議設定字型、尺寸、字重、行高和字距：
- 字型系列：點開輸入 Google Fonts 的字型名稱，如 Noto Sans TC (思源黑體)。
- 尺寸：
- 主要標題（H1）：建議 32~48 px，讓標題醒目。
- 次要標題（H2~H6）：建議 21~36 px，和 H1 區隔開來。
- 內文：建議 15~18 px，方便閱讀。
- 強調文字 (如按鈕)：建議 14~16 px，比內文小一些或一樣。
- 字重：設定字體粗細。
- 標題：可選 Bold (700) 或 Extra-Bold (800)。
- 內文：一般用 Regular (400)，或稍粗的 Medium (500)。
- 行高：設定每行高度，通常是字體大小的 1.2~1.4 倍。
- 標題：可略小，約 1.2~1.4 倍。
- 內文：建議 1.4~1.8 倍，尺寸越大則行高則越大。
- 字距：設定每個字之間的距離。
- 若想讓標題看起來不那麼擠，可設 1 px 以下的數值，但要視字體和字重而定。
- 內文不建議調整，以免影響閱讀。
- 最後按「Save Changes」。
全域字型說明：
- Google Fonts： 如果想用 Google Fonts 繁體中文字型，可在「Elementor > 設定 > 一般」中啟用，清單參考官方設定說明。
- 字型選擇建議： 為網站風格一致，字型一種就好，最多標題、內文各一種。
這裡可以設定網站整體的文字樣式，包括顏色、字型、段落間距等。有「預設樣式」(左) 和「自訂樣式」(右) 可選，建議用「預設顏色」來調整：
- 主體 (內文)：
- 顏色：建議選深灰色或黑色，確保文字和背景有清楚的對比，可用配色工具測試。
- 字型：選擇容易閱讀的字型，如 Google Fonts 中的思源黑體，更詳細可參考中文可商用字體的推薦。
- 段落間距：適當的段落間距能讓文章更好讀，建議設定 1.5~2 em。
- 連結 (超連結文字)：
- 一般顯示 (左)：選一個和內文不同、但協調的顏色，讓人知道這裡有連結 (或設定底線)。
- 游標暫留 (右)：指的是滑鼠移到上面時，可設定顏色變化 (或加上底線)，讓點擊效果更明顯。
- H1~H6 標題：
- 顏色：可和內文同色系，或選用剛剛設定的主要色，讓標題更突出。
- 字型：可選擇和內文不同的字型，但要注意整體風格的搭配。
- 排版樣式：選自訂，微調尺寸、字重和行高，至少要讓 H1~H4 從大到小，有層次感。
- 設定好後，按「Save Changes」儲存。
設定全站的按紐樣式 (但如果設計頁面時在「按鈕小工具」上有設定，會覆蓋這裡的)：
- 排版樣式：設定按鈕文字的字型、尺寸、字距等樣式，可以參照前面的全域字型設定。
- Text Shadow：文字陰影，效果通常不明顯，不太會設定。
- 文字色彩：設定按鈕文字顏色，依據你按鈕背景色決定，背景淺文字深、背景深文字淺。
- Background Type：背景樣式，可選單色或漸層。一般選單色就好，並使用強調色。
- Box Shadow：按鈕陰影樣式，通常不設定，或只有淡淡的一點點增加立體感。
- 框線圓角半徑：按喜好做設定，數值越大越接近圓形。如果你網站風格比較圓潤，記得按鈕也要統一導圓角。
- 邊框間距：邊框和文字的內部間距，通常不動。
有修改要按「Save Changes」存檔。
使用者偏好設定
「使用者偏好設定」可切換暗黑模式、調整左側設定區寬度等，改變編輯器的設定。
step 1
- 左邊設定區上方按 Logo 圖示。
- 點開選單後，按「使用者偏好設定」。
step 2
從上到下介紹設定項目：
- Panel：左側設定區面板的顯示模式。
- 明亮/暗黑：分為太陽/月亮圖示。
- 自動：指的是自動偵測作業系統，並同步使用一樣的設定，我通常選這個。
- 寬度 (px)：左側設定區的寬度，不過這可隨時手動用滑鼠調整，維持預設就好。
- 畫布：右側顯示區。
- Show quick edit：建議開啟，當滑鼠移到小工具的編輯圖示上時，會自動跳出複製、刪除等圖示；內容框上方也會多一個複製圖示。
- Expand Images in light box：建議開啟，在編輯圖片燈箱模式時，可預覽圖片放大的效果。
- Show hidden elements：建議開啟，如果要在行動版裝置上隱藏某個區塊，可以看到半透明的顯示，如果要編輯，就會比較方便。
- Launchpad Checklist：建議關閉，可以隱藏上方顯示/切換區的火箭按鈕。
- Design System：
- Show global settings：建議開啟，在設定全域字型和顏色時較方便辨識。
- 導航列：
- Exit to：左上角 Logo 選單選 Exit to WordPress 時，前往哪個頁面？包含：WP 後台、全部頁面、該頁面的 WP 編輯器，我通常選擇「該頁面的 WP 編輯器 (This Page)」。
設定完後，要記得按右上角的「發佈」鈕才會儲存。
導覽器
在左側設定區上方點圖示，就會在右邊的預覽跳出小視窗，可檢視、拖曳、刪除或按右鍵叫出功能選單。
導覽器的 4 種快速操作功能：
- 可用滑鼠拖曳，改變上下順序。
- 在圖層上點右鍵，可叫出功能選單。
- 在圖層上點左鍵，左側會跳出設定。
- 可用 Delete 鍵刪除頁面上的小工具元件。
其實，這個功能在設計上很重要，因為有時候做一些元件比較多的設計時，你光點編輯畫面會點不到要設定的那個元件，這時候就需要使用「導覽器」，直接從元件結構中，點選該元件做編輯。
小工具
「小工具」就是設計頁面時會使用的元件，也可以說頁面就是由這些元件所構成的。
目前，Elementor 設定區的免費版小工具共有 32 種。分為以下 4 類：
一、版面配置 (最重要的項目)
| 名稱 | 用途 |
|---|---|
| Container (容器) | 頁面設計的核心區塊，可放入 Grid 或小工具，也能再加入其他 Container，用來控制整體版面。 |
| Grid (網格) | 類似表格的結構，通常放在 Container 內，幫助排列小工具，讓內容更整齊對齊。 |
二、基本
| 名稱 | 用途 |
|---|---|
| 標題 | 在頁面上放入標題 H1~H6 |
| 圖片 | 可從 WP 媒體庫上傳圖片，或編輯圖片顯示效果 (Pro 有動態圖片標籤) |
| 內容編輯器 | 在頁面加入段落文字，有簡單的文字編輯器，如加粗、斜體、加入連結等 |
| 視訊 | 嵌入 YouTube、Vimeo 等平台的影片或字型上傳，可設定播放外觀 |
| 按鈕 | 設定按鈕外觀，加入內外部連結或頁面錨點 |
| 分隔線 | 可設定外觀、icon 或文字 |
| 空白間隔 | 在頁面的元件之間增加空格，控制間距 |
| Google 地圖 | 嵌入 Google 地圖，顯示特定位置 |
| 圖示 | 加入圖示 ( Font awesome) |
三、一般
| 名稱 | 用途 |
|---|---|
| 分頁 | 也稱頁籤，把內容分成一頁一頁，左上角有標籤可切換 |
| 收合容器 | 可展開 / 收合的內容區塊，通常用在 QA 或較長的補充內容 |
| 圖片方框 | 上面是圖片、下面是文字的圖文組合，可用於作品集、專案說明等加入縮圖的資訊 |
| 圖示方框 | 上面是 icon、下面是文字的方框，幫資訊增加視覺效果 |
| 圖片輪播 | 圖片幻燈片效果，可自動輪播圖片，適合用來展示作品、圖片和產品 |
| 基本圖庫 | 可在頁面上放多張圖片，控制欄位、間距等外觀，並可在點開的大圖上放文字說明 |
| 圖示列表 | 有圖示的文字清單 (Font awesome) |
| 計數器 | 用來顯示數據，例如經手過的專案、合作過的客戶、目前服務年資等 |
| 進度條 | 用進度或完成百分比顯示數據 |
| 見證 | 客戶評價或使用者心得等，以標題 + 文字的形式呈現 |
| 社交網路服務顯示 | 放上社群分享圖示，預設 4 種，或點開再選取其他 Font awesome 圖示。 |
| 警告 | 警告或提醒讀者要注意的內容，讀者可按 x 關閉。 |
| SoundCloud | 嵌入 SoundCloud 的播放器，可控制出現影片或音訊 |
| 短代碼 | 嵌入 WordPress 短代碼 |
| HTML | 嵌入 HTML 碼 |
| 選單錨點 | 添加錨點連結，可在頁面導航，通常用來做目錄或一頁式網站 |
| 資訊欄 | 加入側邊欄、頁首/頁尾小工具，或 WooCommerce 資訊欄 |
| 閱讀更多 | 「閱讀更多」按鈕，但只能用在佈景主題的文章彙整頁上 |
| 評分 | 放上星級評分，但使用 Pro 版才有動態功能 |
| Text Path | 可讓文字沿路徑排列，預設 6 種路徑或上傳自訂路徑圖片，適合用來設計行銷或廣告區塊，讓區塊更吸睛 |
四、Link In Bio
| 名稱 | 用途 |
|---|---|
| Minimalist | 微網誌，可顯示個人所有數位連結，包括社群、電子報訂閱等，是數位名片的概念 |
可能單看以上文字會不太好懂，建議就直接在編輯區把小工具拉出來玩看看，就大概知道了。
響應模式
除了「顯示/切換區」的裝置切換鈕，還可在小工具設定裡切換裝置，設定不同數值。
如下圖，桌面模式的圖片轉盤小工具設邊界 20 px，切成平板模式後設定為 0，所以在桌機模式上，圖片和粉框有一點距離，但平板模式上沒有。
頁面設定
當我們辛苦設計完頁面後，要記得到這邊設定：
- 點上方的設定圖示。
- 設定：
- 標題：一定要設定的是這個頁面的標題，如網站首頁要輸入網站名稱。
- 狀態：除了已發佈，還可選草稿、送審和私密。
- 精選圖片：要放上能吸引讀者點進來的封面圖。
- Order：是頁面的排序，數值越小越排前，如 0 就是置頂，在搜尋或彙整頁中會出現在最上面。
- 隱藏標題：是否隱藏頁面的原始標題，通常會選擇隱藏，避免干擾到整體頁面設計。
- 頁面佈局：可選排版，有 Elementor 全寬 (移除頁首/頁尾)、一般，或套用佈景主題設定。這就沒有固定，單看該頁面怎麼設計。
- 樣式：可設邊界、內邊距或背景。
- 設定完後，要在右上角按「發佈」才會儲存。
如何用 Elementor 設計一個頁面？
Elementor 是一套有點門檻，但懂概念後會覺得很好用的工具。
這篇 Elementor 教學是給新手看，以下我會用很簡單的方式，使用 Elementor 設計一個基本頁面。如果你想要設計出更進階、風格更獨特的頁面，也可以參考不同的網頁設計範例。
對了，以下畫面我是搭配 Astra 佈景主題設計出來的，這是我很喜歡的一款佈景，可以閱讀 Astra 介紹與設定教學。
step 1
拖曳需要的容器 (Container) 與網格 (Grid)，我們可以針對想要的排版來新增。
至於什麼時候要用容器？什麼時候要用網格？可以參考以下表格：
| 概念 | 適合用途 | 範例 | |
|---|---|---|---|
| 容器 Container | 一個用來包裝的區塊，內部可以放 Grid 或小工具 | 頁面框架、版面結構、組織內容 | Banner、主區塊、對齊按鈕 |
| 網格 Grid | 用來設計「網格佈局」，讓內容排列整齊 | 內容清單、文章網格、相簿等多行多列排列 | 文章列表、作品集、產品展示 |
簡單來說，如果你想要建立整體區塊或頁面框架，就選 Container；如果你要讓內容整齊排列成多列多行，就選 Grid。
step 2
在欄位內，拖曳需要的小工具，以下拖曳的工具有：標題、內容編輯器、圖片、圖示方框。
其實，這幾個也是設計上最常會用到的，可以多熟悉熟悉。
step 3
再來，我們先把幾個該放的圖放上去：
一、新增背景圖片：
- 點選「六個點」。
- 點選左邊「樣式」分頁。
- 選擇圖片，上傳一張適合首頁的圖片。
二、新增圖示
- 點選「圖示方框」。
- 點選左邊「內容」分頁
- 新增圖示
三、新增圖片
- 新增圖片。
- 點選「圖片」。
- 點選左邊「內容」分頁。
step 4
設定完圖片後，調整頁面的顏色：
一、調整文字顏色
- 點選「文字」。
- 點選左邊「樣式」分頁。
- 點選「文字色彩」，選擇需要的顏色。
二、調整圖示顏色
- 點選「圖示」。
- 點選左邊「樣式」分頁。
- 點選「主要顏色」，選擇需要的顏色。
三、調整背景顏色
- 點選「色彩」，選擇需要的顏色。
- 點選「六個點」。
- 點選左邊「樣式」分頁。
step 5
最後，你會發現物件跟物件間可能有點擠，這是因為每個小工具都有預設的最小高度，我們需要再把它們拉大，讓物件間有點空間。
- 點選「六個點」。
- 在最小高度，調整高度。
- 在 Justify Content 點選「上下置中」，讓物件可以在中間。
這樣，基本的頁面設計就完成啦，其實並不難。接下來只需要填入文案，跟微調行動版的樣式就行。
Elementor 模板有哪些？怎麼使用？
Elementor 的模板分為頁面和區塊 (Container)，官方有提供「完整網站套組」，可直接匯入編輯，或「自訂一個區塊範本」來重複使用，以下分別教學。
如何匯入 Elementor 官方模板？
Elementor 官方有提供一些完整網站的套組模板，可免費使用，這一部份介紹下載和使用的方法。
step 1
到 WordPress 後台：
- 在左側選單 Elementor 下點開「範本」。
- 選「Kit Library」。
step 2
等跳出視窗：
- 左下「KITS BY PLAN」下勾選「Free」。
- 在右邊點你喜歡的模板。
step 3
進入模板畫面後，先瀏覽一下頁面，看是否合適你使用，可以的話，再按右上角的「Apply Kit」。
step 4
等跳出視窗，按「Get Started」註冊一個帳戶。
step 5
註冊完後，就會問你要下載「全部設定 + 頁面」，還是只有「頁面」。我選「Customize」(只有頁面)。
step 6
- 只勾選「內容」，避免影響網站設定。
- 按「Import」匯入模板。
step 7
成功下載後，就會直接跳轉 Elementor 編輯器，接下來切換到想編輯的頁面，再開始編輯。
官方的免費模板不多，但可以參考本篇的「Elementor 擴充外掛推薦」段落，這些外掛會有較多可使用的免費模板。
如何自行建立模板並匯入使用？
在 Elementor 建立自己的模板，有 2 種方式：
- 在編輯器中另存範本。
- 到 WP 後台的範本庫中新建一個。
接下來示範的是較常用的做法：在編輯器中另存範本後，匯入另一個頁面使用。
step 1
首先，把要重複使用的區塊 (Container) 存成範本：
- 在編輯器的 Container 上點滑鼠右鍵。
- 選「另存為範本」。
step 2
會跳出一個視窗：
- 幫這個範本取名，方便自己管理。
- 按「儲存」。
step 3
接著，開啟要匯入範本的頁面，在顯示區上點「資料夾」圖示。
step 4
等跳出視窗：
- 上方切換「我的版型」。
- 下方選擇要匯入的版型，按「插入」。
- 會跳出一個確認視窗，選「套用」。
step 5
匯入後，點一下剛匯入的範本，可以修改顏色、文字等內容和樣式，修改成這個頁面需要的樣子。
區塊範本說明：除了區塊，頁面右上「發佈」鈕旁點開箭頭，也可將「整個頁面」存為範本，匯入其他頁面使用。
Elementor 與 Elementor Pro 比較
| 比較項目 | Elementor | Elementor Pro |
|---|---|---|
| 頁首/頁尾 | 無 | 自訂 (拖放編輯 / 條件顯示) |
| 模板 | 10+ 頁面模板、5 個完整網站套組 | 1,000+ 頁面模板、300+ 完整網站套組 |
| 小工具 | 30+ 小工具 | 90+ 小工具 (增加多種表單、動態列表、動態串接、自訂小工具等) |
| 文章功能 | 文章列表 | 自訂文章列表和單一文章列表 (版型、Meta 資訊、相關文章區塊) |
| 字體 | 內建 Google Fonts | 可上傳字體，並自動產生子集減少字體載入的檔案大小 |
| 彙整頁功能 | 須佈景主題支援 | 自訂分類頁、標籤頁、搜尋結果頁 |
| 動畫效果 | 基礎淡入/滑動 | 20+ 進階動畫 (滾動顯示 / 隱藏、自訂觸發點、固定效果) |
| 動態功能 | 無 | 可串接 ACF、Pods 等外掛，顯示動態資料 |
| 自訂 CSS/JS | 無 | 可使用自訂程式碼 + 即時預覽 |
| 全域功能 | 僅基本顏色/字型 | 動態控制，如切換配色、響應裝置段落間距切換、自訂商品資訊顯示條件等 |
| 會員專區/登入 | 基礎表單 | 會員專區模板 + 登入/註冊門戶 + 顯示指定內容 |
| WooCommerce 整合 | 僅商品列表 | 商品 / 評價輪播、快速結帳、購物車側欄、願望清單、進階商品篩選、星級評分等 |
| 行銷工具 | 基礎按鈕 | 表單、彈出視窗、A / B測試、倒數計時、Mailchimp 等第三方整合 |
| SEO 工具 | 依賴 SEO 外掛 | 內建 Meta 編輯器 + Schema 標記生成 + 社交媒體預覽 |
| 角色管理器 | 無權限控制 | 分配使用者權限，如編輯、設計等 |
| 多語言支援 | 需第三方外掛 | 整合 WPML、Polylang 等外掛 (動態內容可自動翻譯) |
| 第三方整合 | 社群按鈕 | Shopify、Salesforce、HubSpot、Slack 等 50+ 服務 |
| 效能優化 | 基本設定 | 壓縮 CSS、減少網頁大小、可資源按需加載等 |
| 歷史版本 | 有限 | 詳細版本控制，可回溯至任何步驟或時間點 |
| 價格 | 免費 | 一年約 59 美元 (僅一個網站) |
Elementor 免費版較適合用來建立形象官網、部落格、行銷頁面、活動頁面等。網站若想搭配電商、會員、課程等系統，建議使用 Pro，除了更多精細設定外，也有更多第三方整合、動態內容設定與效能的優化。
14 種 Elementor 擴充外掛介紹
功能擴充 (小工具)
- Elementor Pro：Elementor 付費版，以外掛形式擴充，功能參照上一部分的比較表格。
- Essential Addons for Elementor：免費提供 80+ 小工具，如進度條、資訊圖表、內嵌 FB 評論等。
- Ultimate Addons for Elementor：Astra 佈景主題團隊開發，主打「智慧區塊」，如預測性搜尋欄、AJAX 分頁、條件邏輯表單等。
- Happy Addons for Elementor：提供互動性和視覺效果的小工具，例如：無限滾動、圖片比較、進階輪播、網格布局、分支選單等等。
- The Plus Addons for Elementor：提供大量小工具和區塊範本，涵蓋各種網站元素，例如：進階選單、價格表單、分類、商品格狀版面、社群動態等等。
- PowerPack for Elementor：提供許多實用的功能增強，例如：白標功能、動態內容支援、進階輪播、麵包屑導航、Cookie 同意區塊等等，提升網站的功能性和專業度。
- Unlimited Elements for Elementor：可讓使用者自行建立 Elementor 小工具，擴充性極高。
- Stratum：專為 Elementor 設計，提供超過 20 種免費小工具，可整合 Elementor 模板庫，自動搭配佈景主題的文字/顏色。
設計樣式擴充
- Style Kits for Elementor：提供預設的樣式套件，快速改變網站的整體風格，適合需要管理多個網站設計的情況。
- AnyWhere Elementor Pro：可將 Elementor 範本插入到網站的任何位置，包括佈景主題的頁首、頁尾、側邊欄等區域，提供更彈性的版面配置和設計自由度。
- Dynamic Visibility for Elementor：根據使用者的角色、設備類型等條件控制顯示的頁面元件。
- Templately：專為 Elementor 設計，提供雲端模板庫，可儲存、管理和共享自己的 Elementor 模板，也提供大量的預製模板，方便協作和跨網站重複使用。
電商擴充
- WooCommerce Builder for Elementor：通常包含在綜合型擴充外掛中，如 Essential Addons Pro、Elementor Pro 等，提供 WooCommerce 產品列表、產品單頁、購物車、結帳頁面等電商相關的小工具，方便用 Elementor 自訂電商網站。
- ShopEngine：專門為 WooCommerce 設計的 Elementor 擴充外掛，提供豐富的電商小工具和功能，例如：產品篩選、願望清單、快速查看、產品變體選擇器等等。
使用 Elementor 的常見問題
Elementor 適合用來寫文章嗎？
通常會用 Elementor 來設計「頁面」，像是文章列表、文章單一頁面、文章搜索結果頁、文章分類頁等。
寫文章的話，建議使用 WordPress 區塊編輯器會比較好，更深入的分析與使用教學，歡迎閱讀區塊編輯器教學。
無法載入 Elementor 編輯畫面怎麼辦？
先試試下列幾種方法：
1. 在「Elementor > 設定 > 進階」啟用「切換編輯器裝載方法」，同時到「Features」，把 Element Caching 改成 Inactive，儲存變更的設定後，再重新載一次。
2. 檢查 Elementor 版本，有時候是版本沒更新的問題；但有時候也可能是更新後，官方版本出問題 (可以多留意相關社群，有災情都會有人分享)。
3. 移除 Elementor，再重新安裝一次。
4. 先停用其他外掛，再重新載入一次 Elementor 編輯器，若順利載入，再一個個重新啟動看看，看開啟哪個的時候無法載入，代表那個外掛起衝突。
5. 檢查主機，有時候是 PHP 記憶體不足 (建議要調整到至少 512M)，或是 PHP 版本過舊，至少要 7.0 以上。如果不知道怎麼設定，請直接找主機商。
能與 Elementor 相容的佈景主題有哪些？
目前與 Elementor 相容的佈景主題有：Astra、Blocksy、OceanWP、GeneratePress、Kadence WP、Hello Elementor、Porto、Phlox、Sydney、Alpus、UDesign、Neve、Hestia、Customify 等。
無論你是什麼網站，我個人會推這三款：Astra、Blocksy、OceanWP，以下有詳細的教學文：
1. Astra 完整教學
2. Blocsky 完整教學
3. OceanWP 完整教學
會與 Elementor 衝突的佈景主題有哪些？
目前官方提醒會有衝突的佈景主題：Archeo、Grigora Blocks、Hello Gutenify、Ona Creative、Oscura、Avant Garde、Skatepark、Wabi、Allele、X-T9、X3PO-Reflections、Richmond、Ballyhoo Blocks、Twenty Twenty-Two、Framboise、Gutena、Stewart、Miniblock-OOAK、Elyn、Tendo、Jace、Livro、Ona Minimal、Kubrick。
在挑選與 Elementor 搭配的佈景主題時，要注意：
．是否和 Elementor 小工具有過多的重覆？
．是否只限於作品集、一頁式網站等特定功能的佈景主題，無法發揮 Elementor 的功能？
．是否很少更新？
有其他推薦的頁面編輯器嗎？
．Divi Builder：功能強大，設計選項豐富，有終身方案，但學習曲線稍陡。
．Brizy：介面現代化，操作直觀，但社群資源相對較少。
．Beaver Builder：以穩定性和對開發者友善著稱，程式碼乾淨，但年費稍貴。
．Oxygen Builder：高度客製化，效能優異，有終身方案，但較適合網站開發者。
．Thrive Architect：專注於行銷和轉換率優化，內建許多行銷工具。
其他好用的 WordPress 頁面編輯器
| 
| 
| 
| |
免費版 | 有 | 有 | 無 (可試用 30 天) | 無 (可試用 14 天) |
特色與功能 |
|
|
|
|
繁中介面 | 有 (但一小部分仍未翻譯) | 無 | 無 | 無 |
團隊協作 | 有 (Pro 版) | 有 (免費版可) | 有 | 無 |
擴充性 | 高 外掛與整合非常豐富 | 中低 僅串接第三方服務，無擴充外掛 | 中高 但偏向官方自行開發的生態系 | 中等 可與多種頁面編輯器搭配使用，但本身無外掛擴充架構 |
模板數量 |
|
| 付費版 200 + | 200+ 付費動畫模板 |
效能輕量性 | 中偏重 需注意最佳化處理 | 中等 功能與設計兼具 | 偏重 需搭配快取與壓縮設定 | 偏重 需搭配快取與載入延遲設定 |
相容性 | 高 (與多數佈景主題相容) | 高 (與多數佈景主題相容) | 需搭配 Divi 主題使用較穩定 | 高 (可嵌入於多數頁面編輯器中) |
年訂閱價格 (USD) | 60 元 (1 個網站) | 59 元 (1 個網站) | 89 元 (不限網站數) | 約 35 元 (1 個網站) |
詳細介紹 |
