Elementor 與 Beaver Builder（2022 年 1 月）——哪個更好？

Elementor 和 Beaver Builder 是兩個最受歡迎的頁面構建器。

根據 WordPress 存儲庫，Elementor 有超過 500 萬個活動安裝，而 Beaver Builder 有 200,000 個活動安裝。

本文為您提供了這兩個頁面構建器的並排比較，因此您可以決定哪個最適合您的需求。

在此 Elementor vs Beaver Builder 評論中，我將在七個關鍵標准上並排比較這兩個頁面構建器：

• 界面
• 設計選項
• 響應式設計
• 模板
• 彈出窗口生成器
• 主題生成器
• 價錢

但在我們開始之前，您為什麼還需要第三方頁面構建器？ 畢竟，WordPress 帶有一個非常好的塊編輯器（古騰堡）。 那有什麼問題？

我們先來處理這個問題。

您真的需要頁面構建器嗎？

您絕對不需要頁面構建器。 而且有很多人根本不使用它們。

因此，讓我們看看使用頁面構建器的優缺點。

使用頁面構建器的優點

使用頁面構建器的優勢歸結為三個主要因素。

無需進行任何編碼即可創建漂亮的佈局。 在基本層面上，WordPress 易於使用。 但是，如果您想創建高級頁面佈局或精美的菜單導航，則需要聘請開發人員（除非您知道如何編碼）。 頁面構建器使您無需進行任何編碼即可創建高級頁面佈局和菜單。

省時間。 即使是像上傳新文章和格式化這樣的基本任務，頁面構建器也會更快。 您反複使用的標題和標註框等元素可以保存為模板，從而節省您的時間並簡化您的工作流程。

只需單擊一個按鈕，即可在整個站點範圍內進行更改。 如果您的頁面構建器帶有主題構建器，則只需單擊幾個按鈕即可在整個網站上進行更改。

使用頁面構建器的缺點

如果您決定停止使用它，可能會很混亂。 當您停止使用它們時，一些頁面構建器會留下其他 WordPress 編輯器無法理解的混亂編碼。

對於某些頁面構建器，這可能是一個大問題。 但是使用 Eelelneot 和 Beaver Builder，您無需擔心這一點。 當您卸載任一頁面構建器時，您將丟失您創建的佈局，但您仍然擁有內容並且不會留下一團糟的短代碼。

可能會減慢您的網站速度。 頁面構建器會增加您網站上的代碼量，這不可避免地會對加載時間產生一些影響。 但是你需要在美學、用戶體驗和轉換之間取得平衡。 印像數在 Internet 上非常重要，使用默認的 WordPress 編輯器只能做這麼多。

話雖如此，大多數頁面構建器都會執行多個插件的工作。 如果沒有頁面構建器，您可能會使用六種不同的插件（例如目錄插件、輪播插件、作者框插件等）。 這些插件也會減慢您的網站速度。

現在讓我們根據七個關鍵標準比較 Elementor 和 Beaver Builder。

1.接口

該界面是開始我們比較的好地方，因為它是您花費大量時間的地方。

元素界面

當您使用 Elementor 創建新博客文章時，您的屏幕將分為兩部分：

• 獲得博客文章實時預覽的主要區域
• 一個固定的左側邊欄，其中包含您可以拖放到博客文章中的元素。

單擊主區域中的加號可為您提供將部分添加到博客文章的選項。

這是您創建博客文章的佈局或結構的地方。 您可以選擇列和列寬的各種組合：

為該部分選擇佈局後，您可以選擇從左側邊欄中添加元素：

然後，您可以將一個元素（例如文本塊）拖到您的頁面上：

要添加另一個元素，例如圖像，只需重複該過程。

這是一個易於使用的界面，感覺非常直觀。

正如您對領先的尋呼機構建器所期望的那樣，Elementor 具有內聯文本編輯功能，這意味著您可以在頁面的編輯區域中鍵入目錄：

固定的左側邊欄包含格式化和創建博客文章所需的所有 WordPress 小部件。

