這是一篇完整的「 WordPress頁面編輯器 」推薦,協助你快速網頁設計。
使用頁面編輯器的好處是,你不需會任何的程式技術,用簡單拖曳功能的方式,就能完成專業的客製化網站製作(視覺化編輯的概念)。
文中我整理了幾個主流的頁面編輯器,並對此做分析和比較,應該能幫助你找到適合自己的。
好囉,我們來看一下文章大綱。
- 頁面編輯器是什麼?
- 1. Elementor
- 2. Divi
- 3. Beaver Builder
- 4. WPBakery
- 5. Thrive Architect
- 6. Themify
- 7. Visual composer
- 綜合比較整理
- 常見問題
- WordPress 學習資源
如果準備好了,我們就開始吧:)
頁面編輯器是什麼?
WordPress 是知名的網頁製作平台 / 網站管理系統,全球大約有 30% 以上是使用 WordPress 建置網站,這是個極大的數字,展現它的獨特性。
在一切的開始,當你的 網站製作 完成,通常會安裝 優質佈景主題、優質網站外掛,讓你的網站有基礎的版型和功能。
對於某些類型的網站,像是 官網設計、購物網站設計 等 ..,頁面編輯器通常是不可或缺的一款外掛,因為它能幫你做出漂亮,且符合品牌調性的頁面。
下面我列出幾個 WordPress 頁面編輯器的優點。
- 客製化網頁設計:能客製化欄位佈局,只要把想用的元素,拖曳至欄位裡面,就能呈現在網頁上。
- 不需有程式基礎,簡單上手:用拖曳的方式即可製作網頁,不用懂程式碼。
- 提供現成的模板:大部分頁面編輯器,都會提供多種模板 or 區塊樣式,可直接點擊套用,就能馬上完成頁面設計,就不用從零製作,非常方便。
- 支援不同裝置瀏覽:元素基本上都有做響應式設計,就不用花太多時間調整手機版網站了(電腦 / 平板 / 手機,完美兼容)。
- 額外功能:不同頁面編輯器,都有屬於自家開發的額外功能,能同時享用到。
- 還有更多優點
知道頁面編輯器的好處後,接著就是選擇哪一款適合自己,因為不同家的軟體還是有差別,文章我也會跟大家分享:)
1. Elementor
Elementor 是全球知名的 WordPress 頁面編輯器,全球已經有 500w+ 次外掛下載量,基本上與所有主題兼容。可參考 Elementor 外掛教學。
你不需會任何程式基礎,只要用區塊拖曳方式,就能客製化形象網站設計。
有關任何的頁面佈局、新增區塊功能、編輯區塊內容等 ..,都將變得更加簡單。
Elementor 有多種功能區塊,是建置網站的好幫手,當你心中簡單構圖完成,接下來只要拖放區塊,並放置在網頁上即可完成設計。
Elementor 有多種區塊模板和網站樣板,點擊按鈕就可套用,再從中進行修改自己喜歡的設計,可節省大量的建置網站時間。
購物網站盛行的時期,或許你想架設購物網站,Elementor 對於 WooCommerce 電商外掛,有良好的支援。
並為此開發了 WooCommerce Builder(購物網站編輯器),除了一般的頁面設計,你也能設計客製化的購物網站頁面。
像是添加購物車按鈕、產品價格、產品圖片和說明、相關產品列表、產品庫存提醒等 .. ,如下圖。
方案評論
Elementor 有免費版方案可使用,如果感覺不錯用且有更多設計上的需求,再升級為進階版即可。完整 Elementor Pro 進階教學。
Elementor 進階版,有額外 50 多個專業元素功能、300 多種進階模板、主題編輯器、表單編輯器、彈出式廣告編輯器、WooCommerce Builder(購物網站編輯器)等 ..,有更多功能可以使用。
Elementor 進階版方案,分為個人用、公司用的兩大類型,裡面又有不同的方案,但能使用的功能幾乎都一樣,最大的差別是「 使用的網站數量 」。
如果你只有一個網站會使用,只需購買最低的方案即可,依此類推。
產品定價
Elementor 個人用,起手價格是 $ 59 美元 / 年(約 $1,800 台幣 / 年),算是滿平價的費用,可應用在一個網站上,並享用它的全部功能。
2. Divi
Divi 是由知名 Elegant Themes 公司開發,是許多網頁設計師喜愛的一款軟體,除了功能強大且有很多高質感的元素(和現成模板)。更多完整 Divi 中文教學。
不需要任何程式概念,用拖曳方式就能設計漂亮的網站,就像官網所描述的,視覺化設計和佈局排版都將變得更加容易。
使用 Divi 主題,完整架站教學(全攻略分享)
Elegant Themes 旗下產品,有全功能 Divi Theme 佈景主題、Divi Builder 頁面編輯器、Extra 主題(可用在部落格 / 新聞雜誌 / 作品集 ..)、Bloom 電子報註冊行銷工具、Monarch 社群工具等 ..。
所以使用 Divi 軟體,不會只有一種軟體可用,而是能享受它們公司的所有服務,非常的划算。
加上多種區塊模板和完整的網站樣板,有商業風、線上開店平台、科技風、服務類型等 .. 多種主題風格。
你只需幾點擊按鈕,即可引用區塊樣板,或套用整個網站設計。
Divi 對 Woocommerce 開店平台外掛有完美的支持,並提供多種線上開店的區塊功能,一樣用拖放方式即可放入頁面。
使用 Divi 會是個很棒的選擇,因為它能幫你做到很多事。
方案評論
Divi 的使用方案很簡單,它提供基本的「 Divi 」方案和更多功能的「 Divi Pro 」方案,兩者都有「 年租方案 」和「 終身方案(一次性)」。
每種方案都能應用在無限數量的網站,費用也維持在合理範圍,犬哥建議可以選擇「 Divi 」終身方案。
有個好處是,Divi 整體系列包含自開發的多功能 WordPress 佈景主題,且和旗下產品有完美兼容,這代表你可能不需再額外購買 WordPress 主題。
特別一提,終身使用方案在 WordPress 頁面編輯器市場中,是比較棒的收費方式。
這代表你只需負擔一次性的小額費用(和外包網頁設計相比),就能終身享用所有 Divi 功能。
產品定價
Divi 的年租用方案,原定價是 $89 美元 / 年(約 $2,700 台幣 / 年),可應用在無限數量的網站。
Divi 的終身方案,原定價是 $249 美元(約 $7,500 台幣 / 終身),一次性費用即可終身使用,可應用在無限制數量的網站。
但有個好消息要告訴大家,請看下面享有全方案的折扣優惠!
★☆ — 重要資訊 — ☆★
犬哥網站與 Divi 有長期合作關係,點擊此連結 Divi 10% 折扣,將可享用任一方案 10% 的限時折扣優惠,請一定要把握唷:)
終身方案是一次性費用,購買之後隔年不會有額外費用,你可享有 Divi 軟體終身更新+優先的客戶服務(建議優先選擇,比較划算)。
3. Beaver Builder
Beaver Builder 是知名的 WordPress頁面編輯器 ,可愛海貍圖示是它的經典圖示,有很棒的客服支持和討論社群。
你同樣不需會寫任何程式代碼,只用拖放方式選取區塊功能,然後放置在指定位置,即可完成網頁設計。
Beaver Builder 有豐富的區塊模板和頁面樣式,只需選擇喜愛的模板,然後點擊套用就可以。
你甚至可以將自己的設計,另存為全站共用模板,方便你多次使用。
Beaver Builder 的頁面編輯器,可用在任何的佈景主題上,且和多數的 WordPress 知名佈景主題 有完美兼容。
它將內容編輯區分成一般編輯器(WordPress 預設值)和 Beaver Builder 編輯器,這代表哪天你想停止使用,也不會丟失網站內容。
方案評論
Beaver Builder 提供 3 種方案,分別是 Standard 標準版、Pro 專業版、Agency 機構版,每種方案都可應用無限制數量的網站。
Standard 標準版 和 Pro 專業版,基本上兩者功能差不多,如果是新手入門頁面編輯器,可先從標準版開始。
Agency 機構版適合個人 Soho 族或是網頁設計公司,如果你的預算足夠,此方案提供全局管理不同網站上的頁面編輯器,可自由調整功能,方便大量管理網站。
產品定價
Beaver Builder 的 Standard 標準版,費用是 $99 美元 / 年(約 $3,000 元台幣 / 年),就能使用它的絕大部分功能,可應用在無限數量的網站。
如果你是個人 Soho 族或是網頁設計公司,需統一管理不同網站的頁面編輯器功能,再使用進階方案即可。
4. WPBakery
WPBakery 是熱門的「 WordPress頁面編輯器 」外掛,全球有超過 430w+ 下載量,這是個龐大的數字。
它可應用在任何的佈景主題,幫助你視覺化網頁設計,你無需任何的程式能力,就能設計專業的網站。
WPBakery 的所見即所得頁面編輯器,讓你可以把腦海中想法,轉化成現實並轉化成網頁設計。
它的操作很簡單,你一樣只需用拖放方式,就可設計網站區塊佈局。
進行 WordPress 網頁製作,需要有多個區塊功能豐富網站頁面,WPBakery 內建有不同的功能元素,可滿足你大部分的需求。
WPBakery 的多種專業網站樣板,同樣是它的特色之一,可快速導入引用網站模板,幫助你豐富整個網站設計。
方案評價
WPBakery 沒有多餘的方案選擇,但這也來的更簡單容易。
WPBakery 有在 ThemeForest 外掛森林 銷售自家的頁面編輯器,至始至終一直在 WordPress 外掛銷售排行前幾名。
因為許多知名佈景主題,都是採用 WPBakery 做為預設編輯器,所以讓它的購買量一直高居不下。
方案評論
WPBakery 的定價費用,大約 $64 美元(約 $1,920 台幣), 就可享有軟體終身更新,和領先的客戶服務。
這是很划算的投資,相比較高額的網頁設計公司製作,這來的優惠很多。
5. Thrive Architect
Thrive Themes 是知名的 WordPress 佈景主題和網站外掛開發商,Thrive Architect 是它旗下的知名頁面編輯器。
Thrive Architect 主打用最快、最真實的視覺化設計方式,可將你的想法轉化成網站設計,參考下面影片會理解更多。
Thrive Architect 有設計上百種高轉化率頁面,可快速導入引用網站模板,幫助你達成想要的目的。
多種 WordPress 區塊功能元素,是少不了的網頁設計編輯基礎,可用拖放式放置在你的網頁上,豐富你的網頁製作。
Thrive Architect 支援響應式設計功能,能即時預覽不同尺寸螢幕的頁面,加速網頁設計流程。
或是針對不同螢幕尺寸,顯示或是隱藏功能區塊,幫助你不同裝置的網頁設計。
方案評論
Thrive Themes 是知名的 WordPress 佈景主題和網站外掛開發商,它旗下有多種產品,像是 Theme Builder 主題編輯器、Architect 頁面編輯器、Quiz 測驗編輯器、Comments 評論功能 .. 。
好處是,它們家採用一條龍功能整合,把常會使用到的 WordPress 外掛,都已經事先開發好並整合在服務裡面。
如果你不喜歡花時間搭配主題&外掛,那直接使用 Thrive Themes 的服務,也是很好的選擇,因為它把全部都整合在一起了。
方案費用
Thrive Suite 是多合一的服務方案,約 $19 美金 / 月(一年約 $228 美金),就能享用全部的功能。
6. Themify
Themify 是知名的 WordPress 佈景主題和網站外掛開發商,Themify Builder 是它旗下的知名頁面編輯器。
使用 Themify Builder 可以自由設計頁面佈局,和拖曳內建的豐富元素,完成客製化網頁設計,可參考示範影片會了解更多。
Themify Builder 有多種現成專業的網頁設計佈局,可讓你在短短幾分鐘套用整個樣板,並完成網站。
這是 Themify Builder 頁面編輯器的部分截圖,它沒有額外的複雜畫面,只有易上手的功能區塊和版面配置,幫助你網站建置。
方案評論
Themify 有兩種使用方法,第一種是購買 Themify 自家開發的佈景主題(像是 Ultra),因為主題預設有內建 Themify Builder 頁面編輯器,還有多種自家外掛。
另一種是單獨購買 Themify Builder 頁面編輯器外掛,再配合任何的 WordPress 佈景主題,皆可順利運作。
方案費用
Themify Builder 有提供免費版下載,但是功能性不太足夠,這邊先不提及。
Themify Builder 頁面編輯器外掛下載,定價約 $39 / 美元(約 $1,200 元台幣),就可下載啟用此外掛。
7. Visual Composer
Visual Composer 是知名老字號的「 WordPress頁面編輯器 」外掛,它優質的視覺化頁面編輯功能,讓它在全球有許多擁護者。
撇開 Visual Composer 免費版不談(因為功能不多),進階版除了頁面編輯器功能,還有像是主題編輯器、彈出式視窗編輯器、WooCommerce 電商支援等 .. 功能可用。
Visual Composer 有多種專業的功能區塊,可自由組裝屬於你的網站設計,不論是社群連結、網站圖標、WooCommerce 電子商務功能支持 .. ,都任你套用。
Visual Composer 有提供多種免費版 or 進階版的網站樣板,只需找到你喜愛的,然後按下按鈕即可套用。
Visual Composer 同樣支援手機版響應式設計,你可以在不同畫面裝置,進行不同的頁面設計,或是調整指定區塊在不同畫面的顯示或隱藏。
方案評論
Visual Composer 有提供免費版方案,如果想先試用看看,也可先下載玩玩看。
進階版方案,除了頁面編輯器的功能,還有像是主題編輯器、彈出式視窗編輯器、多種文章佈局功能等 .. 多種外掛,都能一次擁有。
至於進階版不同的方案,所擁有的功能都大致相同,最大差別是在「 使用的網站數量 」。
方案費用
如果你只有經營一個網站,它的最低費用是 $49 美元 / 年(約 $1,500 台幣),適用在單一網站,你可用最少的費用享用所有功能。
如果有多個網站需使用 Visual Composer 旗下的所有服務,再升級成高階方案即可。
綜合比較整理
WordPress 頁面編輯器外掛,可讓你自由的設計網站頁面,是經營個人或公司品牌網站,不可或缺的好東西。
看完以上的推薦,可能你正在想到底哪個適合自己?在實際用過多種 WordPress 頁面編輯器後,我發現。
最推薦的是哪種頁面編輯器呢?
第一推薦是使用 Elementor,因為整題功能齊全完整,且介面流程設計的非常容易上手,加上有提供免費版方案,可讓網站主可做基本的頁面設計。參考 Elementor 免費版教學。
如果有進一步的網站設計需求,進階版 Elementor 功能更加強大,幾乎能完成你想要的需求。參考 Elementor 進階教學。
Elementor 和熱門主題像是 Astra、OceanWP、Soledad 等 .. ,有著完美的項目整合,這讓它的聲勢更上一層樓。
小犬網站就是使用 Astra 主題 + Elementor 頁面編輯器組合,進行網站建置。
除了 Elementor 還有其他推薦項目嗎?
除了 Elementor 頁面編輯器以外,Divi 是我接下來的選擇標的。更多完整 Divi 中文教學。
原因 Divi 本身的生態系豐富,雖然他們沒有提供免費版試用,但是購買服務後,等於是享用 Elegant Themes 旗下的所有軟體服務(有多功能主題、電子報行銷軟體、社群工具等 ..),是非常值得的投資。
再來,Divi 有提供終生方案,這在 WordPress 頁面編輯器領域中,是比較少看到的現象。
簡單來說,只需購買一次,終身就享有免費升級&優先客服支援(而且可用在無限個網站)。
以上只是個人的使用經驗,依照每個人體驗會有所不同,在這裡僅此分享而已。
我喜愛的頁面編輯器,前三名選擇:
常見問題
這裡統整了一些 WordPress 頁面編輯器的常見問題,希望能同時幫助到大家,如下。
文章提到的頁面編輯器,我的佈景主題可以用嗎?
文中提到的頁面編輯器,都能應用在不同主題上,因為它只是個 WordPress 外掛,就跟其他外掛類型一樣。
但這邊有些額外的小建議,如果你用的主題有特別提到,和哪個頁面編輯器支援度比較,會建議就用那款外掛(像是 Astra 主題,就有提供多個 Elementor 或是 Beaver Builder 相關模板)。
還有一種情況是,如果主題有內建自家的頁面編輯器,像是 Newspaper 的 TagDiv
Composer、Avada 的 Avada Builder、Flatsome 的 UX Builder 等 ..。
完整主題教學,可參考 Newspaper 教學、Avada 教學、Flatsome 教學。
如果是這樣,會建議直接使用內建的,就不需再額外安裝其他的頁面編輯器,因為自家旗下的產品,彼此整合度一定是最高。
使用 WordPress 頁面編輯器,可以做什麼事呢?
大部分頁面編輯器,都會提供多種模板 or 區塊樣式,可直接點擊套用,就能馬上完成頁面設計,就不用從零製作,非常方便。
而且有提供多種元素功能,可簡單拖曳元素&視覺化排版,能完成絕大部分的網頁製作。
Elementor 和 Divi 哪個比較好?
不得不說,這兩個頁面編輯器都真的很棒(其實我都有買),但主要依照使用者的習慣挑選。
以我自己來說,我比較喜歡自由搭配網站上的所有配置,所以選擇了 Astra 主題+Elementor 頁面編輯器的搭配。
但有些 WordPress 玩家,比較喜歡都用同一家的工具,覺得這樣比較省力省時,而且不太用考慮一些其他的配置,或是單純就是喜歡 Divi 的風格,就會優先選擇它。
WordPress 學習資源
學習網站架設+網路行銷的過程中,或許會遇到一些解決不了問題,可以在下方留言給我,我會盡力協助解答!
接下來,額外分享 3 項實用資源,可有效幫助大家做學習。
資源一:WP 高手架站課(線上課程)
這門 WordPress 高手架站課 濃縮了犬哥多年在網頁設計的實戰經驗,從網頁設計觀念、WordPress / WooCommerce 後台操作、熱門主題.外掛教學、品牌網站 / 部落格 / 電商網站,3 大類型網站建置方法等 .. 豐富內容,一次教會你。
課程內容非常的紮實(長度超過 20 小時)。如果你剛學習自架網站,這門課程可以讓你用最快的速度,就學會這項技能!
點擊下面了解課程,立馬擁有自己的品牌網站,並增加網路曝光度!
資源二:SEO 排名飆升課(線上課程)
網站建立完畢後,但卻沒有流量怎麼辦?或是只能靠花錢投廣告才會有訂單?
這門 SEO 排名飆升課,教你掌握關鍵字策略、SEO 文章撰寫、多種實戰 SEO 技巧、透視對手 SEO 策略、SEO 必備軟體教學、最新 AI SEO 應用等 ..,大幅提升行銷能力。
點擊下面了解課程,帶你衝上 Google 排名第一頁,大量提升網站營收和訂單!
資源三:犬哥數位(專業 WordPress 網頁設計公司)
如果你沒時間自己架站、或是遇到解決不了的網站問題。歡迎洽詢 犬哥數位(WordPress 網頁設計公司),請專家製作會更有效率!
資源四:更多犬哥教學資源
如果你在操作過程中遇到問題,可以加入 犬哥研討社(目前有超過 9000+ 團員)。除了有網友一同幫你解惑外,犬哥團隊也會同步在社團幫助大家。
如果你想學更多網頁設計、數位行銷知識,可關注 YouTube 頻道,或是歡迎追蹤 犬哥網站 IG。
請問一下,所以你字下面有黃色標註的,這是使用Elementor這個編輯器嗎? 謝謝
嗨,這是區塊編輯器的預設功能,調背景顏色就可以了。
不知道站長對Brizy的評價如何?他好像也有終生的
嗨,Brizy 這款最近也滿多站長在使用,評價也不錯,但是它算是比較新的一款,之後我也會把它放在推薦裡面。
請問如果是使用Themify 頁面編輯器編輯文章的話,會導致網站速度變慢嗎 ? 還是一定要用區塊編輯器呢 ?
嗨,通常用 WordPress 內建的區塊編輯器速度,大致上都會比頁面編輯器快,但缺點是功能性比較不足,需要安裝一些周邊外掛擴充能力。
兩種方法都很多人用,只是看自己比較喜歡哪一種作法~
犬哥好
問一下 我之前已註冊Bluehost主機,他們有提供主題版面我有稍微編輯一下。
今天我下載第三方Thomeforse其中一個主題並且認證了。卻發現網站主題還是以BH的為主,TF下載的主題只能修改邊邊角角;簡單說我套用TF主題後,主視覺仍然保留事BH的。
要怎樣調整修改呢?謝謝
嗨,Alucard Chen,
請先確認你購買的方案是否為「 WordPress Hosting 」,如果是購買其他主機方案,使用的架站軟體可能就是 Bluehost 自行開發的架站軟體唷!
另外,因為不清楚你使用的是哪一款主題,每一款主題的設計方式都不同,建議有疑問的話,可以詢問主題開發商,半年內都在技術支援的服務期間,可以更快獲得解答唷:)