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

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

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

生態圈完整

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

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

可以少裝一些外掛

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

Elementor 方案與價格

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

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

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

值得一提的是，如果你還沒有租用主機或者想要更換廠商，或許可以考慮 Elementor Hosting。除了享有 Elementor 更進階的功能以外，還包含 GCP 主機、免費 SSL 憑證、代為安裝 WordPress 等服務，每年的價格只需不到新台幣 4,000 元，非常划算！

如何安裝 Elementor？

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

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

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

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

如何使用 Elementor？

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

停用 Elementor 預設的色彩與字型

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

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

選擇可以編輯的內容類型

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

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

至於能不能使用 Elementor 編輯文章，可以參考我之前針對這個個案所進行的分析。

允許上傳 svg 檔案

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

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

設計你的第一個頁面

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

※Elementor 是採用區塊堆疊的方式，由上至下依序新增內容。每一個區塊可以新增不同數量的欄位 (水平方向)，每一個欄位可以新增不同數量的元素 (垂直方向)。

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

最適合 Elementor 的佈景主題

Hello 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 份額度。

操作教學

Elementor 常見問題

結論

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

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