這篇文章最後更新日期：2024 年 7 月 12 日
作者： Mack Chan
你有否覺得自己網站的設計很單調沉悶？希望改變得更專業，但自己又不會編程和設計技巧？那正好我們這次討論的「WordPress 頁面編輯器」剛好可以讓你輕鬆解決這系列的問題。而且都是不用花錢的方案。
透過現代最流行的 拖放操作 (Drag and drop) 和設定，就算是完全新手都可以在彈指之間制作出接近專業設計師的網站設計和樣式，只要加上使用者和站長持續努力研習，要制作一個達到普遍人都能接受的水平的網站絕不是難事。
Youtube 教學影片：
| 影片長度： | 14 分鐘 |
| 語言： | 國語 |
| 字幕： | 繁體中文 |
什麼是 WordPress 頁面編輯器？
主要泛指透過 所見即所得 (WYSIWYG) 的工具，去快速完成原本困難的網站工作，這依賴現代科學急速的發展。工具的方便程度和親民度愈來愈高，那怕你只擁有基礎和簡單的電腦知識，已經足夠制作一個外觀不錯的網站。
大部分頁面編輯器提供大量的範本內容 (Demo Data) 供你立即套用，新手輕鬆透過 拖放操作 (Drag and drop) 來作著睦頁 (Landing Page)、銷售頁、產品目錄和各類資料整理型的頁面。
快速預覽頁面編輯器推薦列表
排名順序只供參考，請選出符合自己需求更重要，因為部分 WordPress 頁面編輯器對「特定領域和產業」有很強的優勢，讀者適宜貨比三家和思維審慎，這次提供的參考謹屬意見，新手適宜多方比較和搜尋資料。
- Elementor 頁面編輯器
- Brizy 頁面編輯器
- Beaver Builder 頁面編輯器
- Visual Composer 頁面編輯器
- Thrive Architect 頁面編輯器
- WPBakery 頁面編輯器
- Divi Builder 頁面編輯器
- UX Builder 頁面編輯器
- Avada Builder 頁面編輯器
什麼是 WordPress 預設的文章編輯器？
在沒有任何額外的頁面編輯器之下，WordPress 網站仍然可以正常地運作，因為本身營運中的 2 套文章編輯器，它們分別是較新的區塊編輯器 (Block Editor) 和較舊的傳統編輯器 (Classic Editor)
(區塊編輯器 Block Editor) 和較舊的 (傳統編輯器 Classic Editor)，除了撰寫文章之外，它們也有處理頁面的功能。
像【網站迷谷】網站就是典型「沒有使用任何頁面編輯器」的網站，主要是考驗站長的美術設計能力和應用架站工具的熟練度，一般平凡的讀者是看不出來的。
區塊編輯器 Block Editor
WordPress 在近年預設內建的現代化多功能文章編輯器，內建功能和擴充外掛非常強大，如果善用各種區塊 (Block)，你將可以建立任何專業的頁面。由於每個區塊都是獨立存在，當然允許你自由組合成為新的群組，創作多樣化的可能性，所以新手不用害怕文章和頁面會否太單調乏味。
傳統編輯器 Classic Editor
暫時仍然有不少 WordPress 用戶和老玩家使用傳統編輯器作為主力的文章生產工具，相比區塊編輯器來說，它的整體實力就弱化了很多，只能單純使用簡單的文書工具，放在現代化的今天，這個編輯器顯得相當吃力和落後，在 2022 年就會開始退出歷史的舞台，建議盡快轉換到區塊編輯器。
WordPress 主要的 2 種內容是文章 (Post) 和頁面 (Page)
一般站長最經常會建立的 2 種內容類形，外觀上它們差不多，但在 WordPress 系統的生態裡，它們有自己的「分工」，主要是建議新手請使用區塊編輯器去撰寫文章，這是重中之重，除了文章 (Post)之外，其餘使用頁面 (Page) 制作就可以。
如果是標準的部落格網站，應該 90% 內容是由文章組成，頁面只佔非常少的部分。下方描述文章和頁面常見適用的範圍。
| 文章 Post | 頁面 Page |
|---|---|
| 區塊編輯器 傳統編輯器 | 區塊編輯器 頁面編輯器 |
| 文章內容 文章內容 文章內容 很重要要 說三次 | 關於我們 聯絡我們 產品目錄 網站首頁 著睦頁 Landing Page 銷售頁 價目表 常見問題 |
溫暖提醒 02：請不要使用頁面編輯器去寫文章
請不要使用 Elementor 頁面編輯器撰寫「文章」
這個新手大忌，其他頁面編輯器都 100% 不適宜用於撰寫「文章」，它們的定位是協助「頁面 Page」，所以它們為什麼會被命名為 Page Builder 就是這個由來。早期影響不大，但慢慢就會發現網站「愈來愈慢」，加上萬一 Elementor 發生什麼意外，您所有文章就會無法閱讀。由於市場上的導師很少教授區塊編輯器，導致出現這個本末倒置的現象。
一個網站請不要安裝多於一套 WordPress 頁面編輯器
這個是重點中的重點，首先不要計算區塊編輯器和傳統編輯器這兩套，因為他們屬於撰寫文章的文章編輯器。不要安裝多於一套 WordPress 頁面編輯器是泛指下方介紹的 Elementor、Brizy 這類龐大的工具，這會非常嚴重地拖慢網站的速度，請記得保留一套即可，在你測試完其他編輯器之後，如果不滿意就盡快移除。
了解自己的需求更重要
由於大部分 WordPress 頁面編輯器的功能都是「大同小異」，沒錯真的大同小異和差別性很低，所以本文聚焦較知名的 Elementor 會有比較多的報導，其他重複性高的內容就會省略掉。由於不少編輯器提供免費版，站長不妨親身下載試用和比較不同之處，相比觀看網上的教學文章，會更能親身體驗那個編輯器最適合自己，就像你去服裝店購買衣服，穿上看試過合身才是最明智的選擇。
Elementor 頁面編輯器
工具沒有對與錯之分，每一個時期都會出現比較強大的工具，但過一段時間之後，可能又會被其他更強大的工具取代。這次介紹的 Elementor 暫時仍然是業界的最佳選擇之一，你就算沒有使用過，可能也略略聽聞過它的事蹟，讓我們來簡單簡介它有什麼優點和缺點。
顛覆你對網站設計和制作的觀念
在我們的社會裡，不是每個人都具有設計和編程背景，所以缺失這類技術讓我們對建立自己的網站卻步，理論上社會愈進步，我們應該更輕易獲得和擁有一些事物？像 Elementor 就是這樣誕生的產物，你無法想像制作網站會是如此的輕鬆和簡單，活像國小或國中生都能輕鬆上手，當然實際上沒有這麼完美，但整體的工序已經大減少了很多。
視覺化的操作體驗
由於新手一般對 HTML 或 CSS 等的基礎編程認識不深，最怕就是遇上要輕微改動「版面配置 Layout」或更改「圖片尺寸 Image Resize」等的操作，深怕自己的一個輕微錯誤，可能引起整個網站跑版，最壞情況整個網站的頁面壞掉。但像 Elementor 等的現代頁面編輯器，大部分操作都具有肉眼可以看到和修改得到的視覺化的操作，大大降低了調整版面的難度。
立即顯示更新的內容
如果大家從前有使用過像 Adobe Dreamweaver 這一類的傳統網頁制作工具，就會發現每改動一件物件、新增文字圖片或改動版位等的操作，都需要先按「儲存 Save」一次，然後跑去網頁瀏覽器按更新或 F5，才能看到更新後的網頁內容和改動資料，反反複複進行這個動作數百次也是網頁設計師的日常體驗。但現代化的網頁編輯器一般都是「實時 Real Time」顯示更新的效果，大大提升了生產的效率和減少重複的流程。
大量立即套用的預制範本內容
網站剛剛設立完成，但內容空空如也，如果有一些暫時使用的素材來充實網站，就會顯得比較完整和架構完整。剛好 Elementor 其中一個最強大的功能，就是協助新手快速起步的匯入預制的網站內容，這個種為「預制範本內容庫 Template Library」，讓您依據不同的行業，套用相關的內容，然後輕微修改文字內容和圖片，即可以建立網站的基礎雛型。
輕鬆制作跨平台和裝置的網站
在 Elementor 的編輯模式時，在左下方你可以輕鬆改變編輯不同尺寸的裝置，分別是電腦桌機、平板電腦和手機。你都可以在不用離開編輯介面之下完成，而且這個過程不需要任何編程的能力，你更可以立即預覽實際的效果，那怕你仍沒有儲存任何內容。這點對不熟悉自適應設計的朋友非常有利和提供方便性。
什麼是形狀分隔線 Shape Divider？
現代網站設計很流行的「形狀分隔線 Shape Divider」作為不同區塊元素的區隔和過渡處理，你可以設定不同的形狀或使用預設的形象也可以，使用之後，你會觀察不同區塊之間會有一種自然的過渡，就像你把咖啡和牛奶結合，制做一種混合的感覺，強化網站整體的一致性和統一性。
基礎評論：
作為市場上的領導品牌，介面親切友善的 Theme Builder 使您可以自定義網站的每個部分，使用 Elementor Pro 內建的 Theme Builder，您不再受制於主題限制。您可以使用這個編輯器直觀地設計頁首、頁腳、重複使用頁面、單篇文章以及網站的所有其他部分。這適用於任何 WordPress 佈景主題，站長不需要懂得任何程式編碼。沒有其他佈景主題或外掛提供此解決方案。使整個網站設計的過程都是「可視化」和直觀操作，您可以比以往更快地完成網站專案項目。
Elementor 在 2018 年進入市場至今，每年高速成長，因為提供「免費版」的關係，又有大量廠方願意為他們開發更多更強的擴充功能，那時競爭對手比較少，所以他們迅速搶攻了最大量的市場。
現在的新手使用的 Elementor 已經是發展非常成熟的版本，已經非常少 bug 臭蟲，網絡上的教學資源也是最多的。
詳盡資料：
| 整體評分： | ★★★★☆ 4 / 5 |
| 更新速度： | ★★★★★ 5 / 5 |
| 使用人數： | ★★★★★ 5 / 5 8,000,000 8 百萬 |
| 易用性： | 新手入門 |
| 範本模版： | ★★★★★ 5 / 5 官方 / 非官方 1,000 以上 |
| 速度效能： | ★★★☆☆ 3 / 5 |
| 擴充外掛： | ★★★☆☆ 3 / 5 |
| 免費版本： | 有提供 |
| 付費版本： | $49 美金 (1 個用戶) |
Elementor 整體評價：★★★★☆ 4 / 5
| 適用行業： | 優勢：著睦頁 Landing Page / 部落格 / 形象官網 劣勢：電商網站 / 文章為主的新聞網站 備注：請不要使用「頁面編輯器」寫文章 |
| 尋求支援： | ★★★★☆ 4 / 5 全球有 8 百萬使用者， 容易找到協助你的專家 / 朋友 |
| 教學資源： | ★★★★★ 5 / 5 Google / Youtube / Facebook |
| 支援社群： | Elementor Facebook 專頁 (官方) Elementor 支援社團 (官方) Elementor 中文交流社團 (非官方) WordPress 中文交流社團 (非官方) |
在眾多 WordPress 頁面編輯器（Page Builder）的選擇裡，很難可以找到和 Elementor 相匹敵的對手，當然它本身不是沒有缺點。效能速度比它強的編輯器也有不少選擇，但談論各方面的比較後，我會給出 ★★★★☆ 4 / 5，主要的失分點落左「效能」身上，如果官方可以讓程式碼更簡潔和高效就更好，不境現代網站其中最重要一環是網站的載入速度。
Brizy 頁面編輯器
基礎內容
論知名度、合作廠方和和使用人數，Brizy 遠遠不及 Elementor，但它們作為「同期」出現的頁面編輯器產品，各方面都長得很像，也有互相參考和學習的地方，但整體來說，大多數人會比較認為 Brizy 是【輕量版的 Elementor】，適合輕度的使用者，如果你只有少量的頁面需要設計，就不要使用笨重的編輯器，Brizy 將會是一個不錯的選擇。
不過價格方面，由於有提供「單個和無限網站終身授權 Lifetime License」，對於不少站長和網站設計公司，這將是一項不錯的長遠投資，降低了每年續費的重大成本。
Brizy Cloud 是一項領先的服務，它是把頁面編輯器和主機服務結合的首創例子，提供使用者一條龍的 All in One 服務，適合對主機要求不高的受眾。
詳盡資料
| 整體評分： | ★★★☆☆ 3 / 5 |
| 更新速度： | ★★★★☆ 4 / 5 |
| 使用人數： | ★★★☆☆ 3 / 5 90,000 9 萬 |
| 易用性： | 新手入門 |
| 範本模版： | ★★★☆☆ 3 / 5 官方 / 非官方 300 以上 |
| 速度效能： | ★★★☆☆ 3 / 5 |
| 擴充外掛： | ★★☆☆☆ 2 / 5 |
| 免費版本： | 有提供 |
| 付費版本： | $49 美金 (1 個用戶) |
Brizy 整體評價：★★★☆☆ 3 / 5
| 適用行業： | 定位和 Elementor 相同； 優勢：著睦頁 Landing Page / 部落格 / 形象官網 劣勢：電商網站 / 文章為主的新聞網站 備注：請不要使用「頁面編輯器」寫文章 |
| 尋求支援： | ★★★☆☆ 3 / 5 全球有 9 萬使用者 屬於中等的水平 |
| 教學資源： | ★★★☆☆ 3 / 5 Google / Youtube / Facebook |
| 支援社群： | Brizy Facebook 專頁 (官方) Brizy 支援社團 (官方) WordPress 中文交流社團 (非官方) |
如果正在尋找 Elementor 的替代方案，Brizy 可能會是最佳的選擇，功能更少但提供了載入的效能，加上更便宜的價格和終身方案，還附送免費雲端服務，也許這可以讓你提供一個新的選擇給客戶和朋友。
Beaver Builder 頁面編輯器
基礎內容
一般使用者接觸到 Beaver Builder 頁面編輯器都是因為隨 WordPress 佈景主題附贈的免費版本，如果是購買「付費佈景主題」的話，有機會獲得廠方的進階版，不過更新速度比較緩慢。這個知名編輯器算是比較傳統的選擇，授用較舊式的 (短碼 Short Code) 置入在內容裡，透過推疊不同的功能模組而建立一個完整的網站。
為什麼挑選為「第 3 名」推薦，因為這家獨立的編輯器相較 Visual Composer 和 WPBakery 更進取，由於相對年輕，最少給予使用者一些新鮮感，但操作上和後者仍然相似。
主要針對的用戶群是「網站設計公司」和「開發團隊」，付費版本並不提供「單用戶」的廉價版。對於個人部落格和形象網站，這套編輯器的性價比非常低，除非是佈景主題內附贈的，不然不太會推薦給新手。
備注：關於 Beaver Builder 的吉祥物是什麼？可以查閱我們之前的討論串。
詳盡資料
| 整體評分： | ★★★☆☆ 3 / 5 |
| 更新速度： | ★★★★☆ 4 / 5 |
| 使用人數： | ★★★☆☆ 3 / 5 300,000 30 萬 |
| 易用性： | 新手入門 |
| 範本模版： | ★★★☆☆ 3 / 5 官方 / 非官方 300 以上 |
| 速度效能： | ★★★☆☆ 3 / 5 |
| 擴充外掛： | ★★☆☆☆ 2 / 5 官方主力 |
| 免費版本： | 有提供 |
| 付費版本： | $99 美金 (無限用戶) |
Beaver Builder 整體評價：★★★☆☆ 3 / 5
| 適用行業： | 優勢：著睦頁 Landing Page / 部落格 / 形象官網 劣勢：電商網站 / 文章為主的新聞網站 備注：請不要使用「頁面編輯器」寫文章 |
| 尋求支援： | ★★★☆☆ 3 / 5 全球有 30 萬使用者， 容易找到協助你的專家 / 朋友 因為不少佈景主題附送的 |
| 教學資源： | ★★☆☆☆ 2 / 5 Google / Youtube / Facebook |
| 支援社群： | Beaver Builder Facebook 專頁 (官方) Beaver Builder Facebook 支援社團 (官方) Beaver Builder Slack 交流社團 (官方) WordPress 中文交流社團 (非官方) |
延伸閱讀：
為什麼不建議使用 Elementor 或其他第三方頁面編輯器撰寫文章？
千萬不要放任自己使用頁面編輯器去撰定文章，無論你只是替公司打工，或是經營自媒體的站長，為了網站的可持續和有效的成長，這個對使用工具的清晰理解是必須的，習慣是需要持續的約束自己的放任行為，只要努力堅持使用合適的工具去撰寫文章。你將獲得一個可以確保安全的經營環境，下方舉出一些例子去引證。
Elementor 很慢嗎？自動找出和最佳化沒有使用的多餘小工具
Elementor 作為市場上最受歡迎的 WordPress 第三方頁面編輯器，自然受到不少新手追棒，但如果沒有像資深前輩般懂得調整設定主機、減少 DOM 數目、記錄體配置和效能等等，Elementor 往往變成是「拖慢網站效能和速度」的元兇，雖然有提供免費版和付費版，但一般可能仍然無法滿足使用者的需求。
常見問題 FAQ
什麼是 WordPress 頁面編輯器？
主要泛指透過 所見即所得 (WYSIWYG) 的工具，去快速完成原本困難的網站工作，這依賴現代科學急速的發展。工具的方便程度和親民度愈來愈高，那怕你只擁有基礎和簡單的電腦知識，已經足夠制作一個外觀不錯的網站。大部分頁面編輯器提供大量的範本內容 (Demo Data) 供你立即套用，新手輕鬆透過 拖放操作（Drag-and-drop）來作著睦頁 (Landing Page)、銷售頁、產品目錄和各類資料整理型的頁面。
為什麼不要使用 Elementor 頁面編輯器撰寫「文章」
這個新手大忌，其他 頁面編輯器都 100% 不適宜用於撰寫「文章」，它們的定位是協助「頁面 Page」，所以它們為什麼名為 Page Builder 就是這個由來。早期影響不大，但慢慢就會發現網站「愈來愈慢」，加上萬一 Elementor 發生什麼意外，您所有文章就會無法閱讀。由於市場上的導師很少教授區塊編輯器，導致出現這個本末倒置的現象。
為什麼一個網站請不要安裝多於一套 WordPress 頁面編輯器
這個是重點中的重點，首先不要計算區塊編輯器和傳統編輯器這兩套，因為他們屬於撰寫文章的文章編輯器。不要安裝多於一套 WordPress 頁面編輯器是泛指下方介紹的 Elementor、Brizy 這類龐大的工具，這會非常嚴重地拖慢網站的速度，請記得保留一套即可，在你測試完其他編輯器之後，如果不滿意就盡快移除。
參考資料和引用文獻：
我們提供市場上最新的網站架設
新聞、教學和相關知識，我們不會向用戶
發送垃圾和推廣內容，而你可以隨時「取消訂閱」。
WordPress 學員人數
15,000+ 人 (持續增加之中)
謝謝分享本文教學！
您好，不客氣，希望能夠幫助到 WordPress 初學者分析常見的頁面編輯器外掛。