給新手看的Elementor教學手冊
Wordpress 網站架設

給新手看的 Elementor 教學手冊: 手把手教你WordPress超人氣頁面編輯器

分享到社群

Last Updated on 2021 年 9 月 17 日

Elementor 是一款區塊拖曳式WordPress響應式頁面編輯器外掛,直覺式的拖拉(Drag and Drop),便可設計出漂亮又專業的網站頁面,沒有程式語言基礎的新手也能快速學會。

目前,Elementor 在WordPress頁面編輯外掛類中,啟用安裝數高達5百萬以上,同時在超過 4,900 條評論(滿分 5 星)中,保持 4.9 星的評價。

我覺得很棒的特色之一,就是Elementor裡有提供Template(模板),假如我沒有任何設計頁面靈感的話,我也能一鍵套用模板,超級方便。

Elementor 特色

  • 直覺式區塊拖拉
  • 清晰友善的操作介面
  • 外掛定期更新
  • 和大多數的主題相容
  • 提供即時預覽(電腦、平板、手機)
  • 有免費版
  • 支援第三方應用程式
  • 提供超過300種模板
  • 超多元素、小工具(Widgets)可做套用
  • 提供多種編輯器,像是主題編輯器、表單編輯器、彈出式廣告編輯器、購物網站編輯器(WooCommerce Builder)等。

Elementor 方案比較

Elementor 提供免費版和付費進階版 Elementor Pro,新手站長們可以依個人對網站頁面設計需求選擇方案。

Elementor Pro進階版又依使用的網站數量分為五種付費方案。

Elementor
方案比較
ESSENTIALADVANCEDEXPERTSTUDIOAGENCY
價格 (美金/年費)$49 美金/年$89 美金/年$199 美金/年$499 美金/年$999 美金/年
可用網站數13251001000
功能拖放式即時編輯
響應式設計
90種以上小工具
300種以上模板
主題編輯器
客服支援
拖放式即時編輯
響應式設計
90種以上小工具
300種以上模板
主題編輯器
客服支援
托放式即時編輯
響應式設計
90種以上小工具
300種以上模板
主題編輯器
客服支援
Elementor專業簡介
托放式即時編輯
響應式設計
90種以上小工具
300種以上模板
主題編輯器
VIP客服支援
Elementor專業簡介
托放式即時編輯
響應式設計
90種以上小工具
300種以上模板
主題編輯器
VIP客服支援
Elementor專業簡介

由上表可知,Elementor Pro付費進階版,其實功能大同小異,假如你有在接網站設計案子的話,推薦AGENCY方案,年費999美金包含了全部的功能,可用在1000個網站上。


Elementor 如何安裝啟用?

到WordPress後台 > 外掛 > 安裝外掛 > 搜尋Elementor > 安裝+啟用

Elementor 外掛免費

完成之後,會看到Elementor的外掛出現在左邊側欄,點進[ 設定 ] 成如下圖。

Elementor WordPress外掛下載設定

假如有多位網站管理員的話,可以在 [ 角色管理員 ]裡設定權限。

Elementor 頁面編輯器介面操作

前往[頁面] > 新增頁面 > 點選上方 [ 使用Elementor編輯 ]按鈕。

進入到Elementor主要編輯操控介面,左邊為元素和功能區塊,右邊為編輯區,可以直接把想使用的元素功能拖拉到編輯區。

點左上角的三條線icon可以進入[Site Settings],會應用在所有使用Elementor編輯的頁面,例如字型、顏色、排版等。

[User Preferences] 設定在 Elementor 編輯器外掛的使用者偏好,例如操作面板顏色,可把原本的白色換成黑色,也可調整面板寬度。

想退回WordPress編輯器很簡單,只要按下[退出回到儀表板]即可。

Elementor Pro進階版

點擊 ” + ” 即可新增區塊,選擇版面架構。

Elementor 頁面架構

Elementor 區塊組成概念

Elementor 主要為三大元素組成,分別為Section區塊、Column欄、Widget元素。

一個頁面由多個Section區塊組成,而Section區塊裡包含多個Column欄,每欄Column中又能應用多種Widget元素。

Elementor 頁面編輯器教學

元素和功能區塊

[ 元素 ] 區塊中有許多的功能可以直接套用在頁面,也是Elementor編輯器的精華所在,如需解鎖更多功能就要購買進階版Elementor Pro才能使用。

Elementor元素區塊教學

Elementor全域功能

假如你已有設計好的區塊,想重複使用不想再重新編輯的話,可儲存為[ 全域 ]變成可重複使用的區塊。

Elementor 拖拉編輯器說明

新增區塊之後,只要將滑鼠移到區塊上,就會看到下圖的[編輯欄]、[新增區塊]、[編輯區塊]、[編輯圖片]、[刪除區塊]功能圖示。

只要在右邊選擇想更改的區塊,左邊就會出現相對應的編輯功能,可以依需求做細微調整。

像下圖點選的是 [編輯圖片],因此左邊欄出現了內容編輯的功能,可以讓我調整想呈現的圖片樣式、設定圖片連結、圖片尺寸和對齊方式等等。

Elementor 外掛設定

在 Elementor 編輯器最下方,你可以看到五個icons和[發佈]按鈕。

由左至右分別是[設定]、[Navigator]、[修訂紀錄]、[響應模式]、[預覽變更]。

[設定] 可以編輯頁面標題、決定頁面狀態、和設定精選圖片、SEO等。

Elementor 使用教學

[Navigator] 可以看到頁面的分層結構,只要點擊就能前往指定區塊。

Elementor 使用教學

[修訂紀錄] 能看到所有的編輯動作歷史紀錄。

[響應模式] 立即響應設計好的頁面在手機、平板或電腦上的效果,也可以設定畫面長寬。假如排版不良,也可以立刻做修正,使用者體驗不好的話也會影響到網站SEO。

Elementor也開放[右鍵],可以進行複製、貼上、刪除、編輯圖片和開啟Navigator的功能。

Elementor新手教學

[預覽變更] 在還沒發佈的狀態下,先預覽是否一切正常。

Elementor 發佈按鈕

確定一切就緒之後,就可以按下[發佈]

假如想儲存成草稿或版型的話,可以按發佈右邊的箭頭。

Elementor使用教學

使用Elementor設計頁面

Elementor 使用教學 的圖示例子中,按下’+’ 的圖示之後,選擇兩欄(Column)式的版面架構。

把[圖片]和[文本編輯器]的元素拉到右邊相對應的欄位中,登愣! 完成一個區塊。

圖中藍色框框部分,我拉進了[打星評分]的元素。

是不是超級簡單,視覺式拖曳區塊編輯器的好處就在這裡,可以立刻看到編輯的內容和呈現效果。

Elementor 使用教學

結語

我喜歡使用 Elementor 編輯出好看又專業的頁面,像是本站旅遊資源頁面就是使用Elementor頁面編輯器做出來的。

現在Elementor 更推出Kit Library,讓各位新手站長們可以從中獲得架站靈感、學習使用Elementor從無到有建立網站,以及大量的美麗模板。

你可能也會想看…

訂閱WordPress

優惠即時報!

不再錯過WordPress主機、外掛、主題各種優惠!


分享到社群

Leave a Reply

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *