
給新手看的 Elementor 教學手冊: 手把手教你WordPress超人氣頁面編輯器
Last Updated on 2022 年 11 月 16 日
Elementor 是一款區塊拖曳式WordPress響應式頁面編輯器外掛,直覺式的拖拉(Drag and Drop),便可設計出漂亮又專業的網站頁面,沒有程式語言基礎的新手也能快速學會。
目前,Elementor 在WordPress頁面編輯外掛類中,啟用安裝數高達5百萬以上,同時在超過 4,900 條評論(滿分 5 星)中,保持 4.9 星的評價。
我覺得很棒的特色之一,就是Elementor裡有提供Template(模板),假如我沒有任何設計頁面靈感的話,我也能一鍵套用模板,超級方便。
一年一度的WordPress黑色星期五大特價,千萬不要錯過,平常買不下手的外掛、主機和主題,價格通常直接下殺到半價,要好好把握!!
內容目錄
Elementor 特色
- 直覺式區塊拖拉
- 清晰友善的操作介面
- 外掛定期更新
- 和大多數的主題相容
- 提供即時預覽(電腦、平板、手機)
- 有免費版
- 支援第三方應用程式
- 提供超過300種模板
- 超多元素、小工具(Widgets)可做套用
- 提供多種編輯器,像是主題編輯器、表單編輯器、彈出式廣告編輯器、購物網站編輯器(WooCommerce Builder)等。
Elementor 方案比較
Elementor 提供免費版和付費進階版 Elementor Pro,新手站長們可以依個人對網站頁面設計需求選擇方案。
Elementor Pro進階版又依使用的網站數量分為五種付費方案。
延伸閱讀: [搶便宜] 2022黑色星期五 & 網路星期一WORDPRESS優惠整理
Elementor 方案比較 | ESSENTIAL | ADVANCED | EXPERT | STUDIO | AGENCY |
---|---|---|---|---|---|
價格 (美金/年費) | $49 美金/年 | $89 美金/年 | $199 美金/年 | $499 美金/年 | $999 美金/年 |
可用網站數 | 1 | 3 | 25 | 100 | 1000 |
功能 | 拖放式即時編輯 響應式設計 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編輯 ]按鈕。
進入到Elementor主要編輯操控介面,左邊為元素和功能區塊,右邊為編輯區,可以直接把想使用的元素功能拖拉到編輯區。
點左上角的三條線icon可以進入[Site Settings],會應用在所有使用Elementor編輯的頁面,例如字型、顏色、排版等。
[User Preferences] 設定在 Elementor 編輯器外掛的使用者偏好,例如操作面板顏色,可把原本的白色換成黑色,也可調整面板寬度。
想退回WordPress編輯器很簡單,只要按下[退出回到儀表板]即可。



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



Elementor 區塊組成概念
Elementor 主要為三大元素組成,分別為Section區塊、Column欄、Widget元素。
一個頁面由多個Section區塊組成,而Section區塊裡包含多個Column欄,每欄Column中又能應用多種Widget元素。



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



Elementor全域功能
假如你已有設計好的區塊,想重複使用不想再重新編輯的話,可儲存為[ 全域 ]變成可重複使用的區塊。
Elementor 拖拉編輯器說明
新增區塊之後,只要將滑鼠移到區塊上,就會看到下圖的[編輯欄]、[新增區塊]、[編輯區塊]、[編輯圖片]、[刪除區塊]功能圖示。
只要在右邊選擇想更改的區塊,左邊就會出現相對應的編輯功能,可以依需求做細微調整。
像下圖點選的是 [編輯圖片],因此左邊欄出現了內容編輯的功能,可以讓我調整想呈現的圖片樣式、設定圖片連結、圖片尺寸和對齊方式等等。



在 Elementor 編輯器最下方,你可以看到五個icons和[發佈]按鈕。
由左至右分別是[設定]、[Navigator]、[修訂紀錄]、[響應模式]、[預覽變更]。
[設定] 可以編輯頁面標題、決定頁面狀態、和設定精選圖片、SEO等。



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



[修訂紀錄] 能看到所有的編輯動作歷史紀錄。
[響應模式] 立即響應設計好的頁面在手機、平板或電腦上的效果,也可以設定畫面長寬。假如排版不良,也可以立刻做修正,使用者體驗不好的話也會影響到網站SEO。
Elementor也開放[右鍵],可以進行複製、貼上、刪除、編輯圖片和開啟Navigator的功能。



[預覽變更] 在還沒發佈的狀態下,先預覽是否一切正常。
Elementor 發佈按鈕
確定一切就緒之後,就可以按下[發佈]。
假如想儲存成草稿或版型的話,可以按發佈右邊的箭頭。



使用Elementor設計頁面
Elementor 使用教學 的圖示例子中,按下’+’ 的圖示之後,選擇兩欄(Column)式的版面架構。
把[圖片]和[文本編輯器]的元素拉到右邊相對應的欄位中,登愣! 完成一個區塊。
圖中藍色框框部分,我拉進了[打星評分]的元素。
是不是超級簡單,視覺式拖曳區塊編輯器的好處就在這裡,可以立刻看到編輯的內容和呈現效果。



結語
我喜歡使用 Elementor 編輯出好看又專業的頁面,像是本站旅遊資源頁面就是使用Elementor頁面編輯器做出來的。
現在Elementor 更推出Kit Library,讓各位新手站長們可以從中獲得架站靈感、學習使用Elementor從無到有建立網站,以及大量的美麗模板。
你可能也會想看…



訂閱WordPress
優惠即時報!
不再錯過WordPress主機、外掛、主題各種優惠!


給新手看的Cloudways+Wordpress教學手冊
You May Also Like


給新手看的 Ninja Tables Pro 教學: 地表最強整合資料表格WordPress外掛
2021 年 8 月 3 日

給新手看的 Beaver Builder 內容編輯器教學
2021 年 8 月 11 日
