Elementor 教學，市占率最高的 WordPress 網站編輯器！(基礎篇)

花了很多時間挑選 WordPress 佈景主題，但卻找不到喜歡的版面配置嗎？想要調整網站的外觀，但卻因為不會程式語言而放棄嗎？

在現今這個時代，要自行設計網頁並不是什麼困難的事情，你可以透過「所見即所得」的頁面 (網站) 編輯器達成，所有你需要做的事情只有拖放小工具與幾個滑鼠的點擊。

透過這篇文章你會了解 Elementor 編輯器的架構與操作流程，讓你從零到一無痛上手，打造出屬於你自己風格的網站！

什麼是 Elementor？

Elementor 是一款視覺化的 WordPress 網站編輯器，使用者可以在完全不懂程式或語法的情況下，透過拖放 (Drag & Drop) 的方式快速設計網頁，不需要撰寫任何一行程式碼。

自從 2016 年推出以來，Elementor 達成了許多里程碑，像是超過 1,500 萬個網站由其所建置、舉辦 400 多場活動、來自全球 14 多萬個社群成員等等，由此可知 Elementor 深受使用者所喜愛。

因此，選擇從 Elementor 開始學習如何設計網頁是一個不錯的起點，不論你是開發者、設計師或者是行銷人員都非常適合。

常見連結：官方文件 | 方案與價格 | 變更紀錄 | 開發藍圖 | 學習資源 | YouTube 頻道 | Facebook 社團

為什麼選擇 Elementor？

在 WordPress 生態圈裡有許多編輯器可以使用，那麼為什麼要一定要選擇 Elementor？除了最多人使用之外，還有什麼特別的地方嗎？我整理了 7 點好處，如下：

使用者介面直覺

Elementor 是一款所見即所得的網站編輯器，換句話說，你可以馬上看到修改之後的結果，不需要點選預覽按鈕查看，非常方便。

除此之外，編輯介面也設計得非常直覺，即使沒有說明文件或教學影片的輔助，也能夠輕易地熟悉其操作方式。

預先設計好的範本

預先設計好的範本可以加速網頁製作的時間，你不需要從零開始，只需要更改範本的圖片、內容與排版即可快速地完成一個網頁的雛形，有效節省設計所需的時間。

Elementor 免費版提供 30+ 範本、150+ 區塊與 5 個網站套件，如果覺得數量太少，可以選擇購買 Elementor Pro 以取得更多可用的範本。

支援回應式設計

有沒有支援回應式設計的功能已經是必須而非選配，你可以透過 Elementor 調整網頁在電腦、平板與手機呈現的樣子，確保在不同的裝置上擁有良好的使用者體驗。

可以從免費版開始使用

Elementor 有提供免費的版本，對初學者來說無疑是一大福音。你可以先透過免費版熟悉編輯器的操作方式，之後如果需要更進階的功能，再購買付費版即可。

免費版提供 40 多個網頁設計的小工具，像是標題、圖片、按鈕等等，如果你的需求沒有很複雜，原則上都可以滿足。

Elementor Website Builder – More than Just a Page Builder

The Elementor Website Builder has it all: drag and drop page builder, pixel perfect design, mobile responsive editing, and more. Get started…

WordPress.org

全站編輯

Elementor 的名稱已經更改為「網站編輯器」而非「頁面編輯器」，如果你的印象還停留在頁面編輯器，請更新一下過時的資訊。

至於為什麼會更改名稱，主要的原因是，過去只能透過佈景主題設定的區域 (頁首與頁尾、404 錯誤頁面、搜尋結果頁面、彙整頁面與單篇內容) 現在都可以使用 Elementor 編輯。

換句話說，你能夠控制網站的每一個區域，再也不會受到佈景主題的限制。隨著 Elementor 不斷地發展，佈景主題的觀念逐漸式微，取而代之的是全站編輯 (Full Site Editing) 的概念。

生態圈完整

有沒有建立生態圈對於產品未來的發展至關重要，除了可以幫助品牌在推廣上更有效率外，使用者與開發者也能從中受益。對使用者來說，有更多的資源或工具可以使用；對開發者來說有更多機會可以找到潛在獲利的可能。

