Beaver Builder 与 Visual Composer：哪个 WordPress 页面生成器更好？

想知道 Beaver Builder 与 Visual Composer 之间的区别吗？ Beaver Builder 和最初的 Visual Composer 从一开始就是 WordPress 页面构建器市场的创新者。

多年来，这两种产品都经历了很多变化。 事实上，曾经被称为 Visual Composer 的现在被称为 WPBakery Page Builder，而新的 Visual Composer 是对经典页面构建器的更现代的版本。

我们将在这篇文章中分解 Beaver Builder 和新的 Visual Composer，看看它们在几个不同的领域如何相互比较。 我们将介绍每个插件，看看每个页面构建器必须提供什么，描述每个解决方案可用的一些附加功能，并为您提供他们的定价结构。

什么是海狸生成器？

Beaver Builder 是一个前端可视化编辑器插件，自 2014 年推出以来一直是 WordPress 页面构建器领域的创新者。它已在超过 100 万个网站上使用，并在 WordPress.org 上保持 4.8 的平均星级。 Beaver Builder 编辑器具有预构建的布局模板、内容模块和自定义选项，可用于构建令人惊叹的页面和帖子。

官方 Beaver Builder 主题也可用于两个高级版本。 它与 Beaver Builder 插件完全集成，并且有页眉、页脚和帖子内容的主题设置以及默认字体、颜色和按钮的设置，这些设置也为 Beaver Builder 插件设置了默认值。

什么是视觉作曲家？

直到几年前，Visual Composer 还是用于支持 Envato 市场上数百个主题的页面构建器。 当广受欢迎的页面构建器更名为 WPBakery 页面构建器时，情况发生了变化。

该插件的开发人员随后创建了一个新产品，该产品改进了原始 Visual Composer 的页面和网站构建功能。 开发人员希望通过 Beaver Builder 等直观的页面构建器使新产品更具竞争力，并摆脱 Envato 的终身许可证以更有效地支付开发成本。 尽管与旧产品名称混淆，但他们将这款新产品称为 Visual Composer。

与姊妹产品 WPBakery Page Builder 相比，新的 Visual Composer 的主要优势在于它能够通过允许您创建和编辑第三方主题的页眉、页脚和侧边栏来自定义任何主题。

Beaver Builder 与 Visual Composer：查看每个编辑器的页面构建功能

要开始比较 Beaver Builder 与 Visual Composer，让我们检查每个页面构建器，看看它们在以下方面提供了什么：

• 结构
• 模块
• 造型
• 高级自定义选项
• 模板

结构

在 Beaver Builder 编辑器中，您可以从头开始或拖入布局模板。 如果您使用模板，您可以随意更改：移动行和列、使用拖动手柄更改列宽、调整边距和填充，以及删除和添加任何您喜欢的内容模块。

如果从头开始创建页面，有两种方法。 使用第一种方法，您可以为计划插入内容的位置设置行和列的空白布局，以便您可以可视化布局框架。 为此，您最多可以拖入六列不同宽度的列，如此屏幕截图所示。

您不仅限于这些选择。 您可以在拖动列后调整其大小、在单行内添加垂直列层以及在列内创建列。

在第二种方法中，您可以将内容模块拖到空白布局中，它们会根据您放置它们的位置创建自己的行和列，因此您可以专注于内容并即时创建布局。

随着屏幕尺寸变小，列会自动堆叠，您可以选择颠倒堆叠顺序或防止堆叠。

在 Visual Composer 中，您还可以从头开始构建过程或使用导入的模板。 您可以选择删除主题的页眉、页脚和侧边栏的页面模板，从主题导入它们，或允许您为每个模板构建自定义布局。

当谈到编辑器的结构时，您将按行构建页面，向这些行添加列，并向列添加模块或“元素”。

有 10 种预制的列布局可供选择，但您可以通过添加、删除和调整列大小来根据自己的喜好自定义每种布局。 一旦您选择并配置了布局，您就可以开始将元素放入列中。

模块

Beaver Builder 有大约 30 个内容模块，分为六个类别。 选择涵盖了设计复杂、高转化率的着陆页和内容页所需的大部分内容。

如上面的屏幕截图所示，Beaver Builder Basic 类别模块允许您向页面添加文本、按钮和各种形式的媒体。 还有一个专门的媒体类别，提供推荐、地图、滑块和画廊。

操作类别（上面屏幕截图中的顶部类别）充满了旨在鼓励访问者通过单击操作按钮、填写表单或订阅您的电子邮件列表在您的页面上采取操作的模块。 在 Layout 类别（也显示在屏幕截图中）中，您可以使用定价表、手风琴或选项卡以视觉上有趣的方式呈现信息。 您还可以添加带有您定义的标准 WordPress 小部件组的侧边栏。 信息类别让您以可视方式呈现数字和时间计数器。 帖子类别具有以各种方式显示过滤后的帖子集的模块。 对于此示例，您可以将名为“新闻”的类别的前五个帖子显示为主页上的轮播。 最后，有一组模块可让您将任何单个 WordPress 小部件添加到页面的内容区域。

