驅動數位行銷

協助中小企業提升網站在搜尋結果頁上的能見度,以便獲取更多流量進而增加成交機率。


PRO 達人網
Shopping Cart

購物車內沒有任何商品。

加入 WordPress 學習交流社團

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

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

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

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

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

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

什麼是 Elementor?

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

Elementor 里程碑

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

因此,選擇從 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?

在安裝 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

善用 Element Manager

Element Manager

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

設計你的第一個頁面

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

步驟
新增頁面

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

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

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

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

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

使用 Elementor 設計頁面 (三)
Elementor Flexbox Containers

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

練習

試著使用 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 圖片壓縮服務

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)。

Image Optimizer By Elementor 建議設定
步驟
壓縮圖片

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

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

我個人推薦的圖片壓縮服務是 ShortPixel

Elementor 常見問題

Elementor 是免費的嗎?

是的,不過也有提供付費版。

Elementor Pro 如果沒有續約,就沒有辦法使用 Pro 元素嗎?

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

Elementor 只能編輯頁面嗎?

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

什麼是全域小工具?

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

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

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

結論

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

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

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