WordPress頁面編輯器 :最佳視覺化設計外掛(2020)

WordPress頁面編輯器 :最佳視覺化設計外掛(2021)

這是一篇完整的「 WordPress頁面編輯器 」推薦,協助你快速網頁設計。

你正在尋找 WordPress 視覺化編輯器,能用拖放方式就完成網站嗎?

使用頁面編輯器的好處是,你不需會任何的程式技術,就能完成專業的客製化網站製作。

這篇文章,我會推薦幾款知名的「 WordPress頁面編輯器 」外掛,如下。

如果準備好了,我們就開始吧:)


1. 為什麼要使用 WordPress 頁面編輯器?

WordPress 頁面編輯器 :為什麼要使用頁面編輯器?

WordPress 是知名的網頁製作平台 / 網站管理系統,全球大約有 30% 以上是使用 WordPress 建置網站,這是個極大的數字,展現它的獨特性。

在一切的開始,當你的 WordPress 安裝 完成,可能有先安裝免費版的 WordPress 主題,當作你的第一個網站主題。

隨著時間經營,你的個人或是公司形象網站發展,有更多客製化網頁需求,卻發現網站功能卻無法滿足。

通常把主題更換為 WordPress 最佳佈景主題,會是比較常見的解決問題方法。

但假如你喜歡你現有的主題,不想就這樣更換它,但又想強化網站設計功能,這要怎麼做?

此時,安裝「 WordPress頁面編輯器 」外掛,就會是很好的解決方案。

因為它可用最快時間強化 WordPress 版面配置和網站功能性,這也是本文推薦的方法。

接下來,我用外掛知名度、外掛效能、外掛功能、視覺設計,這幾個挑選標準,幫你選出最佳的 WordPress頁面編輯器 。


2. 如何安裝 WordPress 網站外掛?

WordPress安裝 :安裝完成後,需準備?

WordPress 網站外掛 有幾種安裝方法,如果是免費版外掛,通常在 WordPress 後台搜尋外掛,就能直接安裝。

如果是進階版外掛,例如從 themeforest 外掛森林 或是任何第三方平台上所購買的外掛,就需使用 WordPress 上傳功能或是 FTP 功能,進行外掛安裝。

不知道如何安裝外掛,可以參考 WordPress 外掛安裝,有詳細的教學流程。


Elementor

Elementor 頁面編輯器
Elementor 頁面編輯器

Elementor 是全球知名的 WordPress 頁面編輯器,全球已經有 500w+ 次外掛下載量,可用在任何的佈景主題上,且和 WordPress 知名佈景主題 有完美兼容性。

你不需會任何程式基礎,只要用區塊拖曳方式,就能客製化形象網站設計。

有關任何的頁面佈局、新增區塊功能、編輯區塊內容等 ..,都將變得更加簡單。

Elementor 形象教學示範

Elementor 有多種功能區塊,是建置網站的好幫手,當你心中簡單構圖完成,接下來只要拖放區塊,並放置在網頁上即可完成設計。

Elementor 多功能的區塊元素
Elementor 多功能的區塊元素

Elementor 有多種區塊模板和網站樣板,點擊按鈕就可套用,再從中進行修改自己喜歡的設計,可節省大量的建置網站時間。

Elementor 多種網頁佈局,選你所愛

購物網站盛行的時期,或許你想架設購物網站,Elementor 對於 WooCommerce 有良好的支援。

並為此開發了 WooCommerce Builder(購物網站編輯器),除了一般頁面設計,你也能設計客製化的購物網站頁面。

像是添加購物車按鈕、產品價格、產品圖片和說明、相關產品、產品庫存提醒等 .. ,如下圖。

WordPress頁面編輯器 :Elementor 的 WooCommerce Builder 購物網站區塊功能(部分功能)
WooCommerce Builder 購物網站功能區塊(部分功能)

方案評論

Elementor 有提供免費版方案可使用,你可以先當體驗,如果感覺不錯用再且有更多設計上的需求,再升級為進階版即可。

Elementor 進階版,有 90 多個專業元素功能、300 多種進階模板、主題生成器、彈出式廣告生成器、WooCommerce Builder(購物網站編輯器)等 ..,有更多功能可以使用。

Elementor 進階版方案,分為個人版、中階版、專家版這 3 種方案,不同方案的差別是「 使用網站的數量 」

