Beaver Builder vs Elementor：关于选择最佳页面构建器的诚实想法（2022 年）

试图在 Beaver Builder 和 Elementor 之间选择作为 WordPress 网站的页面构建器？

这是两个最好的 WordPress 页面构建器插件，因此您肯定已将列表缩小到一些质量选项。

但是鉴于 Elementor 和 Beaver Builder 都是流行的、高质量且经过充分审查的工具，您如何在它们之间进行选择以选择最适合您网站的选项？

我将通过深入研究这些工具来帮助您回答这个问题。 在这篇评论结束时，您应该对哪种页面构建器更适合您的情况有一个很好的了解！

Beaver Builder vs Elementor 功能概述

为了开始我们的 Beaver Builder 与 Elementor 比较，让我们从高层次上看一下这两个插件提供的功能。 您会更深入地看到很多这些功能，但我认为从简单开始会有所帮助：

一般来说，Elementor 比 Beaver Builder 提供“更多”：更多的设计选项、更多的界面选项、更多的模板等等。

但是，我认为您不应该自动假设“更多”意味着“更好”。 不要误会我的意思，我认为 Elementor 对大多数人来说更好，因为这些细节。

尽管如此，有些人不想要或不需要“更多”——他们只想把核心功能做得非常好并且放在一个轻量级的包中。 根据我的经验，这些人更喜欢 Beaver Builder 和 Elementor。

不过，我已经超越了自己，因为我稍后会更多地讨论这个问题。

详细的功能比较

现在，让我们看看 Elementor 和 Beaver Builder 在编辑界面、样式/设计选项、响应式设计、模板、主题构建和其他功能方面的比较。

编辑界面

Elementor 和 Beaver Builder 都提供快速、无故障的编辑体验。

通常，您喜欢的界面实际上归结为个人喜好。 两者本质上都不是更好，你会发现很多人都喜欢其中一个。

如果我必须提出一些高层次的观点，我会这样说：

• Elementor 为您提供了更多促进工作流程的界面工具，例如右键单击支持以及更轻松地复制/粘贴元素和样式的能力。
• Beaver Builder 为您提供了更多自定义界面布局的选项。

让我们来看看两者，以便您可以看到它们的实际作用。

元素

使用 Elementor 的界面，您可以在右侧获得设计的大预览，以及左侧的固定侧边栏，您可以在其中添加新内容和控制设置。 如果您想要全屏预览，可以折叠侧边栏：

要添加小部件，您可以从边栏中拖动它们。 要编辑小部件的文本，您可以在页面上单击并键入。 要编辑其设置，您可以单击它以在侧栏中打开其设置。

Elementor 提供了一些有用的界面功能，但 Beaver Builder 没有。

第一个是右键单击支持，Beaver Builder 不提供。 在 Elementor 中，您可以右键单击任何元素以打开一些选项。 最有用的选项是复制/粘贴整个小部件或只是它们之间的样式的能力：

另一个有用的功能是 Elementor 的导航器，它可以让您从高级别的角度查看页面的结构。 您可以单击一个元素以快速打开其设置并重命名它以帮助您跟踪事物：

Elementor 还提供撤消/重做功能和详细的历史日志来恢复更改：

海狸生成器

Beaver Builder 的界面布局比 Elementor 更具可定制性，但它缺少 Elementor 的一些有用工具，例如右键单击支持。

您可以使用 Beaver Builder 的顶部栏获得设计的全宽预览：

要添加内容，您可以单击加号图标展开菜单：

要编辑行、列或模块的设置，您可以单击它以展开弹出窗口。 此弹出窗口可拖动并可调整大小：

如果您更喜欢固定界面，可以将弹出窗口拖动到任一侧以在左侧或右侧创建固定侧边栏：

拥有这种灵活性很好，因为它可以让您根据需要自定义界面，这是 Beaver Builder 相对于 Elementor 的优势。

但是，Beaver Builder 缺乏右键单击支持，这使得复制/粘贴内容变得困难。 您可以复制模块，并且有一种方法可以从模块的设置区域复制样式，但它不如 Elementor 高效，因为您每次要复制和粘贴样式时都需要打开模块的完整设置区域。

Beaver Builder 确实为您提供了类似于 Elementor 导航器的界面的高级视图，尽管您没有重命名元素的选项：