由於 Elementor 編輯器的使用人數眾多，所以開發者就比較有意願投入相關佈景主題與外掛的開發，藉此帶動整體生態圈的發展！

可以少裝一些外掛

使用 Elementor 可以少裝一些外掛，也比較不容易產生衝突。舉例來說，如果你想要新增社群分享的功能，Elementor 剛好可以達成你的需求，那麼就不需要安裝同樣功能的外掛。

Elementor 方案與價格

Elementor 有提供更進階的方案，如果免費版已經無法滿足你的需求，那麼這時候就可以考慮購買 Elementor Pro 以解鎖更多的功能！

與免費版相比，付費版提供更多實用的小工具與範本。除此之外，還包含一些進階的功能，像是主題編輯器、彈窗編輯器、表單編輯器等等。

在價格方面，付費版提供 4 種方案 (基本、進階、專家與機構)，你可以先從最低的方案入手，費用為每年 59 USD (新台幣 1,800 元左右)。如果使用之後覺得不滿意，官方有提供 30 天滿意保證，可以在期限之內申請退費，完全沒有風險。

如何安裝 Elementor？

在安裝 Elementor 之前，你需要先知道編輯器的環境需求，確保在使用的過程中更加順暢，如下：

※如果你不確定目前的環境是否符合以上條件，建議直接詢問主機商會比較清楚。

確認好環境可以滿足 Elementor 最低的需求之後，接下來就要來安裝此款外掛。安裝的方式有很多種，最簡單的作法如下：

1. 登入 WordPress 網站管理後台後，前往 [外掛]→[安裝外掛]
2. 搜尋「Elementor」外掛
3. 點選安裝並啟用

如何使用 Elementor？

當你安裝並啟用 Elementor 後，可以先進行初始的設定，這些設定純粹是基於個人喜好，你可以參考但不一定要與我相同。

停用 Elementor 預設的色彩與字型

我比較習慣透過佈景主題設定網站的顏色與字型，作法如下：

1. 前往 [Elementor]→[設定]→[一般]
2. 勾選停用預設色彩與停用預設字型

選擇可以編輯的內容類型

在一般的情況之下，只會使用 Elementor 編輯頁面。作法如下：

1. 前往 [Elementor]→[設定]→[一般]
2. 勾選「頁面」

至於能不能使用 Elementor 編輯文章，可以參考下方個案研究。

可以使用 Elementor 寫文章嗎？(個案研究) – 驅動數位行銷

不知道你是否有這樣的疑問：可以使用 Elementor 寫文章嗎？關於這個問題的答案眾說紛紜，有人支持也有人反對，那麼究竟能不能使用呢？因此，本篇文章…

驅動數位行銷

允許上傳 svg 檔案

圖示或向量插圖建議使用 svg 格式，因為檔案較小而且不會有解析度限制的問題。做法如下：

1. 前往 [Elementor]→[設定]→[進階]
2. 在 Enable Unfiltered File Uploads 勾選「啟用」

調整內容寬度

內容寬度我通常是設定成 1200px，如果之後想要針對個別頁面調整也完全沒有問題。作法如下：

1. 前往 Elementor 編輯介面然後點選左上方的漢堡選單圖示
2. 然後在 [網站設定]→[版面配置]→[內容寬度] 調整內容寬度

啟用深色模式

深色模式的編輯介面看起來比較舒適，特別是針對長期使用電腦接案的工作者。作法如下：

1. 前往 Elementor 編輯介面然後點選左上方的漢堡選單圖示
2. 然後在 [User Preferences]→[UI Theme] 切換成Dark

善用 Element Manager

Element Manager 是一項減少編輯器中可用元素的功能，能加快載入速度及避免混亂，進而提升工作效率。需要注意的是，停用已使用的元素可能會破壞你的網站。因此，請先確保你沒有使用該項元素再停用。

設計你的第一個頁面

接下來，就要進入本篇文章的重點，也就是如何使用 Elementor 設計你的第一個頁面，步驟如下：