如果你只有一個網站會使用,只需購買最低的方案即可,依此類推。

產品定價

Elementor 個人版方案,起手價格是 $ 49 美元 / 年(約 $1,500 台幣 / 年),算是滿平價的費用,可應用在一個網站上,並享用它的全部功能。


Beaver Builder

wordpress外掛推薦 :Beaver Builder 頁面編輯器

Beaver Builder 是知名的 WordPress頁面編輯器 ,可愛海貍圖示是它的經典圖示,有很棒的客服支持和討論社群。

你同樣不需會寫任何程式代碼,只用拖放方式選取區塊功能,然後放置在指定位置,即可完成網頁設計。

Beaver Builder 頁面編輯器功能示範

Beaver Builder 有豐富的區塊模板和頁面樣式,只需選擇喜愛的模板,然後點擊套用就可以。

你甚至可以將自己的設計,另存為全站共用模板,方便你多次使用。

WordPress頁面編輯器 :Beaver Builder 的多種網站樣板
Beaver Builder 的多種網站樣板

Beaver Builder 的頁面編輯器,可用在任何的佈景主題上,且和多數的 WordPress 知名佈景主題 有完美兼容。

它將內容編輯區分成一般編輯器(WordPress 預設值)和 Beaver Builder 編輯器,這代表哪天你想停止使用,也不會丟失網站內容。

WordPress頁面編輯器 :Beaver Builder 編輯器

方案評論

Beaver Builder 提供 3 種方案,分別是 Standard 標準版、Pro 專業版、Agency 機構版,每種方案都可應用無限制數量的網站

Standard 標準版 和 Pro 專業版,基本上兩者功能差不多,如果是新手入門頁面編輯器,可先從標準版開始

Agency 機構版適合個人 Soho 族或是網頁設計公司,如果你的預算足夠,此方案提供全局管理不同網站上的頁面編輯器,可自由調整功能,方便大量管理網站。

產品定價

Beaver Builder 的 Standard 標準版,費用是 $99 美元 / 年(約 $3,000 元台幣 / 年),就能使用它的絕大部分功能,可應用在無限數量的網站。

如果你是個人 Soho 族或是網頁設計公司,需統一管理不同網站的頁面編輯器功能,再使用進階方案即可。


WPBakery

WordPress 頁面編輯器 :WPBakery

WPBakery 是熱門的「 WordPress頁面編輯器 」外掛,全球有超過 430w+ 下載量,這是個龐大的數字。

它可應用在任何的佈景主題,幫助你視覺化網頁設計,你無需任何的程式能力,就能設計專業的網站。

WPBakery 頁面編輯器範例

WPBakery 的所見即所得頁面編輯器,讓你可以把腦海中想法,轉化成現實並轉化成網頁設計。

它的操作很簡單,你一樣只需用拖放方式,就可設計網站區塊佈局。

進行 WordPress 網頁製作,需要有多個區塊功能豐富網站頁面,WPBakery 內建有不同的功能元素,可滿足你大部分的需求。

wpbakery 頁面編輯器 :多種功能區塊列表(僅擷取部分功能)
多種功能區塊列表(僅擷取部分功能)

WPBakery 的多種專業網站樣板,同樣是它的特色之一,可快速導入引用網站模板,幫助你豐富整個網站設計。

wpbakery 頁面編輯器 :多種網頁設計佈局,可一鍵套用
多種網頁設計佈局,可一鍵套用

方案評價

WPBakery 沒有多餘的方案選擇,但這也來的更簡單容易。

WPBakery 有在 ThemeForest 外掛森林 銷售自家的頁面編輯器,至始至終一直在 WordPress 外掛銷售排行前幾名。

因為許多知名佈景主題,都是採用 WPBakery 做為預設編輯器,所以讓它的購買量一直高居不下。

方案評論

WPBakery 的定價費用,大約 $64 美元(約 $1,920 台幣), 就可享有軟體終身更新,和領先的客戶服務。

這是很划算的投資,相比較高額的網頁設計公司製作,這來的優惠很多。


Divi

WordPress頁面編輯器 :Divi 佈景主題和頁面編輯器

