歡迎參考我們的 WordPress 網站代管服務,快速與穩定的環境 = 更多潛在的獲利

什麼是 Elementor?如何設計網頁?

Elementor 教學,從介紹、購買到設定 (基礎篇)

/ 閱讀時間 16 分鐘 

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

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

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

什麼是 Elementor?

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

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

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

為什麼選擇 Elementor?

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

使用者介面直覺

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

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

預先設計好的範本

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

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

Elementor 範本

支援回應式設計

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

Elementor 支援回應式設計
▲ Elementor 回應式設計功能

可以從免費版開始使用

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

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

全站編輯

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

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

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

Elementor 主題編輯器
▲ Elementor 全站編輯

生態圈完整

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

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

可以少裝一些外掛

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

Elementor (包含 Elementor Pro) 內建功能可能可以取代的外掛
表單 Fluent Forms
彈窗Popup Maker
社群分享Novashare
作品展示WP Portfolio

Elementor 方案與價格

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

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

▲ Elementor 方案與價格

在價格方面,付費版提供四種方案,分別是基本、專家、工作室與機構。你可以先從最低的方案入手,費用是每年 49 USD (不到新台幣1,400元)。如果使用之後覺得不滿意,官方有提供 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 之後,我會先進行初始的設定,純粹是基於個人喜好,你可以參考但不一定要完全一樣。

停用 Elementor 預設的顏色與字型

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

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

選擇可以編輯的內容類型

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

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

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

允許上傳 svg 檔案

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

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

調整內容寬度

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

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

啟用深色模式

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

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

設計你的第一個頁面

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

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

▲ 使用 Elementor 設計頁面(一)

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

▲ 使用 Elementor 設計頁面(二)

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

Elementor 排版方式
▲ 使用 Elementor 設計頁面(三)

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

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

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

如果你不想要從零開始設計網頁,那麼可以考慮匯入預先設計好的範本或區塊,加速網頁製作的時間。作法如下:

  • 前往 Elementor 編輯介面然後點選新增範本圖示
  • 選擇匯入區塊或者是頁面
▲ Elementor 範本

只要沒有出現PRO標籤,都可以免費使用。如果你覺得範本數量太少,可以考慮升級成 Elementor Pro

當然,你也可以自行設計頁面或區塊並將其儲存為範本,以便未來有需要時可以立即套用。

※強烈建議匯入範本之前先進行備份,以免發生錯誤無法還原。

最適合 Elementor 的佈景主題

▲ Hello Elementor

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

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

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

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

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

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

結論

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

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

這篇文章對您是否有幫助?

0 / 5

Your page rank:

想要學習如何開始部落格嗎?

如果你想要開始建立部落格並學習如何經營與瞭解獲利模式,可以參考:如何開始部落格?從架設、經營到獲利一次搞定(2022最新)

加入「全方位學 WordPress - 從架站到整合行銷」2.0 課程等候名單

我正在改版「全方位學 WordPress - 從架站到整合行銷 2.0」這門課程,適合那些想學習更進階的 WordPress 技術與 SEO 文案寫作技巧的人。歡迎加入課程等候名單,等改版完成後會發送通知。

留言

發佈留言必須填寫的電子郵件地址不會公開。

驅動

關於我們

驅動數位行銷提供個人或企業在網路上的各種行銷解決方案,主要服務項目包含網頁設計、網站代管以及搜尋引擎最佳化。與其他網頁設計公司不同之處在於,我們是以獲得更多流量、名單、營業額與轉介紹為導向。

PRO 360 專家檔案