最後更新時間： 2022 年 09 月 24 日
哈囉！我是Yuria～今天要帶你認識一個在 WordPress 所有編輯器當中，展露獨角的 Elementor 頁面編輯器。
如果你正在煩惱架站、設計網頁，想要做出一個擁有特色且與眾不同的部落格 / 電商賣場，那這一篇文章很適合你，我們廢話不多說，趕緊進入主題吧～
你可能有興趣…
「WordPress架站教學系列文章」
1. 【WordPress架站教學#1】透過Cloudways架設你的WordPress網站！每月12美元即可擁有極致效能！
2. 【WordPress架站教學#2】透過NameCheap購買網域！首次購買、續約都便宜！
3. 【WordPress架站教學#3】在Cloudways中設定WordPress網域、網站SSL憑證！讓你的網站更安全！
文章目錄
Elementor 是什麼？
Elementor 是目前 WordPress 最受歡迎的頁面編輯器，目前已擴展到 180 個國家，並且有超過 900 萬的安裝次數，簡單的拖曳編輯、多樣的小工具以及高度客製化等等，都是它吸引大家使用的原因！
Elementor 的目標是希望讓使用者能夠使用最全面且一體化的體驗設計去創建強大而美觀的網站。可以用最少的麻煩和最大的樂趣來設計建立專屬自己的網站～
（進入 Elementor 官網後記得先註冊帳號，就可以自由試用 Elementor 的免費版功能囉！）
Elementor 最大的特色
不需會任何程式基礎
常常提到網頁設計或是網站架設，大家都會聯想要工程師或是需要有程式相關背景的人才可以完成，但使用 Elementor 完全不需要任何程式背景就可以簡單架設出有模有樣的網站啦！
而我想這也是讓大家很喜愛使用 Elementor 的原因，因為任何人都可以依照自己的想法需求去做設計～終於不用再只能套用現成模板了！
拖曳即可編輯
在 Elementor 製作網頁不用會寫程式，你只要會用滑鼠拖曳就可以了（我相信大家都會吧）！將想要的元素小工具（後面會介紹）直接拖曳到網頁上，就可以進行編排、縮放或是變更顏色等等
就像是組積木一樣堆蓋念，藉由不斷的組裝修改，最後完成一個獨具個人特色的成品，完成後可是會非常有成就感呢（笑）。
多樣現成模板
雖然說 Elementor 可以完全自己編排設計，但有時候沒有想法或是想要借鑒他人作品時，Elementor 也有很多樣的現成模板提供給你使用！
將模板在套入進去之後，可以再針對你的需求作變更，像是色系、文字內容甚至是排版也可以直接拖曳調整～
多達100個元素小工具
Elementor 內建了很多的元素小工具提供給你使用～而這些小工具就像是不同形狀的積木，每個都有不同的功能，從基本的標題、圖片及按鈕等等，到社交網路服務圖示、進度條功能或是選單錨點等等
Elementor 涵蓋了真的很多不同的小工具，建議可以多多去探索～相信可以找到很多很酷很實用的小工具喔！
所見即所得
在製作網頁時，很多軟體是後端跟前端的呈現不一樣，這是什麼意思呢？就是當你在後端進行編輯排版的時候，前端所呈現出的排版跟後端不一樣（文字大小、間隔等等）。
這時候我們就會常常需要前後端一直切換，去確認最終呈現的版面。
但是！ Elementor 沒有這個問題（撒花）～當你在編輯器編輯時，就是會完全跟最終前端呈現的樣子一模一樣，也因此可以更直觀的去做設計調整。
可以建立良好的工作流程
使用 Elementor 時，可以建立很專業的工作流程，它除了可以自定義模板庫，也可以設定全域功能去建立網站常用色系、字體等等，不但可以快效率，也可以讓網頁設計的風格是一致的！
Elementor 有哪些方案
Elementor 的方案，大項目可以分為免費版本以及付費版本。這其中付費版本又會因為可以使用的網站數量而有不同的方案價格！
以下用表格比較免費版本以及付費版的差異
| 免費版 | 付費版 | |
| 拖曳編輯器 | ✔️ | ✔️ |
| 響應式編輯 | ✔️ | ✔️ |
| 100 多個小工具 | ✔️ | ✔️ |
| 額外 50 多的小工具 | ✔️ | |
| 全域編輯 | ✔️ | ✔️ |
| 內建模板 | ✔️ | ✔️ |
| 300+ 進階模板 | ✔️ | |
| 導覽器 | ✔️ | ✔️ |
| 小工具收藏夾 | ✔️ | ✔️ |
| 自定義HTML | ✔️ | |
| 自訂義屬性 | ✔️ | |
| 主題生成器 | ✔️ | |
| 自訂CSS | ✔️ | |
| 角色管理員 | ✔️ |
我個人是使用付費版本，因為有一些功能是我經過評估後，確定我會使用到的！例如額外的 50 多種小工具以及自定義HTML等等～更詳細的內容可以去官網查看喔！
接下來，來幫你比較付費版的各方案！
| 基本方案 | 進階方案 | 專業方案 | 工作室方案 | 代理商方案 | |
| 網站數量 | 1 個 | 3 個 | 25 個 | 100 個 | 1000 個 |
| 所有付費版功能 | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
| 售後服務 | ✔️ | ✔️ | ✔️ | VIP 服務 | VIP 服務 |
| 網站工具包 | ✔️ | ✔️ | 專家工具包 | 專家工具包 | 專家工具包 |
| Elementor 專家簡歷 | ✔️ | ✔️ | ✔️ | ||
| 價格（年） | US$ 49 | US$ 99 | US$ 199 | US$ 499 | US$ 999 |
我最推薦的方案
⭐️ 付費版-基本方案（1個網站）US$ 49/年
⭐️ 付費版-進階方案（3個網站）US$ 99/年
因為我個人目前只有經營一個網站，因此使用選擇使用基本方案就可以了！一年約台幣 1450 元，一個月只要 120 元就可以享有所有進階功能，我覺得很划算！
如果你擁有超過一個網站，或是未來有多開設網站需求，或是你有一群志同道合的朋友！都可以選擇進階方案，等於一個網站一年只要約台幣 966 元，又更加優惠划算了～
我推薦使用 Elementor 嗎？為什麼？
超級推薦！
當初在架設網站做事前功課時，參考了很多不同的網頁設計以及編排，認為很好看也很有特色！而也是在這時候發現 WordPress 內建的版面樣式做不到這些（哭）。
因此接觸到了 Elementor ！讓我可以真正的去按照我的意思打照我的夢想網站～雖然說一個網站，內容要大於美觀，但如果兩個都可以兼具不是更好嗎？
現在世代使用者體驗變的很重要，一個舒服美觀的頁面，絕對可以第一時間抓住讀者的眼睛，讓我們開始用 Elementor 無痛建立一個專屬且有特色的網站吧！
使用 Elementor ＆ WordPress 內建編輯器（古騰堡編輯器）的差異
在這一章節，也跟你講講 Elementor 以及 WordPress 內建編輯器（古騰堡編輯器）的差異！
【先講結論】
WordPress 內建編輯器（古騰堡編輯器）：適合編輯、創作文章時使用
Elementor：適合設計網站頁面時使用
前端與後端編輯
剛剛在上面有介紹到 Elementor 的其中一個特色就是所見即所得，而這也是古騰堡編輯器做不到的事情，我在編輯文章的時候，就會需要前端跟後端交互切換，來確認文章的排版。
Elementor 拖放功能更加自由
古騰堡編輯器也是用區塊來做編輯，但它的拖曳只能上下做拖曳，無法像 Elementor 一樣，可以自由將區塊放大放小或是編輯顏色、背景等等。
整個網站的佈局設定
古騰堡編輯器也可以自由地像拼積木一樣，以自己的方式編排頁面，但是在古騰堡編輯器中無法變更頁面的核心佈局（外觀）。
但 Elementor 是可以編輯像是頁首、頁尾以及側邊欄等等，可以更靈活得去編輯排版你的網站，讓網站使獨一無二且具有個人特色的～
Elementor 教學
如何註冊 Elementor 帳號及購買
Elementor 官網開通免費試用之前，都需要先註冊帳號，所以先來教大家怎麼註冊帳號囉！
step 1
進入官網，點擊右上角【 JOIN NOW 】
step 2
輸入電子信箱及設定密碼
step 3
選擇是為了誰想建立網站
step 4
選擇技能
step 5
回覆有沒有架站經驗
step 6
選擇網站目的
step 7
選擇方案
step 8
輸入相關資訊，完成購買！
如何安裝及完成基本設定
安裝 Elementor
step 1
在 WordPress 側邊欄中，點擊外掛 > 安裝外掛
step 2
使用關鍵字搜尋 Elementor
step 3
點擊立即安裝因為我已經正在使用 Elementor 了，所以上面顯示已啟用。如果是第一次下載，同一個地方會顯示立即安裝，點擊安裝就可以囉～
step 4
完成安裝！完成後就可以在側邊欄找到 Elementor 了。
基本設定
step 1
在 WordPress 側邊欄中，點擊 Elementor > 設定
step 2
一般設定- 內容類型：這邊是勾選什麼樣類型的內容可以使用 Elementor，建議可以全部勾選～最後一個項目可能會跟我不一樣，主要是因為佈景主題用的廠商不一樣，可以看狀況自行調整最後一項。
- 停用預設顏色 / 禁用預設字型：Elementor 全域設定可以另外設定顏色以及字型，是很方便的設定！但如果你本身的佈景主題配色以及字型都已設定完成，在這邊就可以勾選關閉喔！
角色管理員
如果你的網站，不只一個人在管理，可以設定角色管理員，為每一位夥伴設定使用權限。
step 1
在 WordPress 側邊欄中，點擊 Elementor > 角色管理員
step 2
設定權限
Elementor 基本設計概念
這邊要跟你說說 Elementor 的設計架構概念，所有的版面都是以這個概念去組成的喔～
Elementor 是由 Section 區塊 / 段、Column 欄、Widget 元素這 3 大項組成。可以把它們想像成俄羅斯娃娃，Section 區塊是最大的娃娃，在下一層是 Column 欄，而最小的就是 Widget 元素。
下面是實際頁面的樣子！
Section 區塊 / 段：在 Elementor 中，一個頁面會由數個 Section 區塊組成，而區塊內可以容納數個 Column 欄。
Column 欄：一個區塊由數個 Column 欄組成，而欄內可以容納數個 Widget 元素。
Widget 元素：一格欄由數個 Widget 元素組成，而元素可以是文字、圖片、價目表或是目錄等等的不同小工具。
Elementor 頁面編輯器，版面一覽
介紹完設計概念後，就要帶你認識 Elementor 頁面編輯器的版面啦！
版面一覽
右邊：網頁設計區，可以將元素直接拖曳到這邊進行編排，在這邊的編排同時也會是最終完成的樣子喔～
左邊：側邊區，元素存放區、全域設定或是發布等等操作，都是在這邊進行。
接下來將為你介紹側邊區域的各功能，將會分成 A、B、C、D 區做介紹。
A 設定
【網站設定】
在這邊你可以設定網站的顏色、字型、佈景主題樣式以及其他設定，在這邊進行的設定會套用到目前頁面的所有素材喔～
如果想要省去一個一個設定素材的時間，可以統一先從這邊進行設定！
【主題建構器】
主題建構器可以設計自定義的頁首、頁尾以及單一文章等等，也可以藉由主題建構器輕鬆的網站管理，讓你可以更完整的去設計你的網站！
【使用者偏好】
可以在這邊設定你的使用習慣，例如切換成夜間模式或是是否編輯處理等等
【查找器】
是一個還蠻強大的搜尋器！可以搜尋範本及頁面等等，也可以在這邊建立新的頁面或主題版型，一些素材也可以在這邊搜尋喔～
【檢視頁面】
點擊檢視頁面，將會進入檢視模式喔！就可以查看目前編輯的狀況。
【退出回到儀表板】
顧名思義就是回到儀表板，但可以特別注意的是，在回到儀表板前，會先回到古騰堡編輯器的頁面。
B 回到元素
點擊右上角的九宮格，就可以將中間的顯示區頁面帶回到元素區！一起往下看顯示區的介紹，你會更清楚喔～
C 顯示區
【元素】
所有的元素都可以在這邊找到，如果不想要花太多時間，也可以使用搜尋的！
【全域】
如果你有將設計好的元素存下來，就會統一顯示在這個全域的地方，文章後面也會有儲存教學提供給你～
【其他顯示】
在 Elementor 裡面，不論是區域、欄或是元素，都可以各別做編輯。也因為如此 Elementor 才有辦法做出那麼多的變化性，建議你都可以去玩玩看～
內容編輯：
樣式編輯：
進階編輯：
D 底部設定欄位
【設定】
在這邊可以設定頁面標題、狀態以及圖片
【導覽器】
點擊導覽器，會在頁面的右邊出現導覽器小框框，在導覽器中，你可以知道目前也面的階層編排狀況，也可以直接在導覽器中拖曳，做重新編排！
【修訂紀錄】
可以在這邊查看過去所有的編輯修改紀錄，如果發現編輯上有哪邊怪怪的，都可在修訂紀錄查看。
【響應模式】
點擊響應模式後，在頁面的上方會出現工具列，讓你可以切換視角！我覺得這個功能很棒，因為現在大家除了用電腦觀看網頁之外，手機以及平板也是很常被使用到的。
Elementor 很好的事，你可以針對不同得響應模式去做調整，且不會影響到其他響應模式！
如果檢視的比例比較個特殊，也可以用左右邊的 bar 條來拖曳調整～
【預覽變更】
點擊預覽變更，就會進入到檢視模式，這邊跟上面講到的檢視頁面是一樣的功能。
【發佈】
可以直接點擊發佈，會是將頁面存成草稿或是範本。
介紹完基本頁面後，下一章節將會帶你完成一個設計頁面～
如何用 Elementor 設計頁面？
step 1
點擊頁面 > 新增頁面
step 2
選擇使用 Elementor 編輯
step 3
選擇架構
step 4
將元素拖曳到欄裡面記得在欄裡面，可以新增多個元素喔！
step 5
依照自己的需求編排頁面
step 6
點擊圖片編輯
step 7
編輯內容
step 8
編輯樣式
step 9
編輯進階設定
step 10
繼續編輯其他元素
step 11
完成後點擊 ctrl / cmd + p 確認檢視頁面
step 12
點擊發布，完成！
接下來要將剛剛設計的頁面，設定成部落格的首頁，跟著我一起看看要怎麼設定吧～
step 1
點擊退出儀表板
step 2
點擊左上角 WordPress 符號
step 3
點擊設定 > 閱讀
step 4
選擇靜態頁面 > 選剛剛做的首頁 > 儲存
Elementor 使用技巧
儲存重複使用區塊/元素
區域（段）儲存
step 1
在區域上方的六個點點標誌按右鍵
step 2
選擇另存為範本
step 3
輸入版型名稱 > 點擊儲存
step 4
完成！就可以在版型庫中的我的版型照到儲存的區域（段）喔～
元素儲存
step 1
在元素右上角的鉛筆標誌按右鍵
step 2
選擇儲存為全域使用
step 3
輸入版型名稱 > 點擊儲存
step 4
完成！就可以在左邊全域區找到儲存的元素喔！
快速製作網站
套用區塊模板
step 1
點擊資料夾圖示
step 2
選擇區塊
step 3
確定版型後按插入
step 4
點擊開始使用
step 5
點擊 Connect
step 6
完成！
套用頁面模板
step 1
點擊資料夾圖示
step 2
選擇頁面
step 3
確定版型後按插入
step 4
選擇套用
step 5
完成！
套用我的版型（自訂義版型）
step 1
點擊資料夾圖示
step 2
選擇我的版型
step 3
確定版型後按插入
step 4
選擇套用
step 5
完成！
善用導覽器
編輯 Elementor 時，如果可以善用導覽器，製作頁面的效率可以在更上一層樓！以下是開啟導覽的方式～
點擊左邊下方的導覽器圖示
導覽器就會出現啦！
或是點擊快捷鍵 ctrl / cmd + i 也可以喔～
多選
這是 Elementor 新出的功能，可以將導覽器的項目進行多選，同時複製、貼上或是刪除等等。
點著 ctrl / cmd 就可以直接多選了！
切換黑暗模式
Elementor 也有黑暗模式可以使用～以下是設定方法：
step 1
點擊左上角的設定
step 2
選擇使用者偏好設定
step 3
將 UI 佈景主題改為深色
step 4
完成！
常用區塊加到我的最愛
使用一段時間後，一定有一些區塊是你常常使用到的，這時候就可以將他們加入到我的最愛當中，未來在使用的時候，就不用再花費時間尋找了！
step 1
點擊右下角的愛心加入
step 2
下一次需要使用的時候，就可以點上面的我的最愛啦～
適合 Elementor 的佈景主題
以下跟你分享有支援且適合 Elementor 的佈景主題
- Soledad（正在使用的）
- Astra
- OceanWP
- GeneratePress
- BeTheme
- Porto
- Shopkeeper（電商專用）
- Woodmart（電商專用）
Elementor 擴充外掛有哪些？分別有什麼功用
Essential Addons for Elementor
Essential Addons for Elementor 提供了超過 80 種以上的小工具以及素材提供給你做使用，除了 Elementor 內建的小工具，大大增加的網站設計的變化性。
但要注意的是並非全部的小工具都是免費的喔～免費的大概有 40 多種，也很夠用啦～
Premium Addons for Elementor
Premium Addons for Elementor 提供的 60 多種額外的小工具以及 400 多種模板可以使用！下載數量超過了 50 萬次數，也使一個可以讓 Elementor 編輯器更上一層樓的擴充外掛！
Elementor Header & Footer Builder
Elementor Header & Footer Builder 可以使用 Elementor 打造專屬的頁首、頁尾或是網站內的任何區塊！除了高度彈性的設計之外，也可以指定出現在網站的哪一個地方。
是五星好評的Elementor 擴充外掛⭐️⭐️⭐️⭐️⭐️
延伸閱讀...
【WordPress架站教學#1】透過Cloudways架設你的WordPress網站！每月12美元即可擁有極致效能！
【WordPress架站教學#2】透過NameCheap購買網域！首次購買、續約都便宜！
【WordPress架站教學#3】在Cloudways中設定WordPress網域、網站SSL憑證！讓你的網站更安全！
結論
Elementor 推薦給還在煩惱網站設計的你！相信你也可以完成一個滿意且有成就感的網站（覺得自己很棒）～
希望今天這一篇文章對你有幫助！有人任何想法或是建議都可以留言跟我們說，我們會盡力為你解答的！最後如果你對這一類文章有興趣，歡迎可以訂閱我們的電子報喔～可以收到最新的文章以及工具通知喔。