Divi 是先進的 WordPress 佈景主題和 WordPress 頁面編輯器開發商,它將兩者完美的結合再一起,憑藉的先進的程式開發技巧,讓你可很直覺的網站設計。

如果你已經有喜愛的佈景主題,也可以單獨使用 Divi 的 Divi Builder 頁面編輯器外掛。

Divi Builder 可用在任何的佈景主題上,且和 WordPress 知名佈景主題 有完美兼容性。

你一樣不需任何編碼知識,用拖放方式就能設計漂亮的網站頁面,像官網所描述的,視覺化設計和佈局排版都變得更容易。


Divi 可讓你視覺化設計

Divi 同樣有多種特效功能,能讓你自由調整畫面明暗度、視覺化風格、空間距離等。

Divi 特效功能設計

Divi 有多種區塊模板和完整的網站樣板,有商業風、線上開店平台、科技風、服務類型等 .. 多種主題風格。

你只需幾點擊按鈕,即可引用區塊樣板,或套用整個網站設計。

WordPress頁面編輯器 :Divi 多種佈景主題樣板
Divi 多種佈景主題樣板

Divi 對 Woocommerce 開店平台外掛有完美的支持,並提供多種線上開店的區塊功能,一樣用拖放方式即可放入頁面。

WordPress頁面編輯器 :WooBuilder 購物網站編輯器
WooBuilder 購物網站編輯器

Divi 旗下的產品有全功能佈景主題、Extra 部落格 / 雜誌主題、Divi Builder 頁面編輯器外掛、Bloom 行銷工具、Monarch 社群工具等 ..,參加它的方案,就能使用所有功能。

使用 Divi 會是個很棒的選擇,因為它能幫你做到很多事。

方案評論

Divi 的使用方案很簡單,它提供「 年租用方案 」和「 終身方案(一次性) 」,這兩種價格方案

兩種方案都能應用在無限數量的網站,費用也維持在合理範圍。

有個好處是,Divi 整體系列包含自開發的多功能 WordPress 佈景主題,且和旗下產品有完美兼容,這代表你可能不需再額外購買 WordPress 主題。

特別一提,終身使用方案在 WordPress 頁面編輯器市場中,是比較難得的收費方式

這代表你只需負擔一次性的小額費用(和外包網頁設計相比),就能終身享用所有 Divi 功能。

產品定價

Divi 的年租用方案,定價是 $89 美元 / 年(約 $2,700 台幣 / 年),可應用在無限數量的網站。

Divi 的終身使用方案,定價是 $249 美元(約 $7,500 台幣 / 終身),一次性費用即可終身使用,可應用在無限制數量的網站。

終身方案是一次性費用,購買之後隔年不會有額外費用,你可享有 Divi 軟體終身更新和優先的客戶服務。


Thrive Architect

WordPress 頁面編輯器 :Thrive Architect

ThriveThemes 是知名的 WordPress 佈景主題和網站外掛開發商,Thrive Architect 是它旗下的知名頁面編輯器。

Thrive Architect 主打用最快、最真實的視覺化設計方式,可將你的想法轉化成網站設計,參考下面影片會理解更多。

Thrive Architect 簡易示範影片

Thrive Architect 有設計上百種高轉化率頁面,可快速導入引用網站模板,幫助你達成想要的目的。

WordPress頁面編輯器 :Thrivethemes Architect 多種高轉化率頁面模板
Thrivethemes Architect 多種高轉化率頁面模板

多種 WordPress 區塊功能元素,是少不了的網頁設計編輯基礎,可用拖放式放置在你的網頁上,豐富你的網頁製作。

WordPress頁面編輯器 :Thrivethemes Architect 多種區塊功能元素(僅擷取部分功能)
ThriveThemes Architect 多種區塊功能元素(僅擷取部分功能)

Thrive Architect 支援響應式設計功能,能即時預覽不同尺寸螢幕的頁面,加速網頁設計流程。

或是針對不同螢幕尺寸,顯示或是隱藏功能區塊,幫助你不同裝置的網頁設計。

WordPress頁面編輯器 :支援手機響應式設計
支援手機響應式設計

方案評論

ThriveThemes 是知名的 WordPress 佈景主題和網站外掛開發商,它旗下有多種產品,像是 Theme Builder 主題編輯器、Architect 頁面編輯器、測驗編輯器、會員功能、評論功能 .. 。