Beaver Builder 不提供的任何东西都可以通过使用第三方插件来添加，无论是添加额外模块的附加组件，还是具有可以插入到 Beaver Builder 布局中的短代码的产品。 当您安装 WooCommerce 时，Beaver Builder 会提供额外的与产品相关的模块，并具有用于在您的页面上显示产品的特殊选项。

Visual Composer 提供了数百种元素，尽管其中许多是不同样式的同一类型元素的变体，以节省您的时间并为您提供想法。

例如，大多数页面构建器只有一个按钮元素，用户可以通过配置其设置来创建不同的样式。 另一方面，Visual Composer 有超过两打的按钮元素，如下图所示。

幸运的是，大多数 Visual Composer 元素不会自动出现在编辑器的“添加元素”部分中，因此您不必对一堆很少使用的元素进行排序。 相反，您将使用 Visual Composer Hub，这是一个包含所有元素、块（预构建的行和列）、模板等的库，您可以将其导入编辑器的“添加元素”部分。 这些元素在“添加元素”部分组织成几个不同的类别，例如基本、媒体、容器和内容。

总的来说，您几乎可以向您创建的页面添加任何内容和样式。

造型

Beaver Builder 的样式选项因模块而异。 如果您的模块有文本，您通常可以更改其字体、字体大小、字体粗细和颜色，以及添加间距甚至文本阴影。

样式选项取决于模块，但例如可能允许您指定背景颜色、覆盖选项、填充、圆角、边框和框阴影。 某些模块具有独特的样式选项，例如 Number Counter 模块，您可以为其指定计数器填充和未填充部分的颜色，如此屏幕截图所示。

Visual Composer 没有像 Beaver Builder 和大多数其他页面构建器那样的元素的专用样式选项卡。 相反，您将在一个常规部分中添加和配置每个元素的内容和样式，如下面的屏幕截图所示。

样式选项会根据您正在编辑的元素而变化。 您通常可以更改元素的字体、颜色、形状和对齐方式，并添加诸如唯一 ID 和类之类的内容。 您还可以使用具有自己部分的设置添加框阴影。

高级自定义选项

每个 Beaver Builder 模块都具有几乎相同的高级选项集。 它们包括边距设置、动画样式和持续时间、可见性（例如，您希望只有登录用户才能看到元素）以及自定义 ID 和类的部分。 这是大多数高级选项卡的屏幕截图。 屏幕截图未显示 HTML 部分中的自定义 ID 和类字段。 此外，除了边距设置之外，行和列还有填充字段。

Visual Composer 的高级选项位于“设计选项”部分。 这是部分截图。

您可以自定义每个元素的边距、填充和边框大小，并为某些设备显示或隐藏单个元素。 您一次只能选择一种设备类型和尺寸，例如“桌面”、“平板横向”、“平板纵向”、“移动横向”。

您还可以为元素添加背景颜色、选择背景图像和配置动画设置。 高级背景选项不会覆盖常规部分中可用的背景选项。

模板

Beaver Builder 提供了几十个布局模板，您可以使用它们将预制的登录页面和内容页面加载到编辑器中，或者您可以从 100 行预先设计的内容中进行选择。 此屏幕截图显示了一些登录页面模板。

模板有多种样式和布局，适合一般需求或各种细分市场。 内容页面模板包括关于页面、团队页面和投资组合页面。

Visual Composer 具有相似数量的模板。 它们没有按类别组织，但它们提供了多样化的选择并帮助您构建各种不同的页面。 部分模板如下所示。

有不同利基、产品和风格的登陆页面，以及内容页面的完整设计。 甚至还有案例研究和博客布局模板。

附加的功能

新的 Visual Composer 和 WPBakery Page Builder 之间的最大区别在于 Visual Composer 能够编辑主题的页眉、页脚和侧边栏或从头开始创建它们。

这是开发人员赞不绝口的一项关键功能，而且由于 Beaver Builder 具有类似的功能，因此我们将介绍每个产品提供的一些附加功能。

官方主题

虽然这两种产品都适用于大多数主题，但 Beaver Builder 和 Visual Composer 都提供与其页面构建器集成的官方主题。

Beaver Builder 具有 Beaver Builder 主题。 它充分利用了 WordPress 内置的实时主题定制器，允许您对主题的页眉、页脚和样式进行全局更改，并实时查看结果。

该主题是使用广受欢迎且可靠的 Bootstrap CSS 框架构建的，其余代码也很干净。 这些属性提高了主题的整体性能，从而确保您的网站针对速度进行了优化，这是 SEO 和参与用户群的关键因素。 它还支持 WooCommerce。

Visual Composer 具有 Visual Composer 入门主题。 与 Beaver Builder 主题一样，它有许多可以自定义的主题和样式选项。 它还对 SEO 友好并支持 WooCommerce。

主题编辑器

