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 主题？