Elementor 中一個非常有用的功能是右鍵導航。 當您右鍵單擊任何元素時，會彈出一個下拉菜單，為您提供各種編輯選項：

這個右鍵菜單為您提供了快速復制元素或更改其樣式的選項。

另一個有用的功能是“導航器”。 這是一個樹形面板，可輕鬆訪問設計層次結構：

導航器允許您準確查看您正在處理的設計功能并快速跳轉到頁面中的另一個功能。 在 Elementor Pro 中，右鍵菜單還允許您將元素另存為模板。

在界面的左下方，有一些按鈕可以讓您訪問一些有用的工具：設置、導航器、歷史記錄、響應模式和預覽：

海狸生成器界面

Beaver Builder 界面的工作方式與 Elementor 的有所不同。

當您開始新的博客文章時，整個屏幕都是您的預覽。 右上角是一個藍色加號。 單擊它，您會看到一個下拉菜單，您可以在其中添加模塊、行和模板：

Elementor 和 Beaver Builder 中的術語略有不同。

Elementor 稱之為“部分”，Beaver Builder 稱之為“行”。 Elementor 稱之為“小部件”，Beaver Builder 稱之為“模塊”。

但它們是完全一樣的。 在這兩個插件中，它們都是您用來創建網頁的構建塊。

行創建頁面的佈局，模塊創建頁面的內容。

當您將模塊添加到頁面時，會出現一個彈出窗口，允許您控制該模塊的內容和样式。 例如，這是一個文本模塊：

您可以在彈出窗口中或直接在頁面本身中鍵入文本。

您可以在屏幕上拖動這些模塊彈出窗口並將它們放置在您想要的任何位置。 這使得 Beaver Builder 比使用固定左側菜單的 Elementor 靈活得多。

行和列也有彈出窗口，可讓您控制其樣式。

在 Beaver Builder 中構建頁面的工作流程是：

1. 單擊右上角的加號以添加行或模塊
2. 使用該行或模塊的彈出窗口以您想要的方式格式化元素

與 Elementor 一樣，Beaver Builder 為您提供了一個樹形面板，該面板向您顯示設計元素的層次結構並標識您當前正在處理的元素：

界面 - 哪個更好？

Beaver Builder 的界面比 Elementor 更流暢、更靈活。 使用 Elementor，您有一個固定的左側菜單。 但是使用 Beaver Builder，您可以編輯彈出窗口，您可以在屏幕上移動。 在我看來，Beaver Builder 的界面更加人性化。

另一方面，Elementor 讓您可以右鍵單擊訪問複製/粘貼等重要功能（Beaver Builder 沒有此功能）。

那麼哪個界面更好呢？

每個頁面構建器都有其他人缺乏的優勢，所以在這個標准上，這是一個平局。

2. 快速對照表

3. 設計選項

每個構建器為您設計頁面提供了哪些選項？ 控件的粒度如何？ 它們是否為您提供高級設計選項，例如鼠標動畫和運動效果？

這就是我們將在本節中看到的內容。

設計選項-Elementor

Elementor 使您能夠控制佈局和內容的各個方面。

這包括列寬、邊距、填充、字體、顏色、大小和文本陰影。 您還可以完全控制背景設置。

使用 Elementor Pro，您可以獲得更高級的設計選項。 例如，您可以將 CSS 添加到單個元素，使用絕對或相對定位，並使用確保整個站點設計一致的站點範圍設置。

Elementor 還提供了一個強大的工具集，用於創建滾動和鼠標動畫，包括高級運動效果。

這些影響包括：

• 垂直滾動（視差效果）
• 水平滾動
• 透明度
• 模糊
• 旋轉
• 規模
• 鼠標軌道
• 3D傾斜

設計選項 - 海狸生成器

Beaver Builder 為您提供了領先的頁面構建器所期望的所有核心設計選項。 您可以將設計選項應用於行、列和模塊。