您还可以获得像 Elementor 这样的历史记录和修订日志。

风格/设计选项

接下来，让我们看看您在每个编辑器中获得的样式和设计选项。

就核心设计功能而言，这两个插件都为您提供了控制颜色、间距、排版等所需的一切。

但是，Elementor 为您提供了更高级的设计选项，尤其是在您升级到 Elementor Pro 时。 例如，Elementor Pro 可让您应用酷炫的运动效果、使用自定义定位等。 这是我认为很多网页设计师更喜欢 Elementor 而不是 Beaver Builder 的一个重要原因。

元素

Elementor 允许您为任何部分、列或小部件配置样式和设计规则。 这些规则分为三个选项卡。 在这里，您可以访问颜色和排版等基本设置以及间距和其他效果的更高级设置：

正如我在开头提到的，Elementor 通常为您提供更多的设计灵活性。 以下是 Elementor 比 Beaver Builder 走得更远的三个最大示例：

• 运动效果- 让您在设计中添加炫酷的视觉和滚动效果 - 在此处了解更多信息
• 自定义定位- 使用绝对或相对定位让您对元素的位置进行像素级完美控制 - 在此处了解更多信息
• 单个元素的自定义 CSS - 允许您将自定义 CSS 添加到单个部分、列或小部件（而 Beaver Builder 仅允许您将自定义 CSS 添加到页面或将类添加到单个元素）

对于站点范围的设计，Elementor 带有自己的设计系统，可让您设置站点范围的颜色和排版。

这些站点范围的设置类似于 CSS 变量：如果您更新设置，它将自动更新您站点上的每个实例（除非您手动覆盖默认值以选择自定义颜色）：

请注意，此处的所有独特设计选项都需要 Elementor Pro。 Elementor 的免费版本仍然相当实用； 它只是没有给你最独特的选择。

海狸生成器

Beaver Builder 可以很好地处理所有基础知识。 但是，它不提供 Elementor Pro 提供的高级设计选项（我在上面详述）。

尽管如此，大多数人可能不需要动态效果或自定义定位。 因此，虽然 Elementor 可能会给您“更多”，但如果您只是创建简单的设计和/或您不是网页设计师，那么这可能不会对您产生有意义的影响。

与 Elementor 一样，Beaver Builder 允许您在行、列或模块级别控制样式/设计选项。 这些设置也分为三个选项卡：

您还可以添加颜色预设来帮助您快速应用一致的颜色。

但是，您不能将它们用作 Elementor 允许的一种 CSS 变量。 也就是说，您不能一次更新您的预设并让该更改自动传播到您的整个站点：

响应式设计

默认情况下，Elementor 和 Beaver Builder 都创建响应式设计，这意味着无论人们使用什么设备，您的设计都可以正常工作。

它们还为您提供了使用响应式设计的其他工具。 这里有很多相似之处，所以我不会在本节中将它们并列比较。

Elementor 和 Beaver Builder 都允许您：

• 打开响应式预览以查看您的设计在不同设备上的外观
• 根据用户的设备自定义间距、大小等
• 根据用户的设备隐藏某些行、列或内容元素
• 自定义响应断点（Elementor 在这里稍强一些，因为它可以让你添加无限的自定义断点，而 Beaver Builder 只允许你自定义平板电脑和移动设备断点。）

这是 Elementor 中的响应式编辑模式：

而且，这是 Beaver Builder 中的响应式编辑模式：

模板

虽然 Elementor 和 Beaver Builder 都为您提供了从头开始构建复杂设计所需的所有工具，但如果您不是经验丰富的设计师，将所有这些部分放在一起可能会很困难。 为了提供帮助，这两个插件都带有各种类型的模板，您可以将其用作起点。

但是，如果您重视模板，Elementor 无疑是赢家，因为它为您提供了更多的模板，虽然设计是主观的，但我认为 Elementor 的模板看起来更好（而且它们还涵盖了更多的利基）。

Elementor 还为您提供了 Beaver Builder 不提供的完整网站模板工具包。

元素

在高层次上，Elementor 为您提供了两种类型的模板：

• 页面——这些是整页模板
• 块- 这些是部分模板（您可以将多个块添加到页面以创建完整的设计）

