Beaver Builder vs Elementor Pro:哪個是最好的 WordPress 頁面構建器?

已發表: 2021-09-02

試圖在 Beaver Builder 和 Elementor Pro 之間做出選擇,作為使用可視化拖放構建器構建自定義 WordPress 網站的工具?

這是兩個最好的 WordPress 頁面構建器插件。 兩者都不僅僅是頁面構建器 - 您還可以將它們用於完整的主題構建。

那麼——你怎麼能在它們之間做出選擇呢? 嗯,這就是這篇文章的內容。

我認為這兩個插件都是優秀的工具,所以我不會宣布一個贏家。 相反,我將嘗試幫助您選擇最適合您的需求和預算的插件。

讓我們深入挖掘!

特徵

為了開始我們的 Beaver Builder 與 Elementor Pro 比較,讓我們從高層次上看一下這兩種工具提供的功能。

以下是下表中圖標的含義:

  • ️ – 該功能在插件中可用。
  • ️️ – 該功能在兩個插件中都可用,但一個插件的實現更靈活/強大。
  • – 該功能在插件中不可用。
特徵海狸生成器元素專業版
可視化的前端編輯器
拖放
內聯文本編輯
專門的響應式編輯
內容小部件 ️️
預建模板 ️️
可重複使用的模板(您自己的設計)
主題生成器️*
插入動態內容(包括自定義字段) ️*
彈出窗口生成器
表單生成器 ️️
WooCommerce 支持 ️️
專用主題
白標
多站點支持 ️**
複製/粘貼樣式
右鍵支持
暗模式(界面)

*需要官方(但單獨的)Beaver Themer 附加組件。

**Elementor Pro 需要為您的多站點網絡中的每個網絡站點提供一個有效的許可證密鑰。

Beaver Builder vs Elementor Pro 功能結論

在功能方面,Elementor Pro 具有明顯的優勢。 你得到…

  • 彈出窗口生成器,這是一個非常強大的功能,可以取代單獨彈出/選擇加入插件的需要。
  • 更多可供選擇的小部件,包括用於接受付款的 PayPal 按鈕等獨特選項。
  • 更多模板可供選擇。
  • 更強大的表單生成器。
  • 更多設計選項(我沒有在表格中介紹這些,但稍後我會分享更多關於這些的內容)。
  • 更好的 WooCommerce 支持。 Beaver Themer 確實支持 WooCommerce,但 Elementor Pro 為您提供了更多使用 WooCommerce 的靈活性。

但是,在上面的比較表中很難捕捉到的一件事是功能和穩定性之間的權衡。 如果您想為工具添加更多功能,則需要更快的開發週期,這會增加出現錯誤或問題的機會。

Beaver Builder 的開發週期較慢,這意味著它沒有那麼多功能。 但是這種較慢的開發週期確實意味著 Beaver Builder 確實堅如磐石,您可以確信更新不會引起問題。

我當然不是說 Elementor Pro 不穩定。 它是最受歡迎的頁面構建器插件,數以百萬計的網站都在毫無問題地使用它。

我只是想強調穩定性是 Beaver Builder 做得很好並且值得稱讚的地方。 如果您是那種重視穩定性而不是獲得更多功能的人,那對您來說可能很重要。

另一方面,如果您想要最多的功能並且想要定期訪問新功能,那麼 Elementor Pro 絕對具有優勢。

界面

接下來,讓我們深入了解該界面如何與每個工具一起使用。

界面質量是主觀的,所以我不會在這裡宣布“贏家”。 這兩種工具都具有出色的界面,並且通常都快速且無故障。

不過,Beaver Builder 的一個優點是它可以讓您根據自己的喜好自定義界面,而 Elementor 的界面幾乎只是固定的。

另一方面,Elementor 確實有一些優勢,因為它為您提供了一些 Beaver Builder 沒有的有用工具,例如右鍵單擊支持和用於組織設計的導航器工具。

海狸生成器

正如我上面提到的,Beaver Builder 的界面非常靈活。 首次啟動 Beaver Builder 時,您會看到設計的全屏預覽,頂部有一個工具欄:

海狸生成器界面

要插入模塊或模板,您可以單擊“加號”圖標打開面板:

Beaver Builder 添加新模塊

同樣,要打開行、列或模塊的設置,您可以將鼠標懸停在它上面並單擊扳手以打開一個彈出窗口(您可以根據需要調整大小並四處移動):

海狸生成器設置

如果您更喜歡使用固定面板而不是浮動選項,則可以將面板拖動到界面的任一側。 這將創建一個固定的側邊欄,您可以在其中添加新模塊並配置現有元素的設置:

BB固定側邊欄

如果要編輯文本,只需在頁面上單擊並輸入,也可以使用設置區域中的文本編輯器。

對於響應式設計,您可以打開響應式編輯模式,該模式可讓您查看實時響應式預覽並根據設備自定義您的設計:

BB 響應式編輯

我喜歡 Beaver Builder 的一個功能是能夠通過將一個模塊拖到另一個模塊旁邊來創建多列設計:

Beaver Builder 自動列創建

大多數頁面構建器會強制您在添加元素之前設置列結構,這會增加一些額外的時間(如果您更喜歡這種方法,Beaver Builder 也允許您這樣做)。

除了我在上面向您展示的內容之外,Beaver Builder 還提供了自己的 Assistant 插件來幫助您在設計之間快速跳轉(儘管它不需要 Beaver Builder )。

元素專業版

使用 Elementor 和 Elementor Pro,您可以在界面左側獲得固定側邊欄,並在右側獲得設計的實時預覽:

元素界面

如果您想查看設計的全寬預覽,可以折疊側邊欄以隱藏 Elementor 界面:

隱藏 Elementor 側面板

側邊欄是您可以添加新模塊和配置元素設置的地方:

元素設置

要編輯文本,您只需在頁面上單擊並輸入,也可以使用側邊欄中的文本編輯器。

Elementor 還提供了一些有用的選項來幫助您更有效地工作。 例如,Elementor 支持右鍵單擊,可讓您訪問關鍵選項,如復制/粘貼(元素或樣式)、複製元素等。

您還將獲得一個導航器工具,可讓您查看頁面的佈局 - 您還可以重命名頁面中的部分和元素以幫助您記住它們并快速選擇正確的元素:

Elementor 右鍵單擊和導航器

Elementor Pro 還包括響應式編輯模式,該模式向您顯示響應式預覽,並允許您為某些設備自定義設計:

Elementor 響應式編輯

如果您想像 Beaver Builder 那樣對 Elementor 界面進行更多控制,您可以使用第三方插件,例如 Flexible Elementor Panel。

設計選項

如果您對可視化構建器感興趣,您可能需要一個無需任何自定義 CSS 即可幫助您設置設計的工具。 為此,您需要多種內置設計選項。

這兩種工具在基礎方面都非常靈活。 您可以輕鬆控制:

  • 顏色
  • 排版
  • 通過邊距/填充間距
  • 背景
  • 響應式設計
  • 等等。

然而,Elementor Pro 也比基礎更進一步,這就是為什麼我認為它在設計靈活性方面是非常明顯的贏家。

基本上,在設計方面,Elementor 幾乎可以完成 Beaver Builder 所做的所有事情以及“更多”。 例如,以下是 Elementor Pro 中的一些獨特設計功能:

  • 運動效果- 添加酷炫的效果,如滾動效果、3D 傾斜、鼠標跟踪等。 在此處了解更多信息並查看示例。
  • 自定義定位——使用絕對和相對定位在您的設計中完美放置小部件。
  • 將 CSS 直接添加到元素- 您可以將 CSS 直接添加到小部件/列/部分,而 Beaver Builder 僅允許您添加 CSS 類或 ID。

當然,插件之間還有許多其他較小的選項和差異。 我只是想強調,總的來說,Elementor Pro 肯定有更多的設計選擇。

我認為在內置設計選項方面唯一可以與 Elementor Pro 相媲美的構建器是 Divi Builder 插件(在我們的 Divi 評論中了解更多信息)。

表現

當您使用頁面構建器時,您總是會在性能方面做出一些權衡。 無論您選擇哪種頁面構建器,它都不會創建像原生 WordPress 編輯器一樣輕量級的設計。

話雖如此,有些插件比其他插件更好。

Beaver Builder 一直是更輕量級的選項之一(對於頁面構建器),Elementor 團隊最近一直將重點放在性能改進上,包括簡化 DOM 和優化資產加載以僅在需要時加載腳本。

為了評估這兩個工具的性能,我為每個工具創建了一個相同的設計。 設計非常簡單——我只是想了解每個工具的基本“重量”。 它只包括一個文本小部件、按鈕小部件和聯繫表單(來自頁面構建器)。 我在這兩個工具中都使用了默認設置。

頁面大小HTTP 請求
海狸生成器71 KB 11
元素315 KB 32

*這些數字包括我的主題,即 GeneratePress。

總的來說,Beaver Builder 更輕量級,至少在這個測試中是這樣。 Elementor Pro 為您提供更多功能和設計效果,因此它需要加載更多資產來實現這一點是很自然的。 例如,Elementor 正在為其 Motion Effects 加載腳本,這是 Beaver Builder 所沒有的功能。

如果您啟用 Elementor 新改進的資產加載功能(仍處於 alpha 測試階段),差異會變得更小,因為 Elementor 更擅長僅在需要它們的地方加載某些資產:

頁面大小HTTP 請求
海狸生成器71 KB 11
元素239 KB 30

而這一切都沒有任何性能優化插件。 如果您使用 WP Rocket 之類的東西,您可以進一步降低這些數字。