對於行和列，您有兩個設計選項卡：樣式和高級。 對於模塊，您有三個設計選項卡，一般、樣式和高級。

此外，Beaver Builder 最近還添加了將 CSS 應用於單個設計元素的功能。

設計選項 - 哪個更好？

Beaver Builder 和 Elementor 之間的一個區別是 Beaver Builder 默認繼承主題的字體和顏色。 在 Elementor 中，如果要使用主題的字體和顏色，則必須禁用 Elementor 的默認顏色和排版。 在這個問題上，我更喜歡 Beaver Builder 的方法。

但是，Elementor Pro 為您提供了比 Beaver Builder 更多的設計選項。 例如，運動效果和自定義定位在 Elementor 中都可用，但在 Beaver Builder 中不支持。

在設計方面，Elementor 是明顯的贏家。

4. 響應式設計

響應式設計是一種網頁設計方法，旨在使網頁在各種設備（包括台式機、平板電腦和移動設備）上都能很好地呈現。

這兩個頁面構建器在響應能力方面如何比較？

Elementor - 響應式設計

Elementor 的設計會自動響應設備，但您也可以完全控制響應式設計設置。

面板工具欄的底部是響應式預覽控件。 這些允許您在桌面、平板電腦和移動預覽之間切換。

您可以在任何給定小部件、列或部分的設置中看到這些相同的選項。

有些元素在移動設備上顯示效果不佳。 這就是為什麼 Elementor 還為您提供在桌面、平板電腦或移動設備上隱藏元素的選項：

Beaver Builder - 響應式設計

Beaver Builder 上的所有設計默認都是響應式的。 但與 Elementor 一樣，您可以在不同的視口（台式機、平板電腦和移動設備）中查看您的頁面，並進行僅影響頁面在特定設備上的顯示方式的調整。

在 Beaver Builder 中，您可以對顯示設備圖標的任何行、列或模塊執行此操作：

Beaver Builder 與 Elementor 一樣，可讓您定義響應式顯示的斷點。

與 Elementor 一樣，Beaver Builder 具有預覽模式，可讓您在不同的設備尺寸上查看頁面。

響應式設計——哪個更好？

這兩個頁面構建器都允許您調整設計，以便它們在所有設備上正確顯示。 在這個問題上，兩個平台之間幾乎沒有選擇餘地，所以這是一個平局。

5. 模板

模板可以為您節省大量時間。 它們可能是為您預先設計的模板，也可能是您自己從頭開始創建的模板。

無論哪種方式，將模板拖放到您的網頁中的能力都會改變遊戲規則。 它可以改善您的工作流程並提高您的工作效率。

讓我們看看哪個頁面構建器有更好的模板。

元素模板

當您在 Elementor 中開始新帖子或頁面時，您看到的第一件事是使用模板的選項：

Elementor 帶有兩種現成的模板：塊和頁面。 塊模板是經過專業設計的即用型小部件，您可以將其放入頁面中。

例如，這是我放入新頁面的“關於”塊：

您可以自定義任何塊模板，使其看起來像您想要的那樣，然後將其保存以反複使用。

這將為您節省大量時間。

頁面模板是設計者製作的頁面佈局。 您可以在模板庫中搜索適合您的利基的設計：

選擇頁面佈局模板後，您可以對其進行自定義並將其保存為可以再次使用的模板。

Elementor Pro 讓您可以訪問 40 多個頁面模板和 160 多個塊模板。

海狸生成器模板

Beaver Builder 提供兩種模板：登錄頁面模板和內容頁面模板（但沒有小部件或模塊模板）。

登陸頁面模板是令人印象深刻的獨立頁面，旨在轉換：

內容模板是常規網站頁面，例如“關於”、“聯繫”和“投資組合”頁面：

在 Beaver Builder（與 Elementor 一樣）中，您可以自定義這些模板，然後將它們保存到您的模板庫中。

模板 - 哪個更好？

這場比賽之所以選擇 Elementor，是因為它提供了小部件或塊模板，而 Beaver Builder 沒有。

