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 的一个功能是能够通过将一个模块拖到另一个模块旁边来创建多列设计:

大多数页面构建器会强制您在添加元素之前设置列结构,这会增加一些额外的时间(如果您更喜欢这种方法,Beaver Builder 也允许您这样做)。
除了我在上面向您展示的内容之外,Beaver Builder 还提供了自己的 Assistant 插件来帮助您在设计之间快速跳转(尽管它不需要 Beaver Builder )。
元素专业版
使用 Elementor 和 Elementor Pro,您可以在界面左侧获得固定侧边栏,并在右侧获得设计的实时预览:

如果您想查看设计的全宽预览,可以折叠侧边栏以隐藏 Elementor 界面:


侧边栏是您可以添加新模块和配置元素设置的地方:

要编辑文本,您只需在页面上单击并输入,也可以使用侧边栏中的文本编辑器。
Elementor 还提供了一些有用的选项来帮助您更有效地工作。 例如,Elementor 支持右键单击,可让您访问关键选项,如复制/粘贴(元素或样式)、复制元素等。
您还将获得一个导航器工具,可让您查看页面的布局 - 您还可以重命名页面中的部分和元素以帮助您记住它们并快速选择正确的元素:

Elementor Pro 还包括响应式编辑模式,该模式向您显示响应式预览,并允许您为某些设备自定义设计:

如果您想像 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 的价格——所有这些价格都是针对一年许可证的:

海狸生成器定价
以下是 Beaver Builder 核心插件的价格。 除非您需要多站点支持或白标,否则我认为您应该可以使用最便宜的 99 美元标准计划:

要添加 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 仍有任何疑问吗? 让我们在评论中知道!