Elementor 还提供网站工具包，它们是多个页面模板的集合，可帮助您构建完整的网站。 例如，您获得一个用于主页的模板，另一个用于联系页面，另一个用于服务页面，等等。

目前，Elementor 提供 80 多个网站工具包，但您需要 Elementor Pro 才能访问它们。 在这里浏览它们。

您还可以选择将自己的设计保存为页面或块模板，以便以后快速重复使用它们。 还有一个很酷的第三方服务，称为 WunderWP，可让您将自定义 Elementor 模板保存到云中，并在您的所有 Elementor 网站上重复使用它们。

最后，我们将讨论的一些 Elementor 功能有自己的模板。 这包括主题、WooCommerce 和弹出窗口构建器。 例如，如果您在弹出窗口构建器中工作，您还将获得一堆弹出模板。

海狸生成器

Beaver Builder 为您提供两种类型的模板：

• 行- 页面特定部分的模板（您可以将它们放在一起以创建整页设计）
• 页面——整页模板分为登陆页面和内容页面

但是，正如我之前提到的，选择并不像 Elementor 提供的那样大或多样化。

您还可以将自己的设计保存为模板，以便以后快速重复使用它们。

模板的一件很酷的事情是 Beaver Builder 开发人员刚刚推出了他们自己的 Assistant Pro 插件，可让您将 Beaver Builder 模板保存到云中并在多个站点中重复使用它们。 由于 Assistant Pro 还可以与 Elementor（和其他一些构建器）一起使用，因此即使您选择 Elementor，也值得一试。

主题建筑

虽然 Elementor 和 Beaver Builder 都是作为专门的页面构建器插件开始的，但它们都添加了完整的主题构建器功能。

通过主题构建，您可以使用可视化拖放设计来自定义您的主题模板，包括：

• 标题
• 页脚
• 单个（单个帖子、页面和自定义帖子类型使用的模板）
• 存档（列出您的博客帖子或自定义帖子类型的帖子的模板）

这是关键的区别：

• 页面构建：您设计单个帖子或页面。 您可以将设计保存为模板以重复使用它，但您需要在要使用它的任何地方手动应用该设计。
• 主题构建：您创建您的帖子和页面将自动使用的实际主题模板设计。 例如，如果您撰写新的博客文章，您在常规 WordPress 编辑器中添加的内容将自动显示在您的主题构建模板中。 您还可以设计页眉和页脚模板。

这两个插件还支持来自自定义字段的动态内容，这意味着您可以使用您使用高级自定义字段 (ACF)、工具集、Pod 等插件添加的自定义字段中的内容填充模板。

元素

使用 Elementor Pro 的主题构建器，您可以获得一个特殊的界面来管理您的主题模板部分：

创建主题模板时，您将使用相同的可视化编辑器。 唯一的区别是您可以获得动态主题小部件来构建您的设计。

例如，如果您正在构建一个帖子模板，您将获得用于插入帖子标题、帖子内容、作者等的小部件：

您还可以使用动态标签功能从您的站点或您添加的自定义字段中插入动态内容。

您可以使用动态内容来填充文本、图像、链接等，这为构建自定义内容站点提供了很大的灵活性：

在发布模板之前，您可以选择将其用于整个网站或仅用于特定内容，例如特定类别的博客文章：

海狸生成器

要将主题建筑添加到 Beaver Builder，您需要购买官方的 Beaver Themer 扩展。 更多关于定价稍后。

关于 Beaver Themer 需要注意的一件事是，它不提供与所有主题的完全兼容性，而 Elementor Pro 提供。

您可以使用任何主题创建单个和存档模板，但如果您的主题与 Beaver Themer 兼容，您将只能构建页眉或页脚模板。

为了解决这个问题，您可以使用官方 Beaver Builder 主题或流行的主题，例如 Astra、GeneratePress 和 Genesis — 完整列表在这里。

创建模板后，您可以使用显示条件来控制要显示该模板的位置。 Beaver Builder 在这里非常强大 - 除了让您定位内容之外，您还可以定位：

• 用户行为，例如用户登录状态、用户角色等
• 发布详细信息，例如标题或自定义字段
• WordPress 条件标签

这些详细的规则是 Beaver Themer 比 Elementor Pro 做得更好的地方，尽管大多数网站不需要这么精确：