本章提到的 Thrive Architect 頁面編輯器外掛,依照不同數量的使用憑證,採取不同的收費方案。

如果你只有單一網站需經營,只需租用最低價格方案(單一憑證),幫助你節省網站預算。

假如你有多個網站需製作,再依照需求升級使用方案即可。

額外一提, Thrive 提供 Thrive Membership 方案,可讓你一次享用所有開發功能,當然這會收取比較多的費用,一切按照你的需求而定。

方案費用

Thrive Architect 的最低價格,是單一憑證版方案(適用於一個網站),定價約 $67 美元 / 年(約 $2,000 元台幣 / 年),即可使用頁面編輯器服務。

如果你有多個網站需求,可往上選擇高階方案。

如果你對 Thrive 旗下的 WordPress 主題或外掛有興趣,你也可購賣 Thrive Membership 方案,定價大約 $ 19 美元 / 月(約 $600 元台幣 / 月)。

即可享用 Thrive 所有的產品服務。


Themify Builder

WordPress 頁面編輯器 :Themify Builder

Themify 是知名的 WordPress 佈景主題和網站外掛開發商,Themify Builder 是它旗下的知名頁面編輯器。

你同樣不需會寫任何程式代碼,只用拖放方式選取區塊功能,即可完成網頁設計,請參考示範影片會了解更多。

Themify Builder 頁面編輯器,網頁製作示範影片

Themify Builder 有多種現成專業的網頁設計佈局,可讓你在短短幾分鐘套用整個樣板,並完成網站。

WordPress頁面編輯器 :Themify Builder多種網站樣板
Themify Builder多種網站樣板

這是 Themify Builder 頁面編輯器的部分截圖,它沒有額外的複雜畫面。

只有簡單的網站功能區塊和版面配置,幫助你網站建置。

Themify Builder 頁面編輯器畫面
Themify Builder 頁面編輯器畫面

方案評論

Themify Builder 有兩種使用方法,第一種是購買 Themify 自家開發的佈景主題(像是 Ultra),因為主題預設有內建 Themify Builder 頁面編輯器功能。

另一種是單獨購買 Themify Builder 頁面編輯器外掛,再配合任何的 WordPress 佈景主題,皆可順利運作。

方案費用

Themify Builder 有提供免費版下載,但是功能性不太足夠,這邊先不提及。

Themify Builder 頁面編輯器外掛下載,定價約 $39 / 美元(約 $1,200 元台幣),就可下載啟用此外掛。


Visual Composer

WordPress 頁面編輯器 :Visual Composer

Visual Composer 是知名老字號的「 WordPress頁面編輯器 」外掛,它優質的視覺化頁面編輯功能,讓它在全球有許多擁護者。

它可應用在任何的佈景主題上,且和 WordPress 知名佈景主題 有完美兼容性,就算你更改主題,也不會丟失設計版面。

Visual composer 頁面編輯器範例影片

Visual Composer 提供多種專業的功能區塊,你可自由組裝屬於你的網站設計,不論是社群連結、網站圖標、WooCommerce 電子商務功能支持 .. ,都任你套用。

Visual Composer 頁面編輯器,多種網站區塊功能(僅列舉部分功能)
Visual Composer 頁面編輯器,多種網站區塊功能(僅列舉部分功能)

Visual Composer 有提供多種免費版或進階版的網站樣板,只需找到你喜愛的,然後按下按鈕即可套用。

Visual Composer 多種網站樣板套用
Visual Composer 多種網站樣板套用

Visual Composer 同樣支援手機版響應式設計,你可以在不同畫面裝置,進行不同的頁面設計,或是調整指定區塊在不同畫面的顯示或隱藏。

Visual Composer 支援手機畫面預覽,方便響應式設計
Visual Composer 支援手機畫面預覽,方便響應式設計

方案評論

Visual Composer 有提供免費版方案,如果想先試用看看,也可先下載玩玩看。

不同的方案所擁有的功能都大致相同,它的唯一差別是在「 使用的網站數量 」。

方案費用

如果你只有經營一個網站,它的最低費用是 $49 美元 / 年(約 $1,500 台幣),適用在單一網站,你可用最少的費用享用所有功能。

如果有多個網站需使用 Visual Composer 頁面編輯器,再升級成高階方案即可。


綜合比較整理

