給新手看的 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 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主機、外掛、主題各種優惠!