从那里，您可以启动 Beaver Builder 界面来设计模板。 与 Elementor 一样，您将使用常规编辑器以及一些专用的 Themer 模块：

Beaver Themer 还允许您从使用 ACF 等插件添加的自定义字段中插入信息：

其他显着特点

除了我们上面讨论的内容之外，每个构建器都有一些独特的功能。 让我们来看看它们。

元素

Elementor 的独特功能之一是它的弹出窗口生成器。 使用弹出窗口构建器，您可以使用相同的 Elementor 界面来设计所有不同类型的弹出窗口，包括模式弹出窗口、通知栏、全屏填充、滑入等等：

在发布弹出窗口之前，您将应用详细的定位和触发规则来控制它应该出现的位置和时间：

总的来说，我会说 Elementor 弹出窗口构建器完全消除了对第三方弹出插件的需要。 但是，缺少的一个功能是它不包括内置的 A/B 测试或分析。

尽管如此，这是一项非常有价值的功能，而 Beaver Builder 不提供。

海狸生成器

如果您构建客户站点，您可能会喜欢 Beaver Builder 中的一项功能是它的白标。 从本质上讲，这使您可以用自己的品牌替换所有 Beaver Builder 品牌，从而为您的客户提供更具品牌特色的网站。 Elementor 不提供白色标签。

Beaver Builder 击败 Elementor 的另一个领域是 WordPress 多站点支持。 Elementor确实支持多站点，但是您需要为每个网络站点提供一个有效的许可证密钥，从预算的角度来看，这有点令人失望。

另一方面，Beaver Builder 只需要一个许可证密钥，这意味着您可以免费为整个多站点网络供电。

性能测试

每当您使用 WordPress 页面构建器时，与仅使用本机 WordPress 编辑器相比，您总是会至少牺牲一点性能。 但是，有些构建器比其他构建器更好，这就是为什么我认为测试 Elementor 与 Beaver Builder 性能很有用。

为了测试这一点，我为每个构建器设置了一个相同的测试页面。 这些站点使用相同的主题（我们的轻量级悉尼主题）并包含等效的小部件/模块。

对于我的 Elementor 测试站点，我运行了两个不同的公平测试：

1. 我激活了 Elementor 以速度为中心的实验以改进资产和 CSS 加载的测试，我建议您在新网站上进行
2. 使用默认配置的测试（停用实验）

这是整个页面（包括主题）的每个页面的权重：

总体而言，Beaver Builder 在开箱即用优化方面具有优势。 但是，只要您遵循其他 WordPress 性能最佳实践，我认为差异没有那么大。

例如，当我将 WP Rocket 添加到我的 Elementor 测试站点时，看看数字是如何下降的：

阅读我的 WP Rocket 评论，了解它为何如此有效。

基本上，虽然 Beaver Builder 开箱即用更轻量级，但如果您正在实施性能最佳实践，您仍然可以使用 Elementor 构建快速加载网站。 出于这个原因，我不知道性能应该在你的决定中发挥最大的作用。

免费版本

Elementor 和 Beaver Builder 都在 WordPress.org 上提供免费版本。 但是，免费版本之间没有可比性； Elementor 是明显的赢家。

Elementor 的免费版本是一个功能齐全的插件，您可以通过多种方式使用它。 我很高兴在我的网站上使用了免费版本的 Elementor，我们还使用它来为悉尼主题的入门网站提供支持。

虽然 Beaver Builder 的免费版本在界面方面具有功能性，但它的模块选择非常有限，这使得创建复杂的设计不切实际。

总体而言，如果您专门寻找免费工具并且不愿意支付任何费用，那么 Elementor 的免费版本功能要强大得多。

高级版本的定价

就高级版本的定价而言，Elementor 与 Beaver Builder 之间没有明显的赢家，因为在某些情况下，每一种都可以更实惠。

让我们先谈谈定价是什么，然后我将在上下文中比较价格。

Elementor Pro 定价

Elementor Pro 是核心 Elementor 插件的附加组件，可让您访问以下内容：

• 50 多个新小部件
• 主题构建器和 WooCommerce 构建器功能
• 弹出窗口生成器
• 更多设计选择
• 更多模板