我想我會這樣總結性能:

  • Beaver Builder 比 Elementor Pro 更輕量級,這是有道理的,因為它需要加載的功能和效果更少。
  • 如果您啟用新的性能功能,Elementor 會變得更好,在我寫這篇文章時,這些功能仍在測試中。
  • 最重要的是——只要您以最佳方式創建設計並實施 WordPress 性能最佳實踐,您就可以使用這兩種工具創建一個快速加載的網站。

價錢

在定價方面,這兩種工具都有一些優勢。 如果您只需要用於單個站點或少量站點的工具,Elementor Pro 會更便宜,而如果您需要用於大量網站(超過 25 個站點)的工具,則 Beaver Builder 會更便宜。

但是,在我們比較定價之前,您需要考慮您的需求是什麼。

Elementor Pro 將其所有功能都包含在一個插件中。 因此,當您購買 Elementor Pro 時,您可以訪問所有內容——包括主題構建器、彈出窗口構建器等。

另一方面,Beaver Builder 將其頁面構建器和主題構建功能分開。

  • Core Beaver Builder Pro 插件 - 僅支持頁面構建。
  • 官方 Beaver Themer 插件 - 添加對完整主題構建的支持(並且需要高級頁面構建器插件才能運行)。

因此,使用 Beaver Builder,如果您只想構建頁面,您將支付一個價格,如果您想添加主題構建,您將支付另一個價格。

另一個重要區別是 Beaver Builder在所有計劃中都支持無限站點,而 Elementor Pro 的所有計劃都有站點限制。

讓我們來看看每種工具的定價,然後我將比較它們並顯示每種工具何時更便宜。

Elementor Pro 定價

以下是 Elementor Pro 的價格——所有這些價格都是針對一年許可證的:

Elementor Pro 定價與 Beaver Builder

海狸生成器定價

以下是 Beaver Builder 核心插件的價格。 除非您需要多站點支持或白標,否則我認為您應該可以使用最便宜的 99 美元標準計劃:

Beaver Builder 定價與 Elementor Pro

要添加 Beaver Themer,您將再支付 147 美元(總共 246 美元)。

使用 Beaver Builder 和 Beaver Themer,如果您續訂許可證以在第一年後繼續獲得支持和更新,您將獲得 40% 的折扣。

何時購買 Elementor Pro 與 Beaver Builder 更便宜?

總結以上所有信息,讓我們來看看每種工具更便宜的不同情況:

  • 如果您只想要一個用於單個網站的工具(49 美元),Elementor Pro 會便宜很多。
  • 如果您只需要一個頁面構建器,那麼盈虧平衡點是三個網站。 如果您只需要三個網站的工具,則工具價格相同(99 美元)。 但是如果您需要三個以上的網站,Beaver Builder 會更便宜。
  • 如果您需要頁面構建主題構建,則盈虧平衡點是25 個網站。 如果您的站點少於 25 個,Elementor Pro 會更便宜。 但是如果你有超過 25 個網站,Beaver Builder 會更便宜。

這些都是第一年的價格。 如果您在第一年之後續訂,Beaver Builder 會變得更便宜,因為 Beaver Builder 提供 40% 的續訂折扣,而 Elementor Pro 則沒有。

您應該使用 Beaver Builder 還是 Elementor Pro?

我認為 Beaver Builder 和 Elementor Pro 是兩個最好的(如果不是最好)WordPress 頁面構建器,所以當談到 Beaver Builder 和 Elementor Pro 時,我認為你不會做出“錯誤”的決定。

相反,我認為這只是為您的情況選擇最佳工具:

  • 如果您想要最多的功能和設計選項,Elementor Pro 可能是滿足您需求的最佳選擇。 您將獲得獨特的功能,如彈出窗口構建器、獨特的設計選項(如運動效果和自定義定位)等等。 簡而言之,Elementor Pro 是功能最豐富的 WordPress 設計工具之一,這就是為什麼它是最受歡迎的構建器插件。
  • 如果您只是想要一個更輕量級並且具有所有核心頁面構建和主題構建選項的堅如磐石的構建器,那麼 Beaver Builder 也是一個不錯的選擇。

無論哪種方式,您都將擁有一個很棒的工具來幫助您構建一些很棒的設計。

當然,還有另一個區別可能會在您的決定中發揮重要作用——價格。 記住:

  • Elementor Pro 對於單個站點來說更便宜,對於 3 個站點來說價格相同。
  • 如果您需要一個頁面構建器25 個以上的站點,如果您需要頁面構建主題構建,Beaver Builder 對於 3 個以上的站點更便宜。 否則,Elementor Pro 仍然更便宜。
  • Beaver Builder 提供 40% 的續訂折扣,而 Elementor Pro 不提供。

要了解有關這兩個插件的更多信息,您可以閱讀我們的完整評論:

  • 元素評論
  • 海狸生成器評論

您對 Beaver Builder 與 Elementor Pro 仍有任何疑問嗎? 讓我們在評論中知道!