【 Elementor 完整教學】2024 年最推薦 WordPress 架站頁面編輯器！手把手教學

最後更新時間： 2024 年 01 月 07 日

哈囉！我是Yuria～今天要帶你認識一個在 WordPress 所有編輯器當中，展露獨角的 Elementor 頁面編輯器。

如果你正在煩惱架站、設計網頁，想要做出一個擁有特色且與眾不同的部落格 / 電商賣場，那這一篇文章很適合你，我們廢話不多說，趕緊進入主題吧～

你可能有興趣…

「 WordPress 架站教學系列文章」
1. Cloudways 教學：WordPress 架站推薦主機，每月 400 台幣即可擁有超高網站效能！
2. 【WordPress 架站教學#2】透過 NameCheap 購買網域！首次購買、續約都便宜！
3. 【 WordPress 架站教學#3】在 Cloudways 中設定 WordPress 網域、網站 SSL 憑證！讓你的網站更安全！

Elementor 是什麼？

Elementor 是目前 WordPress 最受歡迎的頁面編輯器，目前已擴展到 180 個國家，並且有超過 900 萬的安裝次數，簡單的拖曳編輯、多樣的小工具以及高度客製化等等，都是它吸引大家使用的原因！

Elementor 的目標是希望讓使用者能夠使用最全面且一體化的體驗設計去創建強大而美觀的網站。可以用最少的麻煩和最大的樂趣來設計建立專屬自己的網站～

（進入 Elementor 官網後記得先註冊帳號，就可以自由試用 Elementor 的免費版功能囉！）

Elementor 和 WordPress 內建編輯器有什麼差異？

【先講結論】
WordPress 內建編輯器（古騰堡編輯器）：適合編輯、創作文章時使用
Elementor：適合設計網站頁面時使用

Elementor 就是實際網頁畫面

Elementor 的其中一個特色就是所見即所得，你正在編輯的頁面，就是實際會顯示在網路上的頁面，但 WordPress 古騰堡編輯器是做不到的，在編輯文章的時候，就是在編輯文章，需要另外點及覽才能到前台來確認文章的排版。

Elementor 的拖放功能更加自由

古騰堡編輯器雖然也是用區塊來做編輯，但它的拖曳只能上下做拖曳，無法像 Elementor 一樣，可以自由放大縮小區塊，或是編輯區塊的顏色、背景等等。

Elementor 可改動整個網站佈局

古騰堡編輯器雖然也可以像拼積木一樣，自由地編排自己想要的欄位、版型，但僅顯於網頁中的部分區塊，比如說只能改動文章內容，但就不能改動整個網頁的外觀核心佈局。

不過，Elementor 就沒有這個限制了，不僅可以編輯頁面的內容外，像是頁首、頁尾以及側邊欄等也都可以靈活調整，也更能讓你的網站具有獨一無二的個人特色～

Elementor 特色優勢

不需會任何程式基礎

常常提到網頁設計或是網站架設，大家都會聯想要工程師或是需要有程式相關背景的人才可以完成，但使用 Elementor 完全不需要任何程式背景就可以簡單架設出有模有樣的網站啦！

而我想這也是讓大家很喜愛使用 Elementor 的原因，因為任何人都可以依照自己的想法需求去做設計～終於不用再只能套用現成模板了！

拖曳即可編輯

在 Elementor 製作網頁不用會寫程式，你只要會用滑鼠拖曳就可以了（我相信大家都會吧）！將想要的元素小工具（後面會介紹）直接拖曳到網頁上，就可以進行編排、縮放或是變更顏色等等

就像是組積木一樣堆蓋念，藉由不斷的組裝修改，最後完成一個獨具個人特色的成品，完成後可是會非常有成就感呢（笑）。

多樣現成模板

雖然說 Elementor 可以完全自己編排設計，但有時候沒有想法或是想要借鑒他人作品時，Elementor 也有很多樣的現成模板提供給你使用！

將模板在套入進去之後，可以再針對你的需求作變更，像是色系、文字內容甚至是排版也可以直接拖曳調整～

多達100個元素小工具

Elementor 內建了很多的元素小工具提供給你使用～而這些小工具就像是不同形狀的積木，每個都有不同的功能，從基本的標題、圖片及按鈕等等，到社交網路服務圖示、進度條功能或是選單錨點等等

Elementor 涵蓋了真的很多不同的小工具，建議可以多多去探索～相信可以找到很多很酷很實用的小工具喔！

所見即所得

在製作網頁時，很多軟體是後端跟前端的呈現不一樣，這是什麼意思呢？就是當你在後端進行編輯排版的時候，前端所呈現出的排版跟後端不一樣（文字大小、間隔等等）。

這時候我們就會常常需要前後端一直切換，去確認最終呈現的版面。

但是！ Elementor 沒有這個問題（撒花）～當你在編輯器編輯時，就是會完全跟最終前端呈現的樣子一模一樣，也因此可以更直觀的去做設計調整。

可以建立良好的工作流程

使用 Elementor 時，可以建立很專業的工作流程，它除了可以自定義模板庫，也可以設定全域功能去建立網站常用色系、字體等等，不但可以快效率，也可以讓網頁設計的風格是一致的！

Elementor 價格方案

Elementor 的方案，大項目可以分為免費版本以及付費版本。這其中付費版本又會因為可以使用的網站數量而有不同的方案價格！

以下用表格比較免費版本以及付費版的差異

	免費版	付費版