6. 彈出窗口生成器

這是一項僅在 Elementor 中可用的功能 - 在撰寫本文時，無法在 Beaver Builder 中創建彈出窗口。

Popup Builder 包含在 Elementor Pro 中，它使用與您用於創建和編輯頁面和帖子相同的左側面板：

有多種不同的彈出式模板可供選擇，包括電子郵件選擇加入表格、促銷橫幅和追加銷售：

您可以使用現成的彈出窗口模板，也可以從頭開始構建彈出窗口。

Elementor 的 Popup Builder 為您提供了控制彈出窗口的行為方式、顯示位置和時間所需的所有高級設置：

7. 主題生成器

Elementor 和 Beaver Builder 都讓您不僅可以設計單個頁面，還可以設計整個網站。 他們通過一個“主題構建器”來實現這一點，它允許您創建標準元素，如頁眉、頁腳、單個帖子等。然後，這些元素將在您的網站上使用，以創建包含您的品牌的主題。

那麼哪個構建器具有更好的主題構建器：Elementor 或 Beaver Builder？

Elementor 主題生成器

Elementor 的 Theme Builder 可讓您設計整個網站。 它使用與您創建頁面和帖子相同的界面。

主題生成器由許多“站點部分”組成，例如頁眉、頁腳、單頁、單個帖子等：

每個站點部分都有模板，您可以自定義：

自定義網站後，您可以控制它在您網站上的顯示位置。 例如，您可以設計僅針對特定作者的帖子顯示的“單個帖子”佈局。

開發人員將對 Elementor 的“動態標籤”感興趣。 這些允許您使用第三方小部件動態顯示內容。

任何旁邊有動態標籤圖標的字段都可以填充動態內容：

除了單個網站部分的模板外，Elementor 還為整個網站設計提供模板。 這些被稱為“網站工具包”，其中有 60 多個包含在 Elementor Pro 中。

Elementor 的主題生成器適用於任何 WordPress 主題 - 因此無需擔心兼容性。

海狸主題

Beaver Builder 還有一個主題生成器，稱為 Beaver Themer。 但是，Beaver Themer 不包含在 Beaver Builder 的高級版本中 - 它是一個單獨的附加組件。

Beaver Themer 使用您在 Beaver Builder 中使用的相同界面來創建單獨的頁面和帖子。

您可以使用 Beaver Themer 設計任何站點範圍的元素，包括頁眉、頁腳、存檔、單個帖子、404 頁面等。

Beaver Themer 使用 WordPress 掛鉤在您網站的指定位置注入內容。

Beaver Themer 基於規則的定制為您定製網站的方式提供了相當大的力量和靈活性。 它使用條件邏輯來精確調整 Themer 佈局或 Beaver Builder 佈局的一部分的顯示位置和時間。

主題生成器 - 哪個更好？

這兩個主題構建器做的事情大致相同：它們允許您創建站點範圍的模板，為您的網站提供一致的品牌、外觀和佈局。

這兩個構建器都允許您使用自己的模板自定義整個網站。 它們都提供了強大的基於規則的選項，用於確定模板將在您的站點中出現的位置。

兩個主題構建者之間的主要區別不在於他們所做的事情，而在於定價。

Elementor 的主題生成器包含在 Elementor Pro 中。 另一方面，Beaver Themer 不包含在 Beaver Builder Pro 中：它是一個附加組件，需要額外花費 147 美元。

在我看來，Elementor 是這裡的明顯贏家，僅僅是因為他們的主題構建器包含在他們的頁面構建器的 Pro 版本中。

8. 定價

這兩個頁面構建器的定價存在一些重要差異。 在兩個構建器之間進行選擇時，您需要考慮這些差異。

元素定價

Elementor 的定價分為四個等級：

• 基本：49 美元/年
• 專家：199 美元/年
• 工作室：499 美元/年
• 代理：999 美元/年

所有四個層都具有以下核心功能：

