Elementor 教學，最受歡迎的網站編輯器 (基礎篇)

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

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

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

什麼是 Elementor？

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

自從 2016 年推出以來，Elementor 達成了許多里程碑，像是超過一千兩百萬個網站是由其所建置、6.5K+ 五星級評價及來自全球約 14 萬個社群成員…等等，由此可知深受使用者所喜愛。

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

為什麼選擇 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 以解鎖更多的功能！

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

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

不論你是選擇哪一種方案，都能擁有完整的功能。彼此之間的區別在於：範本數量的多寡、授權多少網站、客服回覆的速度以及擁有 Elementor 專家檔案的資格。

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

如何安裝 Elementor？

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

• WordPress 5.2 或更高版本
• PHP 7.0 或更高版本
• MySQL 5.6 或更高版本 / MariaDB 10.0 或更高版本
• WP Memory limit 128 MB 或更高 (256 MB 以上是裡想)
• 最新版本的瀏覽器 (Chrome, Firefox, Safari)

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

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

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

如何使用 Elementor？

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

停用 Elementor 翻譯

為了確保你所看到的畫面與我展示的一樣，請先將以下程式碼片段貼在子佈景主題的functions.php裡面。

//停用 Elementor 翻譯
function disable_elementor_translation () {
unload_textdomain ('elementor');
unload_textdomain ('elementor-pro');
}
add_action ('init', 'disable_elementor_translation', 100);

停用 Elementor 預設的色彩與字型

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

• 前往 [Elementor]→[Settings]→[General]
• 勾選 Disable Default Colors 與 Disable Default Fonts

選擇可以編輯的內容類型

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

• 前往 [Elementor]→[Settings]→[General]
• 勾選「頁面」

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

可以使用 Elementor 寫文章嗎？（個案研究）

允許上傳 svg 檔案

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

• 前往 [Elementor]→[Settings]→[Advanced]
• 在 Enable Unfiltered File Uploads 勾選「Enable」

設計你的第一個頁面

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

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

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

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

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

小練習：試著使用 Elementor 製作出以下兩欄式排版，左邊為圖片，右邊則是標題、內文與行動號召按鈕。

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

如何匯入 Elementor 範本以加速網站製作的時間？

最適合 Elementor 的佈景主題

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

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

目前本站是使用 Astra 這款佈景主題，因為我比較喜歡透過佈景主題設計頁首，不過 Hend 則偏好使用 Elementor 製作。

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

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

• Elementor Pro (付費)
• Ultimate Elementor (付費)
• Crocoblock (付費)
• The Plus Addons (有免費版)
• Element Pack Lite (有免費版)
• PowerPack (有免費版)
• QI Addons (有免費版)
• Themeforest Elementor (包含範本套件、佈景主題以及外掛)
• Elementor Blocks for Gutenberg (完全免費)

※建議選用一套 Elementor 附加元件即可，因為大部分的功能都很雷同而且安裝太多同性質的外掛可能會產生衝突與影響網站效能。

結論

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

透過這篇文章的教學，你應該對於 Elementor 有一定程度的了解。如果你想要學習更進階的技巧，可以加入我的付費課程專研或者請人一對一指導。