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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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


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

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

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

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

請參考 WordPress 外掛安裝,有詳細的教學流程。


3. 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 軟體終身更新和優先的客戶服務。


4. Elementor

wordpress外掛推薦 :elementor 頁面編輯器外掛

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

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

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

Elementor 形象教學示範

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

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

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

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

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

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

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

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

方案評價

Elementor 有提供有限功能的免費版方案,但通常做不了太多事情,這裡就不列入討論。

Elementor 真正能力要升級進階版,才能全部展現出來,像是多種專業區塊功能、上百種區塊樣板、多種網站樣板、WooCommerce Builder(購物網站編輯器)..。

Elementor 有個人版、加強版、專家版這 3 種方案,不同方案的差別是「 使用網站的數量 」

如果你只有一個網站會使用,只需購買最低的方案即可,不需增加額外負擔。

產品定價

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

如果你有多個網站需使用 Elementor,再挑選進階的方案即可。


5. 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 族或是網頁設計公司,需統一管理不同網站的頁面編輯器功能,再使用進階方案即可。


6. 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 所有的產品服務。


7. 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 元台幣),就可下載啟用此外掛。


8. 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 頁面編輯器,再升級成高階方案即可。


9. WPBakery

WordPress 頁面編輯器 :WPBakery

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

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

WPBakery 頁面編輯器範例

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

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

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

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

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

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

方案評價

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

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

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

方案費用

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

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


10. 綜合比較整理

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

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

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

我的第一推薦是 Divi 品牌,因為它同時擁有 WordPress 佈景主題和頁面編輯器外掛,都包含在任一種方案裡,而且兩者完美兼容。

這代表你購買使用 Divi 後,可能不需再額外購買 WordPress 佈景主題,這會讓你節省一些錢。

再來,最大的原因是 Divi 有終身方案,一次性合理的費用價格,就能享用永久的軟體更新和優先客戶支援,這是選擇它的最大原因

我的 WordPress 頁面編輯器第二選擇,會是使用 Elementor,原因是它在台灣有成熟的社群,你可以加入並解答疑問。

還有 Elementor 的費用很合理,可讓你使用極少的費用就能體驗功能。

再來,Elementor 不同方案只差別在使用的網站數量,如果你只有一個網站需經營(大多數人都這樣),這代表只需租用最低的費用方案即可。

唯一可惜的是 Elementor 不提供終身方案,對我來說這是它的唯一缺點,所以 Divi 才是我的第一選擇。

我的第三名是 Visual Composer,原因是它整體流程設計的很容易,用過幾次就能很快做出一個網站,所以我給的評價不錯。

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

我的頁面編輯器,前三名選擇:

  1. Divi
  2. Elementor
  3. Visual Composer

常見問題整理

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

已購買的佈景主題,有內建 WordPress 頁面編輯器,那還需要購買嗎?

如果你的 WorddPress 主題 有內建頁面編輯器,像是 NewspaperAvadaFlatsome ..

不會建議再額外購買頁面編輯器外掛,因為這會有點多此一舉。

而且自家商品的整合度,通常會比額外再購買的外掛還來的好。

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

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

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

所以如果你預算足夠,剛好喜歡的 WordPress 頁面編輯器有終身方案,會建議選擇此方案,讓你一勞永逸。


WordPress 學習資源

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

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

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

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

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

我是站長小犬,長期關注:WordPress 網站架設、WordPress 後台教學、WordPress 佈景主題、WordPress 外掛、網路行銷等 ..:)

發表迴響