Shopping Cart

購物車內沒有任何商品。

加入 WordPress 學習交流社團

為什麼要加入本社團?好處如下:

  1. 問題解答
  2. 免費教學
  3. 好用工具推薦
  4. 最新資訊
  5. 秘訣分享
立即加入
快速、安全及穩定的主機空間能提升網站 SEO 排名與使用者體驗

Elementor 介紹,超過 1,500 萬個網站使用的 WordPress 編輯器!(完整教學)

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

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

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

什麼是 Elementor?

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

自從 2016 年推出以來,Elementor 達成了許多里程碑,像是超過 1,500 萬個網站由其所建置、收到 6.5K 以上的五星評價、來自全球 14 多萬個社群成員等等,由此可知深受使用者所喜愛。

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

常見連結:官方文件 | 方案與價格 | 變更紀錄 | YouTube 頻道 | Facebook 社團

為什麼選擇 Elementor?

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

使用者介面直覺

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

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

預先設計好的範本

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

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

Elementor 範本

支援回應式設計

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

Elementor 支援回應式設計

可以從免費版開始使用

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

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

全站編輯

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

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

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

Elementor 主題編輯器

生態圈完整

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

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

可以少裝一些外掛

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

Elementor 方案與價格

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

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

Elementor 方案與價格
▲ Elementor 方案與價格

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

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

如何安裝 Elementor?

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

系統需求
  1. WordPress 5.2 或更高版本
  2. PHP 7.0 或更高版本
  3. MySQL 5.6 或更高版本 / MariaDB 10.0 或更高版本
  4. WP Memory limit 128 MB 或更高 (256 MB 以上是裡想)
  5. 最新版本的瀏覽器 (Chrome, Firefox, Safari)

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

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

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

如何使用 Elementor?

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

停用 Elementor 預設的色彩與字型

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

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

選擇可以編輯的內容類型

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

  1. 前往 [Elementor]→[設定]→[一般]
  2. 勾選「頁面」
選擇要套用的內容類型
▲ 選擇要套用的內容類型

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

允許上傳 svg 檔案

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

  1. 前往 [Elementor]→[設定]→[進階]
  2. 在 Enable Unfiltered File Uploads 勾選「啟用」
允許 Elementor 上傳 svg 檔案
▲ 允許 Elementor 上傳 svg 檔案

調整內容寬度

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

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

啟用深色模式

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

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

設計你的第一個頁面

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

步驟
新增頁面

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

使用 Elementor 設計頁面 (一)
步驟
認識編輯介面

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

使用 Elementor 設計頁面 (二)
步驟
決定版面配置

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

使用 Elementor 設計頁面 (三)

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

練習

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

簡單網站排版

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

最適合 Elementor 的佈景主題

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

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

推薦幾個 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 Pro 如果沒有續約,就沒有辦法使用 Pro 元素嗎?

先前利用 Pro 元素所製作的成品不會消失且都還能繼續編輯,只是無法新增 Pro 元素而已。

Elementor 只能編輯頁面嗎?

沒有,任何在網站上的區域都能透過 Elementor Pro 的主題編輯器編輯。

什麼是全域小工具?

全域小工具能讓你掌控分佈在網站內的小工具設定,更動一個全域小工具的設定後,也會同時套用在其他全域小工具上,不需要逐一調整,非常省時。

最適合 Elementor 的佈景主題是哪一個?

毫無疑問是官方開發的 Hello Elementor 佈景主題。

結論

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

透過這篇文章的教學,你應該對於 Elementor 有一定程度的了解。如果你想要學習更進階的技巧,可以加入全方位學 WordPress – 從架站到整合行銷課程一起專研。

瀏覽次數: 211
全方位學 Wordpress – 從架站到整合行銷 2.0
  • 講師 24 小時內親自回覆問題,安心有保障
  • 優先推薦免費工具,幫你省荷包
  • 只推自己正在用的付費工具,不會為了傭金讓你繞遠路,真實誠懇
  • 注重效能,畢竟這會影響使用者體驗與 SEO 排名
  • 數 10 種學習資料,非常豐富
  • N 個獨家資源
  • 定期分享最新資訊
  • 300+參考指引
  • 內容 & 範本資料庫 (獨創)
開啟目錄