Elementor Pro 提供五种不同的计划。 计划之间的主要区别在于您可以使用 Elementor Pro 的网站数量，但更高级别的计划还可以访问更多网站工具包模板和 VIP 支持：

• 必备– 一个站点 49 美元
• 专业版– 三个站点 99 美元（主定价表中未显示；您必须单击我在下面突出显示的链接。）
• 专家– 25 个站点 199 美元
• Studio – 100 个站点 499 美元
• 代理机构——1000 个站点 999 美元

您需要每年续订许可证才能继续使用 Pro 模块并获得支持和更新。 如果您的许可证变得无效，您现有的 Elementor Pro 设计将继续工作。 但是，如果没有有效的许可证，您将无法将新的Pro 模块添加到您的设计中。

海狸生成器定价

Beaver Builder 的高级版本使您可以访问完整的模块选择以及更多模板和其他一些附加功能。

Beaver Builder 提供三种不同的定价计划，但大多数人只需要 99 美元的标准计划。

与 Elementor 不同，Beaver Builder 的所有计划都允许在无限站点上使用。

我认为获得更高级别计划的唯一有意义的原因*是：

1. 您需要多站点支持（专业计划）。
2. 您需要白标（代理计划）。

*我发现 Beaver Builder 主题不再那么有价值了，因为现在有许多高质量的轻量级基础主题。

与 Elementor Pro 不同，Beaver Builder 在核心插件中不包含主题构建。 相反，您需要购买 Beaver Themer 扩展来添加主题构建。

Beaver Themer 在无限站点上使用的费用为 147 美元。

所以 - 这是大多数人会支付的：

• 在无限网站上建立页面- 99 美元
• 在无限站点上构建主题- 246 美元

要在第一年后继续获得支持和更新，您需要续订许可证。 但是，Beaver Builder 提供 40% 的折扣，可以为您节省一些钱。

Elementor Pro 与 Beaver Builder 定价

正如我在开头提到的，Elementor Pro 和 Beaver Builder 在不同的情况下都可以更实惠。 有两个因素会影响这一点：

• 您计划在多少个网站上使用该插件
• 是否需要主题构建

以下是它的分解方式：

如果您只需要页面构建（没有主题构建） ：

• Elementor Pro 对于单个站点来说更便宜（49 美元）。
• Elementor Pro 和 Beaver Builder 最多可用于三个站点（99 美元）。
• Beaver Builder 对于三个以上的站点更便宜（99 美元无限制）。

如果您需要主题构建：

• Elementor Pro 最多可用于 25 个站点（49 - 199 美元，具体取决于站点数量）。
• 对于超过 25 个站点，“Beaver Builder + Beaver Themer”更便宜（无限站点 246 美元）。

另一个考虑因素是续订价格。 第一年后，这两个插件都要求您续订许可证才能继续获得支持和更新。 但是，Elementor 在续订时收取全价，而 Beaver Builder 为您提供 40% 的折扣。

第三方扩展

虽然 Elementor 和 Beaver Builder 都包含核心插件中的功能，但它们也都拥有充满活力的第三方扩展市场。

使用这两个插件，您可以使用扩展来添加更多：

• 小部件/模块
• 模板
• 设计选项
• 特征

总体而言，Elementor 拥有更大的市场，因为它更受欢迎，但 Beaver Builder 在扩展方面仍处于领先地位。

如果您想查看一些示例，我们在每个示例中都有帖子：

• 最佳 Elementor 附加组件
• 最佳 Beaver Builder 附加组件

社区支持/学习资源

Elementor 和 Beaver Builder 都为具有有效许可证的客户提供官方支持。 然而，官方支持更多的是插件的问题（例如错误），而不是简单地学习如何使用它。

在提升技能和知识方面，您将主要依靠三个渠道：

• 来自开发者的官方资源
• 用户社区（通常在 Facebook 上）
• 第三方学习资源（例如博客或 YouTube 频道）

元素

Elementor 为所有付费客户提供专门的支持。 三个最便宜的计划（ Essential 、 Pro和Expert ）的客户平均在一天内获得票务响应，而Studio和Agency客户在 30 分钟内获得 VIP 支持。 还有一个详细的知识库。