• 拖放實時編輯器
• 響應式設計
• 90 多個基本和專業小部件
• 300 多個基本和專業模板
• 60 多個專業網站工具包
• 主題生成器
• 高級支持

價格上漲的主要區別是您可以使用 Elementor 的網站數量：

• 必備：在 1 個站點上使用
• 專家：在 25 個站點上使用
• 工作室：在 100 個網站上使用
• 代理：在 1000 個站點上使用

海狸生成器定價

Beaver Builder 的定價分為三層：

• 標準：99 美元/年（每年續訂，折扣 40%）
• 專業版：每年 199 美元（每年續訂，享受 40% 的折扣）
• 代理：399 美元（每年續訂，享受 40% 的折扣）

使用 Beaver Builder，所有層級都可以在無限的站點上使用。

標準層具有以下核心功能：

• 頁面構建器插件
• 支持1年
• 高級模塊和模板

Pro 層級為您提供標準功能以及：

• 海狸生成器主題
• 多站點能力

[“支持多站點”意味著它支持 WordPress 多站點安裝]。

代理層具有所有 Pro 功能以及白色標籤。

Elementor vs Beaver Builder：優點和缺點

我們在 Elementor vs Beaver Builder 評論中涵蓋了很多內容。 我們在界面、設計選項、模板、響應能力、主題構建器和定價方面比較了這兩個頁面構建器。

需要考慮很多信息和很多變量。

讓我們嘗試根據每個頁面構建器的優缺點來總結一下。

元素專家

• 彈出窗口生成器
• 右鍵編輯
• 運動效果（設計選項）
• 更多模板，包括網站模板
• 主題生成器

元素缺點

• 用戶界面不太靈活
• 1年後續訂無折扣

海狸生成器優點

• 更靈活的用戶界面（您可以將界面窗口拖動到您想要的位置）
• 在盡可能多的網站上使用它

海狸生成器缺點

• 不包括主題生成器：Beaver Themer 是一個單獨的產品，售價 147 美元（一次性費用）
• 缺少 Elementor 的一些高級設計功能（運動效果、右鍵單擊編輯、彈出窗口生成器）
• 模板比 Elementor 少

加起來

儘管 Elementor 提供了 Beaver Builder 所沒有的一些功能（例如，運動效果、自定義定位和右鍵單擊導航），但這兩個頁面構建器都做了很多相同的事情。

比較兩個頁面構建器的優缺點，Elementor 似乎是贏家。

除了一個因素。 Beaver Builder 可以在任意數量的站點上使用。 Elementor 並非如此。 如果你想在超過 25 個站點上安裝 Elementor，它開始變得比 Beaver Builder 貴很多。

所以這真的取決於你將如何使用你的頁面構建器。

如果您只有一個網站，那麼 Elementor 是您的最佳選擇：它具有更多功能、更多模板，而且價格只有一半（第一年）。

但是，如果您是網頁設計師並且需要在超過 25 個網站上安裝頁面構建器，那麼您最好的選擇是 Beaver Builder。

元素常見問題解答

Elementor難學嗎？

Elementor 是一個適合初學者的拖放頁面構建器。 一旦您了解了 Elementor 使用的三種構建塊（部分、列和小部件），學習 Elementor 就很容易。

學習 Elementor 的最佳方法是從製作非常簡單的網頁開始，該網頁由一個部分、一兩列、一個文本小部件和一個圖像小部件組成。

一旦您熟悉了該基本設計，您就可以繼續學習更高級的佈局。

Elementor 對 SEO 有好處嗎？

Elementor 可幫助您設計外觀現代的網頁，為訪問者提供良好的用戶體驗。 從這個意義上說，Elementor 對 SEO 有好處。 它還可以讓您更快、更輕鬆地向您的網站添加新內容，這對您的 SEO 也有好處。

但是，任何頁面構建器都會向您的網站添加代碼，而額外的代碼可能會降低您的網站速度。 這反過來會影響搜索引擎優化。

Elementor 會減慢您的網站速度嗎？