WordPress 頁面編輯器 :綜合比較整理

WordPress 頁面編輯器外掛,可讓你自由的設計網站頁面,是經營個人或公司品牌網站,不可或缺的好東西。

看完以上的推薦,可能你正在想到底哪個適合自己?在實際用過多種 WordPress 頁面編輯器後,我發現。

最推薦的是哪種頁面編輯器呢?

第一推薦是使用 Elementor,因為整題功能齊全完整,且介面流程設計的非常容易上手,加上有提供免費版方案,可讓網站主可做基本的頁面設計。

如果有進一步的網站設計需求,進階版 Elementor 功能更加強大,幾乎能完成你想要的需求。

Elementor 和熱門主題像是 Astra、OceanWP、Soledad 等 .. ,有著完美的項目整合,這讓它的聲勢更上一層樓。(Astra 公司本身就是 Elementor 的愛好者)

我也使用了 Astra 主題 + Elementor 編輯器組合,寫了一篇 形象網站架設 方便你快速上手。

在 WordPress 領域提到頁面編輯器,Elementor 幾乎是第一品牌,所以也是我的第一推薦。

除了 Elementor 還有其他推薦項目嗎?

不一定每個人都喜歡一樣的事物,這是正常的。

除了 Elementor 頁面編輯器以外,Beaver Builder 和 WPBakery 是接下來的選擇標的。

首先來談論一下 Beaver Builder,視覺拖放式介面很容易上手且功能齊全,對熱門主題像是 Astra、OceanWP 等 .. 也有完美的項目整合。

加上可愛的小海貍品牌 Logo,也擄獲不少使用者的心:)

再來是 WPBakery,它最特別的地方是一次買斷,可永久享用軟體升級支援,這和其他頁面編輯器的收費模式不太一樣,這對於預算有限的網站主,是很好的選擇。

當然,它的整體能力也會比 Elementor、Beaver Builder 來的差了點,畢竟一分錢一分貨,但 WPBakery 確實是預算有限的好選擇。

以上只是個人的使用經驗,依照每個人體驗會有所不同,在這裡僅此分享而已。

我的頁面編輯器,前三名選擇(可依需求選擇):

  1. Elementor
  2. Beaver Builder
  3. WPBakery

常見問題整理

這裡統整了一些 WordPress 頁面編輯器的常見問題,希望能同時幫助到大家,如下。

文中提到的頁面編輯器,我的佈景主題可以用嗎?

文中提到的頁面編輯器,都能應用在不同主題上,因為它只是個 WordPress 外掛,就跟其他外掛類型一樣。

但有些額外情況,這邊也做個分享,如下。

有些主題會特別強調和某些頁面編輯器兼容,像是 Astra 主題就特別推薦 Elementor、Beaver Builder 這兩款,還為此兩款製作了樣板頁面(和多種特別設定),讓用戶可直接套用。

如果是此狀況,就建議用主題推薦的頁面編輯器,因為使用體驗會更好。

還有一種情況是,主題有內建自家的頁面編輯器,像是 Newspaper 的 TagDiv Composer、Avada 的 Avada Builder、Divi 的 Divi Builder ..。

如果是這樣,就建議直接使用內建的,就不需再額外安裝其他的頁面編輯器,因為自家旗下的產品,彼此整合度一定是最高。

首次購買 WordPress 頁面編輯器後,如果第二年不再續約還能使用嗎?

幾乎是可以。但這只代表你買了現有的版本使用權。

如果 WordPress 進行重大版本更新(這頻率很少),導致原來的 WordPress 頁面編輯器外掛無法兼容,那將會無法使用。

否則,使用者付費是合理的,軟體公司有收入才能持續提供好產品,給消費者使用。


WordPress 學習資源

學習 WordPress 網站架設流程中,或許會遇到一些解決不了問題,你可以在下方留言給我,我會盡力協助解答。

或是給我一些鼓勵也可以,讓我更有動力提供學習資源給大家,我會非常感謝:)

當然,如果怕問題描述不清楚,可以加入 WordPress 教學時光屋 – 小犬網站 ,我同步也會在社團中幫忙。

小犬網站:wordpress教學社團
小犬網站:wordpress教學社團

希望這對你有所幫助,祝架站順利啦。

發表迴響

Scroll to Top