您可以使用包含和排除规则指定布局将出现的任何位置。 您还可以使用条件逻辑为布局的显示时间创建其他类型的规则。 例如，对于您计划用于单个帖子的标题，您可以在设置帖子的特色图片时显示一个标题，而在未设置特色图片时显示不同的标题。 以下屏幕截图显示了编辑页面，您可以在其中指定标题布局的位置和任何条件规则。

Beaver Themer 还为标准 Beaver Builder 插件添加了两个功能。 首先，“高级”选项卡上的“可见性”部分添加了条件逻辑，让您可以更好地控制何时显示布局或内容。 例如，您可以仅向花费超过特定总金额的 WooCommerce 客户显示内容，或者向具有特定用户角色或能力的站点成员显示内容。

第二个功能是访问某些行和模块设置中的字段连接，这会从数据库中专门为正在查看的页面提取信息。 此功能支持 WordPress 自定义字段、高级自定义字段插件和 Pods 插件，因此您可以将自定义字段添加到页面，然后使用模块将它们显示在页面上。

Visual Composer 的主题构建器可用于所有高级计划。 它是 Beaver Themer 的精简版，仅允许您创建包含或排除侧边栏的自定义页眉、页脚和页面布局。 根据您的需要，您可能更喜欢更强大、更昂贵的 Beaver Themer 选项或更简单的 Visual Composer 解决方案。

保存物品以供重复使用

当您习惯使用页面构建器创建内容时，您可能会发现自己重用了自己的布局和设计。 Beaver Builder 具有内置功能，可让您保存任何行、列或模块以供重复使用。 您也可以保存自定义布局模板。 此屏幕截图显示了用于保存行的简单界面。

您可以导出保存的模板、行、列和模块，并将它们导入使用 Beaver Builder 的其他网站。 这与 Beaver Builder 为每个高级计划提供的无限制站点许可证结合使用效果很好。

虽然 WPBakery Page Builder 中提供了保存元素以供重用，但在撰写本文时，开发人员尚未将此功能添加到新的 Visual Composer。

定价和支持：Beaver Builder 与 Visual Composer

在比较 Beaver Builder 与 Visual Composer 的定价时，这两个插件都提供“免费增值”定价模型。 Beaver Builder 的免费版本仅提供几个模块：音频、照片、视频、HTML、文本编辑器和侧边栏。 没有模板，您无法保存自定义元素。

Visual Composer 的免费版本包括两个不同的按钮元素、一个 Google 字体标题元素以及两个不同的 YouTube 和 Vimeo 视频视频元素。 如果您创建一个免费帐户并连接您的网站，您将可以访问少量精心设计的免费模板。

Beaver Builder 提供三种高级计划：

• 标配 99 美元– 解锁对无限制站点许可证、所有高级模块和模板以及一年支持和更新的访问。
• 专业版，199 美元– 另外解锁 Beaver Builder 主题和多站点功能。
• 代理价格为 399 美元– 此外还可以解锁对多站点网络设置和白标的访问。

所有计划以 40% 的折扣续订。 支持可通过票务系统获得。 Beaver Themer 插件可作为附加组件供高级用户使用，价格为 147 美元，并以 40% 的折扣续订。 所有产品均享有 30 天退款政策。

Visual Composer 还提供三种高级计划：

• 单一网站 59 美元– 解锁一个站点许可证、高级模块和模板、页眉、页脚和侧边栏编辑器，以及一年的支持和更新。
• 3 个 149 美元的网站– 解锁三个网站许可证。
• 349 美元的开发人员– 解锁无限的站点许可证。

所有计划都以 40% 的折扣续订，并受 15 天退款政策的支持。 支持可通过票务系统获得。 入门主题是免费的，即使对于非高级用户也是如此。

最后的想法：Beaver Builder 与 Visual Composer

虽然 WPBakery Page Builder 中存在的一些功能在这里和那里都缺失了，但新的 Visual Composer 提供了很多功能，即使在其免费版本中也是如此。 不幸的是，最终结果是整体上笨拙的用户体验。

添加新元素和编辑现有元素通常会导致整个编辑器冻结几秒钟。 每次打开集线器都会触发 Firefox 的“网页正在减慢您的浏览器速度”警报。

最麻烦的是行和列的布局，尤其是当您使用导入的模板时。 错误地重新排列和调整行和列的大小真的很容易，而纠正它很麻烦。

Beaver Builder 和许多其他 WordPress 页面构建器使用起来更加直观和快速。 当您考虑 Beaver Themer 和保存/导出功能时，您可以使用 Beaver Builder 完成更多工作。

在比较 Beaver Builder 与 Visual Composer 时，您总是可以自己测试一下，看看您更喜欢哪个。 Beaver Builder 有一个演示，您可以用来检查它。 你也可以从他们的网站下载 Visual Composer 的免费版本来试一试。

想阅读更多？ 查看我们的 Beaver Builder 与 Elementor WordPress 页面构建器比较。

AJ莫里斯

AJ 拥有超过 20 年的与广泛客户合作和开发会员网站的经验。