2022 年 10 個最佳 WordPress 頁面構建器插件比較
已發表: 2016-09-25試圖為您的網站決定最好的 WordPress 頁面構建器?
我親身體驗了10 個不同的 WordPress 頁面構建器,以幫助您做出決定。 是的——我使用了其中的每一個——這不僅僅是基於營銷副本的列表。
我將在五個類別中客觀地比較這 10 個 WordPress 頁面構建器:
- 界面——界面是如何工作的,它是否可以輕鬆構建漂亮的頁面?
- 包含的小部件/模板——你有什麼選擇來構建你的頁面?
- 樣式選項——如何為頁面上的元素設置樣式?
- 其他值得注意的功能——頁面構建器是否提供任何值得注意的獨特功能?
- 鎖定——如果你想禁用插件會發生什麼? 您總是會丟失自定義樣式,但有些頁面構建器會留下乾淨的代碼,而另一些則不會。
對於每個類別,我會給頁面構建器打 5 分。
然後,最後,我會將所有內容放在一起,並推薦我認為最好的 WordPress 頁面構建器。
以下是我將介紹的 10 個 WordPress 頁面構建器——您可以單擊以跳轉到特定的頁面構建器:
- 元素
- 海狸生成器
- 迪維生成器
- 興旺建築師
- SiteOrigin 頁面生成器
- WPBakery 頁面生成器
- 主題生成器
- 輕快的
- 視覺作曲家
- WP頁面生成器
或者您可以直接前往比較表。
1.元素
Elementor 最初於 2016 年推出,是該列表中較年輕的頁面構建器之一。 但即使起步較晚,Elementor 在 WordPress.org 上的活躍安裝量也很快超過 3,000,000,這使其成為最受歡迎的頁面構建器,至少按 WordPress.org 的數字來看是這樣。
它聲名鵲起的是快速、無故障的視覺界面、靈活的樣式選項以及強大的其他功能,如完整的主題構建。
雖然它最初只是一個頁面編輯器,但高級版 Elementor Pro 現在讓您可以做的不僅僅是頁面構建。 最顯著的兩個特點是:
- Theme Builder – 使用同樣方便的 Elementor 界面設計您的整個主題。 這包括您的頁眉、頁腳、存檔頁面、單個帖子頁面、WooCommerce 產品/商店頁面、自定義帖子類型模板等。您可以獲得常見元素的專用小部件,甚至可以從自定義字段動態插入內容。
- Popup Builder – 使用完整的 Elementor 界面設計靈活的彈出窗口。 您可以包含所有常規的 Elementor 小部件,它允許您創建電子郵件選擇加入彈出窗口、聯繫表單彈出窗口、登錄彈出窗口等。
這兩個新增功能確實幫助 Elementor 在競爭中脫穎而出。 儘管主題構建正在成為一種流行的功能,但彈出窗口構建器仍然非常獨特。
閱讀我們的 Elementor Pro 評論。
價格:免費核心版。 Elementor Pro 起價為 49 美元,可在單個站點上使用。
接口 – 5/5
Elementor 界面分為兩個核心部分,第三個區域用於一些較小的設置:

- 1 – 這是您設計的實時預覽。 它看起來與您的訪問者將看到的完全一樣。 您還可以在此界面中直接鍵入文本,以及拖放各種元素以重新排列它們。
- 2 – 這顯示了您可以使用的元素列表。 您只需將它們拖過來即可。 當您選擇單個元素或部分時,您將在此處設置樣式。
- 3 – 這些可幫助您訪問響應式預覽、撤消/重做更改和其他較小的功能。
例如,這裡看一下如何拖動文本小部件,然後只需在頁面上鍵入(內聯編輯)即可更改文本:

使用 Elementor Pro,您可以使用相同的界面來設計主題和彈出窗口。 您還可以獲得專門的小部件/功能來幫助您做到這一點。
包含的小部件/模板 – 5/5
在免費版本中,Elementor 包含28 個免費小部件。 您還可以使用所有核心 WordPress 小部件。 專業版又增加了約 30個小部件,在專業版中總共為您提供58 個小部件:

免費版還附帶約 40 個免費模板。 專業版增加了數百個額外的模板。
模板有兩種格式:
- 頁面– 您只需要編輯的整頁設計。
- 積木——您可以像樂高積木一樣拼湊的各個部分。
您還可以將自己的設計保存為模板,以便以後重複使用。
樣式選項 - 5/5
當您單擊任何部分、列或小部件時,Elementor 在左側邊欄中提供三個樣式選項卡。

確切的選項取決於您正在編輯的元素,但通常 Elementor 提供了任何頁面構建器中最深的一組樣式選項。
除了顏色、背景和排版等基本內容之外,您還可以控制更高級的設置,例如:
- 自定義邊距/填充。
- 自定義 CSS 類/ID。 使用 Elementor Pro,您可以直接將實際 CSS 樣式添加到單個元素。
- 響應式控制。 您可以在特定設備上顯示/隱藏元素。
Elementor 最近還添加了自定義定位,這使得將小部件放置在頁面上的特定位置變得更加容易。
其他顯著特點 – 5/5
Elementor Pro 中提供了這些功能:
- 全主題建築。 您可以使用相同的 Elementor 界面來構建模板部分,例如頁眉、頁腳、單曲和檔案。 基本上,您可以使用 Elementor 構建整個主題。
- WooCommerce builder – 設計您的 WooCommerce 產品和商店頁面。
- 彈出式建築。 設計靈活的彈出窗口並將它們定位到特定內容。
- 表單集成。 將表單小部件連接到流行的電子郵件營銷服務(或 Zapier 以獲得更大的靈活性)。
- 全局小部件。 這些使您可以跨多個頁面重用一個公共元素,並通過僅更新全局小部件來編輯全局小部件的所有實例。
- 嵌入任何地方。 通過小部件或簡碼在其他區域使用 Elementor 模板。
鎖定 – 5/5
如果您曾經停用 Elementor,它會留下乾淨的代碼。 例如,如果您在 Elementor 中有一個 <h3> 標頭,則在停用 Elementor 後您仍然會有一個 <h3> 標頭 - 它只會使用您的主題樣式。
2. 海狸生成器
Beaver Builder 長期以來一直是頁面構建器市場的中堅力量。 它輸出乾淨的代碼(用於頁面構建器),受到最終用戶和實施者的歡迎,並以新功能和更新的形式定期受到關注。
還有一些官方附加組件可以與它配對以獲得更大的靈活性 - 特別是可選的 Beaver Builder 主題和 Beaver Themer 擴展。
閱讀我們的 Beaver Builder 評論。
價格:有限的免費版本。 起價 99 美元,可在有限的網站上使用。
接口 – 5/5
Beaver Builder 為其前端可視化構建器提供了獨特的界面。 您從右側的側邊欄完成大部分工作。 但是這些側邊欄選項僅在您單擊頂部欄中的按鈕時才會出現,因此可以隨時查看全屏預覽:

- 1 – 單擊此按鈕以打開側邊欄區域
- 2 – 這是您設計的實時預覽
Beaver Builder 最近添加了內聯文本編輯,這意味著您可以直接在頁面上鍵入以編輯文本或使用出現的彈出窗口:

老實說,在彈出窗口中使用內聯編輯有點尷尬。 但是您可以輕鬆地將編輯器固定到側邊欄以解決該問題。
包含的小部件/模板 – 4/5
在免費版本中,Beaver Builder 僅允許您訪問6 個模塊,但您也可以使用標準的 WordPress 小部件。
另一方面,高級版可讓您訪問30 個模塊。 這些模塊也都是模塊化的,因此您可以根據需要啟用或禁用它們。
在高級版中,您還可以訪問約 56 個頁面模板,以及將自己的設計保存為模板的能力。
樣式選項 - 5/5
要設置模塊和部分的樣式,您可以:
- 使用默認彈出窗口
- 將窗口固定在一邊以創建側邊欄(您可以在下面的示例中看到)。
確切的選項取決於模塊,但通常 Beaver Builder 可以讓您很好地控制元素,包括自定義間距和響應式控件。
Beaver Builder 還提供了一個非常獨特的切換功能,可讓您根據用戶是否登錄來顯示或隱藏各個模塊:

其他顯著特徵 – 4/5
- 海狸主題。 雖然這是一個單獨的擴展,但它添加了完整的主題構建功能,如 Elementor。
- 白標。 如果您正在為客戶構建網站,您可以輕鬆地為 Beaver Builder 貼上白標。
- 海狸生成器主題。 此可選主題使您可以更好地控製網站的外觀。
雖然獨特的功能很好,但我要強調一點,因為您必須支付更多費用才能獲得它們。
鎖定 – 5/5
與 Elementor 一樣,Beaver Builder 留下了 100% 乾淨的代碼和正確的 HTML 格式。
3. Divi Builder
Divi Builder 是來自優雅主題的流行高級頁面構建器。 雖然它最常用作 Divi 主題的一部分,但 Divi Builder 也是一個獨立的插件,您也可以將其與其他主題一起使用。
與前兩個頁面構建器不同,Divi Builder 允許您使用可視前端界面和後端界面編輯內容,儘管大多數用戶可能更喜歡前端界面。
在最新版本 Divi 4.0 中,Divi 還添加了完整的主題構建支持,在這方面與 Elementor 和 Beaver Builder 相提並論。 也就是說,您現在可以使用 Divi 來設計您的頁眉、頁腳、模板等。
閱讀我們的 Divi Builder 評論。
價格:作為 89 美元優雅主題會員的一部分提供
接口 – 5/5
Divi Builder 的後端界面如下所示:

但大多數時候,您將使用前端可視化界面。 Divi Builder 絕對是獨一無二的。 我個人不是粉絲,但我認識很多喜歡它的人,所以我不會因此而扣分。
基本上,不是任何類型的側邊欄,而是彈出窗口和浮動按鈕。 您可以在下面看到添加模塊的示例:

與前兩個頁面構建器一樣,您也可以使用內聯編輯直接在頁面上編輯文本:

與其他一些頁面構建器插件使用的側邊欄相比,您是否更喜歡這種方法取決於您。
包含的小部件/模板 – 5/5
Divi Builder 包括46 個模塊,您可以使用它們來構建您的設計:

您還可以訪問分佈在 40 個不同佈局包中的大量316 個預構建模板,以及將您自己的設計保存為模板的能力:

樣式選項 - 5/5
與 Beaver Builder 一樣,Divi Builder 允許您從彈出窗口中設置元素的樣式,如果需要,您可以將其固定到側面。
Divi 的標誌之一一直是它為您提供了多少樣式控制。 在三個不同的選項卡中,您可以配置各種設置,包括響應式控件、自定義間距等等。
您甚至可以將自定義 CSS 添加到主元素或主元素之前/之後。 CSS 編輯器甚至包括基本的驗證和自動完成功能! 您還可以直接從編輯器中打開顏色選擇器:

總而言之,Divi Builder 確實通過其樣式選項突破了界限 - 這是好東西。
其他顯著特點 – 5/5
- 主題構建- 使用 Divi Builder 界面設計您的整個主題。
- A/B 測試。 最好的附加功能之一是 Divi Builder 的內置 A/B 測試系統。 沒有其他頁面構建器可以如此輕鬆地在核心中拆分測試。
- 迪維主題。 將 Divi Builder 與 Divi 主題配對後,您可以完全控製網站的外觀。
- 用戶訪問控制。 Divi Builder 包括強大的基於角色的訪問控制。
- WordPress 定制器控件。 您可以使用本機 WordPress 定制器自定義某些元素的外觀。
鎖定 – 3/5
Divi Builder 的批評之一一直是它基於簡碼。 這意味著如果您停用它,它將在您的內容中留下一堆短代碼。
雖然這有點令人沮喪,但現在存在諸如 Shortcode Cleaner 之類的插件,這不再是一個問題。 您將丟失格式(如 <h3> 標記),但不會丟失內容本身。
4. 興旺建築師
Thrive Architect 是曾經的 Thrive Content Builder 的改進版本。 新界面與 Elementor 的界面有很多相似之處,稍後您會看到。
儘管任何人都可以使用它,但它特別受博客作者和聯盟營銷人員的歡迎,因為它專注於轉化率。 我個人喜歡 Thrive Architect 的一件事是它的默認樣式開箱即用。
閱讀我們的 Thrive Architect 評論。
價格:它是 Thrive Suite 的一部分,每月收費 19 美元(按年計費)。
接口 – 5/5
就像我說的那樣,您會看到 Thrive Architect 的界面和 Elementor 界面之間的一些相似之處(如果您想知道,Elementor 是第一位的):