拖曳編輯器	✔️	✔️
響應式編輯	✔️	✔️
100 多個小工具	✔️	✔️
額外 50 多的小工具		✔️
全域編輯	✔️	✔️
內建模板	✔️	✔️
300+ 進階模板		✔️
導覽器	✔️	✔️
小工具收藏夾	✔️	✔️
自定義HTML		✔️
自訂義屬性		✔️
主題生成器		✔️
自訂CSS		✔️
角色管理員		✔️

我個人是使用付費版本，因為有一些功能是我經過評估後，確定我會使用到的！例如額外的 50 多種小工具以及自定義 HTML 等等～更詳細的內容可以去官網查看喔！

接下來，來幫你比較付費版的各方案！

	Basic 基本方案	Business 商業方案	Grow 成長方案	Scale 規模方案
託管網站數量	1 個	1 個	3 個	10 個
Elementor Pro 工具	✔️	✔️	✔️	✔️
儲存空間	10GB	20GB	25GB	40GB
每月最高訪問次數	2.5 萬	5 萬	7.5 萬	10 萬
帶寬	30GB / 月	50GB / 月	75GB / 月	100GB / 月
自動備份天數	14 天	30 天	30 天	30 天
進階客服支援	1 名成員	2 名成員	4 名成員	6 名成員
價格（以年收費）	US$ 9.99 / 月	US$ 24.99 / 月	US$ 32.99 / 月	US$ 59.99 / 月

我最推薦的方案
⭐️ 付費版-Business 商業方案（1個網站）US$ 24.99 / 月
⭐️ 付費版-Grow 成長方案（3個網站）US$ 32.99 / 月

Elementor 不定期會提供不同的優惠方案！
記得三不五時上去逛逛，就有機會用更優惠的價格把 Elementor 帶回家哦！

因為我個人目前只有經營一個網站，因此使用選擇使用商業方案就可以了！

如果你擁有超過一個網站，或是未來有多開設網站需求，或是你有一群志同道合的朋友！都可以選擇成長方案，等於一個網站一年只要約台幣 966 元，又更加優惠划算了～

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 擴充外掛⭐️⭐️⭐️⭐️⭐️

延伸閱讀...

Cloudways 教學：WordPress 架站推薦主機，每月 400 台幣即可擁有超高網站效能！
【WordPress 架站教學#2】透過 NameCheap 購買網域！首次購買、續約都便宜！
【 WordPress 架站教學#3】在 Cloudways 中設定 WordPress 網域、網站 SSL 憑證！讓你的網站更安全！

我推薦使用 Elementor 嗎？

超級推薦！

當初在架設網站做事前功課時，參考了很多不同的網頁設計以及編排，認為很好看也很有特色！而也是在這時候發現 WordPress 內建的版面樣式做不到這些（哭）。

因此接觸到了 Elementor ！讓我可以真正的去按照我的意思打照我的夢想網站～雖然說一個網站，內容要大於美觀，但如果兩個都可以兼具不是更好嗎？

現在世代使用者體驗變的很重要，一個舒服美觀的頁面，絕對可以第一時間抓住讀者的眼睛，讓我們開始用 Elementor 無痛建立一個專屬且有特色的網站吧！

Elementor 註冊及購買教學

Elementor 官網開通免費試用之前，都需要先註冊帳號，所以先來教大家怎麼註冊帳號囉！

step 1

進入官網，點擊右上角【 JOIN NOW 】

step 2

輸入電子信箱及設定密碼

step 3

選擇是為了誰想建立網站

step 4

選擇技能

step 5

回覆有沒有架站經驗

step 6

選擇網站目的

step 7

選擇方案

step 8

輸入相關資訊，完成購買！

Elementor 安裝及基本設定教學

Elementor 安裝教學

step 1

在 WordPress 側邊欄中，點擊外掛 > 安裝外掛

step 2

使用關鍵字搜尋 Elementor

step 3

點擊立即安裝

因為我已經正在使用 Elementor 了，所以上面顯示已啟用。如果是第一次下載，同一個地方會顯示立即安裝，點擊安裝就可以囉～

step 4

完成安裝！

完成後就可以在側邊欄找到 Elementor 了。

Elementor 基本設定教學

step 1

在 WordPress 側邊欄中，點擊 Elementor > 設定

step 2

一般設定

1. 內容類型：這邊是勾選什麼樣類型的內容可以使用 Elementor，建議可以全部勾選～最後一個項目可能會跟我不一樣，主要是因為佈景主題用的廠商不一樣，可以看狀況自行調整最後一項。
   
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 使用教學

如何用 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

點擊發布，完成！

如何將 Elementor 頁面設定為首頁？

接下來要將剛剛設計的頁面，設定成部落格的首頁，跟著我一起看看要怎麼設定吧～

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 推薦給還在煩惱網站設計的你！相信你也可以完成一個滿意且有成就感的網站（覺得自己很棒）～

希望今天這一篇文章對你有幫助！有人任何想法或是建議都可以留言跟我們說，我們會盡力為你解答的！最後如果你對這一類文章有興趣，歡迎可以訂閱我們的電子報喔～可以收到最新的文章以及工具通知喔。

想學習更多好用數位工具、一起提升生產力、增加工作效率？

填寫下方表單，限時免費領取《數位工具應用地圖電子書》，內有超完整數位工具應用情境與攻略，一次帶走所有好用工具與使用攻略！

Ps. 領取後，我們還會每週二準時發送給你一封《領先數位週報》電子信，持續跟你分享最新研究的推薦數位工具，以及一個提升生產力的小技巧！