步驟

新增頁面

前往 [頁面]→[新增頁面]，然後新增標題，接著點選「使用 Elementor 編輯」。

步驟

認識編輯介面

進入編輯介面之後，你可以在左側看到許多小工具，像是標題、圖片、影片等等。右側則是網頁編輯的區域。

步驟

決定版面配置

你可以先決定一個區塊底下要有幾個欄位以及每一個欄位的寬度為多少 (單位為百分比)，接著再將小工具拖曳至指定的欄位即可。

Elementor Flexbox Containers

Elementor 最新的排版方式採用 Flexbox Containers，能夠處理較為複雜的版面配置設計。

如何匯入預先設計好的範本與區塊？

如何匯入 Elementor 範本以加速網站製作的時間？ – 驅動數位行銷

當你開始設計網頁時，可以選擇以從無到有的方式進行，或者匯入預先設計好的範本，然後再更改內容、排版及順序。 兩種方法各有優缺點，如果你是初學者…

驅動數位行銷

最適合 Elementor 的佈景主題

沒有哪一個佈景主題會比 Elementor 官方所開發的 Hello Elementor 更適合！這款佈景主題不僅在效能方面有優異的表現，也完全符合 Elementor 的編輯流程。

如果你不喜歡 Hello Elementor，也有很多佈景主題能夠與其搭配，我個人覺得 Astra、Blocksy、Kadence 都是不錯的選擇。

推薦幾個 Elementor 附加元件 (add-ons)

如果 Elementor 無法滿足你的需求或者你想要使用更多的範本，那麼不妨從官方或第三方的附加元件尋找解決方案，也許會有意想不到的結果。

1. Elementor Pro (付費)
2. Ultimate Elementor (付費)
3. Crocoblock (付費)
4. The Plus Addons (有免費版)
5. Element Pack Lite (有免費版)
6. Themeforest Elementor (包含範本套件、佈景主題及外掛)
7. Elementor Blocks for Gutenberg (完全免費)

更多與 Elementor 相關的附加元件、外掛或工具可參考官方資源。

Elementor 圖片壓縮服務

Elementor 提供圖片壓縮服務，包含有損壓縮及無損壓縮，支援的檔案格式有 WebP、PNG、JPEG。除了壓縮圖片外，也能將檔案傳換成 WebP、清除 EXIF 中繼資料、調整圖片大小。

在費用方面，能從免費版開始使用，但額度只有 250 張圖片，可能需要升級為付費方案才比較夠用，因為每當你上傳一張圖片時，WordPress 預設會自動產生 5 張縮圖或更多。所以 1 張圖片至少占了 5 份額度。

操作教學

步驟

安裝 Image Optimizer by Elementor 外掛

前往 [外掛]→[安裝外掛] 並搜尋 Image Optimizer by Elementor，接著點選 [立即安裝]。安裝完成後，點選 [啟用]。

步驟

啟用授權

當你啟用後，設定會出現在 [媒體]→[Image Optimizer]。你需要點選 [Connect to start] 啟用授權才能進行後續的操作。

步驟

建議設定

原則上維持預設就可以了，比較重要的功能有 Optimize new uploads (自動最佳化新上傳的檔案)、Clear EXIF Metadata (清除 EXIF 中繼資料)、Backup original images (備份原始圖片)、Convert to WebP (轉換成 WebP)。

步驟

壓縮圖片

你可以針對單張圖片、全部圖片或批次選擇的部分圖片進行壓縮。當你壓縮完後，可以查看總共節省多少比例的空間、尚未處理的圖片數量。

如果你覺得圖片的品質有受到壓縮影響，可以點選 [Restore original] 復原成原始圖片。

Elementor 常見問題

列舉數個 Elementor 編輯器的常見問題，如下：

結論

Elementor 是一款非常熱門的 WordPress 網站編輯器，除了可以編輯一般的頁面，也能夠輕易地調整網站的任何區域，非常強大！

透過這篇文章的教學，你應該對於 Elementor 有一定程度的了解。如果你想要學習更進階的技巧，可以加入 Facebook 社團一起討論。