這是同樣的想法,你有:
- 1 – 這是您設計的實時預覽。 它看起來與您的訪問者將看到的完全一樣。 您還可以在此界面中直接鍵入文本,以及拖放各種元素以重新排列它們。
- 2 – 這顯示了您可以使用的元素列表。 您只需將它們拖過來即可。 當您選擇單個元素或部分時,您將在此處設置樣式。
- 3 – 這些可幫助您訪問響應式預覽、撤消/重做更改和其他較小的功能。
是的——我從 Elementor 部分複制並粘貼了它。
當您單擊嵌套元素時,一個獨特的東西是麵包屑選擇器。 當您想在元素和部分之間快速跳轉時,此功能實際上非常方便:

Thrive Architect 還提供真正的內聯文本編輯。 事實上,在我看來,Thrive Architect 具有任何頁面構建器中最無縫的內聯編輯功能:

包含的小部件/模板 – 4/5
Thrive Architect 提供40 種不同的小部件,包括一些簡潔的小部件,如常青倒計時計時器。
Thrive Architect 還包括數百個模板,分為約 36 個“集合”。 您還可以將自己的設計保存為模板。
樣式選項 - 5/5
Thrive Architect 在處理樣式方面與 Elementor 有所不同。 Thrive Architect 沒有為您提供選項卡,而是將所有內容都包含在一個列中。
樣式選項相當詳細,包括響應式控件和自定義間距:

您還可以在頁面級別添加您自己的自定義 CSS。 對於單個元素,您只能分配 CSS 類或 ID。
其他顯著特徵 – 3/5
一個很酷的功能是設置頁面事件的選項。 這些使您可以根據某些觸發器顯示燈箱彈出窗口:

另一個很酷的事情是它與其他 Thrive Themes 產品的集成程度如何。 例如:
- 如果您使用 Thrive Optimize,則可以使用 Thrive Architect 運行 A/B 測試。
- 如果您使用 Thrive Leads,您可以輕鬆地將 Thrive Leads 的詳細選擇加入到 Thrive Architect 中。
鎖定 – 5/5
Thrive Architect 留下了 100% 乾淨的代碼,例如 Elementor 和 Beaver Builder。
5. SiteOrigin 頁面構建器
SiteOrigin Page Builder 似乎永遠存在。 在“永遠”中,它成功地在 WordPress.org 上收集了超過 100 萬次活躍安裝,這使其成為市場上最受歡迎的頁面構建器插件之一。
雖然 SiteOrigin Page Builder 比此列表中的大多數其他選項更輕巧,但它提供了出色的性能和大量有用的 CSS 控件。
價格:免費。 SiteOrigin Premium 套裝起價 29 美元
接口 – 3/5
SiteOrigin 有兩個界面,您可以使用它們來構建您的設計。
您擁有原始的後端編輯器:

您可以拖放塊或單擊特定塊進行編輯。
此編輯器為您提供最大的工作空間,但它缺少任何類型的實時預覽。
如果您確實想要實時預覽,SiteOrigin Page Builder 添加了實時編輯器模式:

這與此列表中的其他頁面構建器不同,因為您實際上無法在實時預覽中拖放元素。 但它也不僅僅是您設計的預覽,因為左側的抽象框和實時預覽之間存在一些交互性。
例如,您可以將鼠標懸停在實時預覽上的框上,側邊欄中的相關框也將突出顯示。 您還可以單擊實時預覽中的元素以打開其設置:

包含的小部件/模板 – 2/5
除了核心的 WordPress 小部件之外,SiteOrigin Page Builder 還提供了一個免費的 Widgets Bundle 插件,它添加了一組模塊化的23 個小部件供您使用。 它還包括大約 25個您可以使用的預構建模板,儘管與其他頁面構建器相比,這些模板非常簡單。
您無法將設計保存為模板,但您可以輕鬆克隆現有頁面,從而獲得類似的功能。
樣式選項 - 3/5
如果您不了解 CSS ,SiteOrigin Page Builder 的樣式選項與其他頁面構建器相比會令人失望。 但是,如果您習慣使用自己的 CSS,它們實際上會很有幫助。
除了添加 CSS 類和 ID,您還可以直接將 CSS 添加到單個元素,包括僅用於移動設備的 CSS 部分:

您還可以獲得很多非 CSS 樣式選項——只是沒有其他插件那麼多。 如果您是一名計劃使用自己的 CSS 的開發人員,您可能會在該類別中給該插件打 5 分。 但我將其降為 3,因為我認為這適合普通用戶。
其他顯著特徵 – 2/5
SiteOrigin Page Builder 非常輕量級,但您確實在 SiteOrigin Premium 捆綁包中獲得了一個基本的自定義帖子類型構建器。
鎖定 – 4/5
SiteOrigin Page Builder 留下了乾淨的 HTML 和簡碼的混合。 也就是說,一些小部件——比如文本編輯器——留下了乾淨的 HTML,而其他的——比如按鈕小部件——留下了簡碼。
6. WPBakery 頁面構建器
WPBakery Page Builder,以前稱為 Visual Composer,是另一個廣受歡迎的高級頁面構建器。 這種受歡迎程度的很大一部分來自於 WPBakery Page Builder 與 ThemeForest 中 99% 的主題捆綁在一起的事實。 但事實仍然是它在大量網站上使用。

價格: 64 美元
接口 – 3/5
與 Divi Builder 一樣,WPBakery Page Builder 為您提供可視化前端編輯和後端編輯。
如果需要,您可以使用後端接口:

但我認為大多數人在前端會更開心,看起來像這樣:

您可以使用彈出窗口插入新元素並為其設置樣式——沒有側邊欄區域,也沒有內聯編輯。
就個人而言,我不喜歡這種方法,但有些人喜歡它,因為當你沒有打開彈出窗口時,沒有什麼可以妨礙實時預覽。
包含的小部件/模板 – 3/5
WPBakery Page Builder 提供39 個元素,以及所有普通的 WordPress 小部件。 但是,其中一些元素將組合在另一個頁面構建器中,因此實際數字更像是~33 :

您還可以獲得約 86 個模板。 一些模板是整頁,而另一些只是部分。
樣式選項 - 3/5
與 Elementor 或 Divi Builder 之類的東西相比,WPBakery Page Builder 的樣式選項有點有限。
您確實可以很好地控制行:

但是單個元素的樣式選項更加有限。
如果您想使用自己的 CSS,您可以為單個元素添加自定義 CSS 類或 ID,或者您可以在頁面級別添加實際樣式:

其他顯著特徵 – 3/5
我不確定 WPBakery Page Builder本身是否有任何特別顯著的獨特功能。 但它確實擁有一個龐大的第三方附加社區。 雖然許多其他頁面構建器都有第三方加載項,但 WPBakery Page Builder 在數量上是獨一無二的,超過250 多個加載項。
鎖定 – 3/5
與 Divi Builder 一樣,如果您停用 WPBakery Page Builder,它會在您的內容中留下一堆簡碼。
7. 主題生成器
不出所料,Themify Builder 是 Themify 的頁面構建器產品。 Themify 將它與他們的許多主題捆綁在一起,為客戶提供輕鬆的自定義選項。 但您也可以將其作為獨立插件購買,並將其與任何主題一起使用。
價格:輕量級免費版本。 Pro 起價為 39 美元或 59 美元(取決於附加組件)
接口 – 4/5
與 Divi Builder 和 WPBakery Page Builder 一樣,Themify Builder 允許您使用後端和前端界面構建您的設計。
在 4.0 版中,Themify Builder 對界面進行了一些更新,這讓我的分數提高了一個檔次。
後端界面如下所示:

但同樣,大多數人可能希望使用前端界面,其工作方式如下:

- 1 – 讓您插入新模塊( 2 種不同的方式)
- 2 – 實時預覽
- 3 – 響應式預覽、撤消/重做和其他設置
沒有內聯編輯——您需要在彈出窗口中編輯文本:

儘管如此,新界面感覺比舊界面“活潑”得多,從而創造了更快的編輯體驗。
它還在設置彈出窗口上方添加了一個麵包屑樣式的選擇器,可讓您在模塊本身及其所在的行和列之間快速切換。
最後,我最喜歡的新增功能之一是只需在頁面上單擊和拖動即可添加邊距和填充。 這是一個巨大的升級,可以更輕鬆地調整頁面上的位置。 你可以看到我是如何通過拖動來調整邊距(粉色)的:

真的,我唯一的主要批評仍然是缺乏行編輯。
包含的小部件/模板 – 3/5
Themify Builder 提供了大約 32 個模塊(取決於您的附加組件),以及所有普通的 WordPress 小部件。
您還可以獲得大約 143 個整頁模板,以及較少數量的Rows ,它們基本上是預先構建的部分。
樣式選項 - 4/5
如果您單擊任何元素,您將獲得四個不同的選項卡來幫助設置它的樣式:
- 內容
- 造型(如下圖)
- 可見性(讓您在某些設備上隱藏元素)
- 動畫片

另一件好事是 Themify Builder 允許您自定義響應式斷點(儘管僅在站點範圍內)。
在 4.0 版中,Themify Builder 還添加了自定義形狀分隔符,可讓您從 25 種預設形狀中進行選擇。
其他顯著特徵 – 4/5
Themify Builder 的一件很酷的事情是它仍然允許您使用常規的 WordPress 編輯器,而其他頁面構建器則強制您使用頁面構建器界面來處理所有內容。 Themify Builder 內容在 WordPress 編輯器中被標記,以便您可以在其周圍放置內容:

此功能也適用於新的 WordPress 塊編輯器。
另一個不錯的新功能是能夠使用不同的分辨率進行響應式設計。 許多頁面構建器只是為您提供通用的“移動”和“平板電腦”預覽,但 Themify Builder 實際上可以讓您測試不同的設備。
鎖定 – 5/5
Themify Builder 在鎖定方面有了很大的改進。 現在,如果您停用它,它會以乾淨的 HTML 留下您的內容。
8. 輕快
Brizy 於 2018 年 4 月推出,是此列表中“最年輕”的頁面構建器之一。 但它來自知名開發商 ThemeFuse,並迅速獲得了 60,000 次活躍安裝。 此外,它只是為頁面構建的某些部分提供了一種獨特的方法,這使其成為一個有趣的產品。
開發人員也在快速發布新功能,並且 Brizy 已經支持主題和彈出窗口構建。
價格:基本免費版。 專業版起價 49 美元。
接口 – 5/5
Brizy 是一個專門的前端可視頁面構建器。
要構建您的頁面,您首先必須添加一個塊。 您可以使用空白塊,也可以從預先構建的部分塊中進行選擇:

一旦你開始添加元素,“獨特的界面”部分就會發生。 幾乎所有事情都內聯發生(包括打字),而不是在側邊欄或彈出窗口中自定義/樣式化元素。
看看我的意思:

結果是一種非常快速的頁面構建方式。
包含的小部件/模板 – 4/5
Brizy 目前提供26 種基本元素。 這個數字很小,但 Brizy 仍然是新的,所以希望它會隨著時間的推移而增加。
您還可以獲得某些功能的附加元素,例如構建標題時的菜單元素。
它還包括您可以使用的150 多個塊(模板部分)。
樣式選項 - 5/5
由於 Brizy 界面的工作方式,沒有像其他頁面構建器那樣的樣式選項的固定公式。
您可以展開邊欄以進行間距和響應式控件等高級設置:

您還可以在頁面級別添加基本樣式,這樣您就不必手動編輯每個元素:

但大多數情況下,您將使用內聯控件來設置元素的樣式,這為您提供了很好的控制權。
其他顯著特點 – 5/5
Brizy 的界面已經非常獨特,但自發布以來,它也迅速匯總了一個非常出色的功能列表:
- 主題生成器——使用 Brizy 設計頁眉、頁腳、檔案和單個帖子模板。 WooCommerce 支持正在進行中。 它還包括一個動態功能,可以從 ACF 和 Toolset 等流行插件中引入自定義字段內容。
- 彈出窗口生成器- 使用 Brizy 界面設計彈出窗口並使用條件來控制它們顯示的位置/時間。
- 跨多個頁面同步的全局橫幅。
- 與流行的電子郵件營銷服務(和 Zapier)集成。
鎖定 – 4/5
如果您停用它,Brizy 會留下大部分乾淨的 HTML 代碼。 但是它仍然在代碼中留下了一堆帶有 Brizy CSS 類的 div,這有點弄亂了間距並且需要清理。
9. 視覺作曲家
上面,我告訴過你 WPBakery Page Builder曾經被稱為 Visual Composer。 “過去”的原因是 Visual Composer 背後的團隊決定剝離 WPBakery Page Builder,以便他們可以使用 Visual Composer 名稱推出全新的產品。
這就是我們在本節中關注的內容。
雖然它來自同一個團隊,但它是一個完全獨立的產品。
主要區別在於 Visual Composer 是一個完整的網站構建器,而 WPBakery Page Builder 只是一個頁面構建器。
價格:有限的免費版本。 專業版起價 49 美元。
接口 – 3/5
當您使用 Visual Composer 創建新頁面時,您可以從幾種不同的畫布佈局中進行選擇。 你可以做一個完全空白的畫布,包括你的頁眉/頁腳等。
從那裡,您可以使用可視化界面設計所有內容:

界面流暢且無故障,但是缺少內聯編輯,這有點令人失望。 相反,您需要在邊欄中編輯文本:

此外,我沒有發現側邊欄中的選項可用,因為所有內容都是一個長列。 我更喜歡大多數其他頁面構建器使用的方法,即將設置劃分為選項卡。
包含的小部件/模板 – 5/5
當您第一次安裝 Visual Composer(或者如果您只是使用免費版本)時,您只能訪問幾個塊並且沒有模板。
不過不要上當——Visual Composer 有大量的元素和模板可供選擇——你只需要連接到 Visual Composer Hub 並下載你想使用的那些:

如您所見,種類繁多,從內容塊到集成等等,應有盡有。 模板也有類似的變化。
樣式選項 - 4/5
Visual Composer 的樣式選項很可靠,但沒有什麼特別突出的。 您將獲得您期望的所有功能,例如形狀分隔符、自定義間距、視差等。
您還可以根據用戶的設備獲得響應式控件來編輯設計,以及各種響應式預覽選項。
兩個不錯的功能是使行或元素具有粘性和控制列堆疊方式的選項。

其他顯著特點 – 5/5
正如我上面提到的,Visual Composer 是一個完整的網站構建器,因此您可以使用它的界面構建您的整個網站,包括頁眉、頁腳、模板等。
您還可以從默認和自定義字段插入動態內容,例如使用 ACF 添加的內容。
另一個突出的功能是 Visual Composer Hub,它帶有大量可以導入的模板和內容元素。
鎖定 – 5/5
如果您停用 Visual Composer,它會留下相對乾淨的 HTML。 HTML 仍然包含 Visual Composer CSS 類,但沒有任何前端問題或短代碼。
10. WP頁面生成器
WP Page Builder 是來自知名 WordPress 開發者 Themeum 的新產品。 因此,雖然插件本身是新的,但它來自一個在 WordPress 領域已經存在一段時間的團隊。
Themeum 還製作了我們不久前評測過的 Tutor LMS 插件。
價格:相當慷慨的免費版本。 專業版起價 39 美元。
接口 – 4/5
就頁面構建器而言,WP Page Builder 具有非常標準的界面。 您可以在右側獲得設計的視覺預覽,並在左側獲得一個側邊欄,您可以在其中控制您的設計。
我非常喜歡的一件事是能夠使用拖放滑塊調整間距(邊距/填充)。 您還可以使用類似的拖放方法來調整列的大小:

但是,沒有內聯編輯,這有點令人沮喪。 相反,您需要在側邊欄編輯器中編輯文本:

包含的小部件/模板 – 5/5
即使是免費版本,WP Page Builder 也提供了一系列出色的小部件。 例如,免費版本為您提供定價表、帖子網格、翻轉框等。 大多數其他頁面構建器為高級版本保留這些元素。
您還可以訪問 31+ 佈局包,它們是特定領域的主題模板包。 每個佈局包括多個模板:

樣式選項 - 4/5
我已經提到了拖放間距/佈局控件,這是一個非常方便的功能。
除此之外,您還可以獲得多種樣式選擇。 例如,您可以獲得形狀分隔符、在某些設備上隱藏元素並為不同設備使用不同設置的選項,以及大量通用樣式選項:

然而,雖然它很可靠,但你沒有像 Elementor 或 Divi 那樣獲得那麼多選擇,這就是為什麼我選擇“4”而不是“5”的原因。
其他顯著特徵 – 3/5
WP Page Builder 是一個可靠的頁面構建器,但它沒有建立您從其他頁面構建器中獲得的附加功能。 例如,沒有主題構建、彈出窗口構建器等。
除了頁面構建器本身,我真的沒有看到任何突出的功能。
鎖定 – 3/5
當您禁用 WP Page Builder 時,它會刪除所有內容,包括您的內容。 Even if you just added a single text block, that text block will still disappear when you disable WP Page Builder.
The content will reappear if you reactivate the plugin.
Which Is The Best WordPress Page Builder?
So which of these 10 page builders should you choose? Well, here's how the scores stack up (in order):
| Page Builder | Overall (25 is Max) | Interface | Widgets / templates | Styling | Notable features | Lock-in |
| 元素 | 25 | 5 | 5 | 5 | 5 | 5 |
| 海狸生成器 | 23 | 5 | 4 | 5 | 4 | 5 |
| 迪維生成器 | 23 | 5 | 5 | 5 | 5 | 3 |
| 輕快的 | 23 | 5 | 4 | 5 | 5 | 4 |
| 興旺建築師 | 22 | 5 | 4 | 5 | 3 | 5 |
| 視覺作曲家 | 22 | 3 | 5 | 4 | 5 | 5 |
| 主題生成器 | 20 | 4 | 3 | 4 | 4 | 5 |
| WP頁面生成器 | 19 | 4 | 5 | 4 | 3 | 3 |
| WPBakery 頁面生成器 | 15 | 3 | 3 | 3 | 3 | 3 |
| SiteOrigin 頁面生成器 | 14 | 3 | 2 | 3 | 2 | 4 |
And personally, that's pretty much how I would recommend them to people, as well.
On my own sites, I use a mix of Elementor and Thrive Architect, depending on the site.
If you're looking for the best value of price vs features, here's another table comparing the score to the pricing options:
| Page Builder | Overall (25 is Max) | Free Version? | Starting Price |
| 元素 | 25 | 是的 | 49 美元 |
| 海狸生成器 | 23 | 是的 | 99 美元 |
| 迪維生成器 | 23 | 不 | 89 美元 |
| 輕快的 | 23 | 是的 | 49 美元 |
| 興旺建築師 | 22 | 不 | 19 美元 |
| 視覺作曲家 | 22 | 是的 | 49 美元 |
| 主題生成器 | 20 | 是的 | 39 美元 |
| WP頁面生成器 | 19 | 是的 | 39 美元 |
| WPBakery 頁面生成器 | 15 | 不 | 64 美元 |
| SiteOrigin 頁面生成器 | 14 | 是的 | 29 美元 |
Now over to you — which one do you think is the best WordPress page builder?