如上所述，任何頁面構建器都會向您的網站添加代碼，這可能會降低您的網站速度。

一些頁面構建器減慢您的網站的原因之一是短代碼。

簡碼簡化了向 WordPress 網站添加代碼的過程。 它們就像添加通常需要大量複雜計算機代碼的功能的快捷方式。

短代碼的缺點是每次加載頁面時都需要將它們擴展為長格式代碼。 這對您的服務器提出了要求，這可能會增加加載時間。

儘管您可以在 Elementor 中使用簡碼，但 Elementor 使用的基本結構並非基於簡碼。

總之，使用 Elementor 對加載時間的影響是微不足道的。 如果您使用的是快速的網絡託管服務（例如 WPX）和速度優化插件（例如 WP Rocket），那麼您無需擔心 Elementor 會降低您的網站速度。

Woorkup 對 Elementor 進行了速度測試，結果如下：

如您所見，沒有 Elementor 的頁面加載速度快了 7 毫秒。 這還不足以對您網站的 SEO 產生真正的影響。

如果我刪除 Elementor 會發生什麼？

如果您停用或刪除 Elementor Pro，您的網站將停止顯示您使用 Elementor Pro 創建的任何高級設計。 但是您使用 Elementor 的標準免費版本創建的任何設計仍然可以使用。

但是，如果您停用並刪除 Elementor 的免費版本，會發生什麼？

對於某些頁面構建器，例如 Visual Composer 和 Divi，當您刪除插件時，頁面構建器會在您的網站上留下短代碼。 其他頁面構建器無法理解或使用此短代碼，因此它會永遠鎖定您使用該頁面構建器。 這稱為“短代碼鎖定”。

但根據 Create & Code 的說法，Elementor 並沒有這樣做：它留下了乾淨的代碼。 PathFinder SEO 得出了類似的發現：Elementor 在停用時留下了乾淨的代碼。

海狸生成器常見問題解答

Beaver Builder 對 SEO 不利嗎？

Beaver Builder 旨在對 SEO 友好。 它遵循 schema.org 標記等行業標準，並使用代碼壓縮，使搜索引擎可以輕鬆找到頁面。

Beaver Builder 快嗎？

Pagely 對五個不同的頁面構建器進行了速度測試，包括 Elementor 和 Beaver Builder。 對於 Pingdom 頁面加載時間，他們記錄了 Elementor 的 489 毫秒和 Beaver Builder 的 665 毫秒。 因此，Beaver Builder 似乎比 Elementor 稍慢（176 毫秒）。

但是，如果您使用的是快速網絡主機和速度優化插件（例如 WP Rocket），那麼這種差異不會對您網站的整體 SEO 產生影響。

Beaver Builder 是插件還是主題？

Beaver Builder 和 Beaver Themer 都是插件。 要使用其中任何一個，您仍然需要一個 WordPress 主題。 Beaver Builder 將適用於任何具有可自定義頁眉和頁腳元素的 WordPress 主題。

Beaver Builder 網站建議使用以下四個 WordPress 主題之一：

• 頁面構建器框架
• GeneratePress（本網站所基於的主題）
• 阿斯特拉
• 創世紀框架

Beaver Builder 是否支持 3rd 方小部件？

是的，儘管某些第三方小部件可能需要修改以使其與 Beaver Builder 佈局兼容。 第三方小部件和默認的 WordPress 小部件都顯示在 Beaver Builder 的 WordPress 小部件模塊和 Beaver Builder 主題的小部件菜單中。

更多產品評論

• 通過 7 個簡單步驟使用 BuzzStream 的指南
• Hunter Review 2021 – 電子郵件查找器和外展平台
• Link Whisper Review - 內部鏈接插件
• Lasso WordPress 插件評論 – 聯盟營銷人員的 7 個強大功能
• WP Rocket Review – 它是 WP 的最佳緩存插件嗎？
• GeneratePress Review 2021 – 最佳和最快的 WP 主題？