如果您愿意走社区支持路线，您可以从 Elementor 拥有超过 122,000 名成员的官方 Facebook 群组获得非常快速的回复。 或者，有一个官方论坛。

Elementor 也有自己的 YouTube 频道和博客资源。 您还可以找到许多第三方资源。

海狸生成器

Beaver Builder 为所有付费客户提供支持。 在工作日期间，他们会在几个小时内或最多一个工作日内回答大多数问题。 不过，他们不在周末或美国节假日提供支持。

您还可以通过三个官方渠道获得社区支持：

• 拥有超过 16,000 名成员的官方 Facebook 群组
• Beaver Builder 的 Slack 频道
• 官方社区论坛

Beaver Builder 也有一个官方的 YouTube 频道，但是，它不像 Elementor 的频道那么活跃。 您还可以找到大量第三方 YouTube 视频或博客，尽管没有 Elementor 那么多，因为 Beaver Builder 不那么受欢迎。

Elementor vs Beaver Builder：您应该使用哪一个？

现在有一个重要问题：您应该使用 Elementor 还是 Beaver Builder？

让我们来看看几个场景，因为我认为答案取决于你的情况。

“平均” WordPress 用户

如果您是正在寻找可在您自己的网站上使用的工具的“普通”WordPress 用户，我认为您可能应该从 Elementor 开始。

我推荐 Elementor 作为临时用户的更好选择有几个原因：

• 免费版非常实用； 许多临时用户都可以使用免费版本。
• 如果您只需要用于单个站点（或仅几个站点）的工具，Elementor Pro 会更便宜。
• 它提供了更多的设计选项，从而消除了依赖自定义 CSS 的需要（对非技术人员有好处）。
• 您可以访问更多模板，这意味着您无需从头开始。
• Elementor Pro 具有更多功能，例如弹出窗口构建器。
• Elementor 社区更大，这意味着更容易找到社区帮助和了解 Elementor。

网页设计师

如果您是构建客户端网站的网页设计师，我认为您也会更喜欢 Elementor，因为它为您提供了比 Beaver Builder 更多的设计选项。 例如：

• 运动效果
• 自定义定位
• 将 CSS 直接添加到元素
• 整个网站的设计系统，以确保有凝聚力的设计

基本上，您可以获得更多用于创建酷设计的工具。

网络开发人员

如果您是一名 Web 开发人员，正在寻找一种可视化设计工具来简化您的工作流程，我认为您可能会更喜欢 Beaver Builder。

根据我的经验，Web 开发人员更喜欢 Beaver Builder 专注的方法，它可以很好地完成核心工作并保持稳定性，而不是添加尽可能多的功能。

另外，有些人更喜欢拥有更少的功能。 一个人的“功能”可能是另一个人的“臃肿”，如果他们不需要该功能。

Beaver Builder 开箱即用也更轻量级，我认为很多 Web 开发人员更喜欢它。

有预算意识的建设者

到目前为止，我一直在不考虑价格的情况下提出建议。 然而，对于很多人来说，价格是一个重要的问题。

所以——如果资金紧张，你应该使用 Elementor 还是 Beaver Builder？

好吧，首先，如果你的预算是 0 美元，那么你绝对应该使用 Elementor。 Elementor 的免费版本比 Beaver Builder 的免费版本功能强大得多——甚至还差得远。

但是，如果您需要主题构建等高级功能，则需要使用 Pro 版本。 在这种情况下，这是我的建议：

• 建立个人网站：如果您只在自己的几个网站上工作，Elementor Pro 可能会更便宜。
• 建立客户站点：如果您建立客户站点，即使您还需要购买 Beaver Themer，Beaver Builder 也会便宜得多。

关于 Beaver Builder 与 Elementor 的最终想法

最后，Elementor 和 Beaver Builder 都是出色的页面构建器插件，因此使用它们都不会出错。

但是，在此比较中我试图强调的功能和定价方面存在一些显着差异。 这些差异可能会将您推向一个或另一个方向，具体取决于您的价值和预算。

上面的推荐部分可以帮助您选择适合您需求的工具。

如果您想对这些插件有更多想法，还可以阅读我们的评论：

• Elementor Pro 评论
• 海狸生成器评论

您对构建器或我们的 Beaver Builder 与 Elementor 比较还有任何疑问吗？ 让我们在评论中知道。