Elementor vs Divi Builder vs Beaver Builder:2020年终极比较

TL; DR:这篇文章是Elementor vs Divi Builder vs Beaver Builder的详细比较。我们将为您提供易于浏览的概述,以及对每个页面构建器各个区域的更深入了解.


虽然页面构建器可能是WordPress核心用户中的一个分裂话题,但无可否认,在使普通用户可以访问设计时,他们对WordPress生态系统产生了巨大影响。.

除此之外,有时候似乎每家WordPress公司都倾注了自己的脚血来创建页面构建器。好的–有点夸张…但是那里有很多页面构建器.

在这篇文章中,我们想深入探讨三种最受欢迎​​的选择: Elementor vs Divi Builder与Beaver Builder

Elementor vs Divi Builder与Beaver Builder

除了让您了解每个页面构建器如何工作的基础知识之外,, 我们想进入地面以下. 因此,我们还将深入研究高级样式选项,响应式设计功能,代码锁定,实际性能,易用性等内容。.

在您阅读完此比较之后,我们希望您对每个插件和, 更重要的是, 有信心选择适合您的页面构建器.

元素
Divi Builder
海狸生成器

目录:
概述哪个页面构建器最受欢迎? |接口比较可用的内容模块|额外的样式可以走多远?这些建设者是否都具有移动响应能力? |每个构建器中的独特功能|预制模板可用|看代码质量和锁定|性能比较看看价格|易用性比较|最终裁决:选择哪个建造者

Contents

摘要:Elementor vs Divi Builder vs Beaver Builder

好的,我们将更详细地介绍所有内容。但是在我们向您扔出一系列功能特定的比较表,图片和GIF之前,我们认为快速概览一下Elementor,Divi Builder,Beaver Builder可能会有所帮助。.

如果您只需要突出显示,请阅读此表。如果您想了解所有细节,请继续阅读以下3,000个单词,以更深入地了解以下内容:

Elementor vs Divi Builder与Beaver Builder

元素
Divi Builder
海狸生成器

元素Divi Builder海狸生成器
免费版?
专业版的起拍价$ 49$ 89$ 99
使用方便4.9 / 54.8 / 55/5
视觉生成器?
内联编辑?
官方元素数量534631
最独特的功能嵌入到任何地方A / B测试海狸
预制模板300+〜114〜56
留下干净的代码?
表现排名第三名第一第二名

1个.

哪个页面构建器最受欢迎?

这并不是要确定哪个页面构建器最受欢迎,因为数字引用的内容略有不同.

不过,我们认为比较每个页面构建器的已发布用户数仍然是一个有趣的练习。它们的堆积方式如下:

* Elementor和Beaver Builder的编号来自WordPress.org,而Divi Builder的编号来自Elegant Themes网站。另外,Divi Builder的数量指的是Elegant Themes服务的客户总数,无论这些客户加入的原因如何(不仅仅是针对建筑商).

(图表由 可视化工具精简版.)

2.

看一下主页构建器的界面–它们是否提供真正的前端编辑?

虽然我们比较的所有三个页面构建器都提供了可视化的前端页面构建, 他们并没有完全以相同的方式去做.

在本节中,我们将研究每个页面构建器的主界面,并讨论一些使它们与众不同的怪癖.

页面构建器中的内容编辑界面

元素
Divi Builder
海狸生成器

视觉编辑
内联文字编辑
侧边栏控制面板
总体初学者友好度容易马上拿起需要几分钟来了解界面容易马上拿起

现在,我们逐一比较每个构建器的这些方面:

看看Elementor界面

Elementor将其界面分为两个核心部分:

  1. 左侧边栏,您可以在其中添加新元素并编辑现有元素的设置
  2. 直观地查看您的页面右侧

Elementor vs Divi Builder与Beaver Builder:Elementor界面

要将新元素添加到您的设计中,只需将其从左侧拖动,即可在实际页面上实时预览该元素的外观:

Elementor vs Divi Builder与Beaver Builder:Elementor拖放

您可以使用 添加新部分 按钮:

基本部分

要编辑元素的内容和样式,只需单击某个元素,然后您就可以在左侧边栏中对其进行编辑。您所做的任何更改将立即在您的网站预览中显示:

Elementor vs Divi Builder与Beaver Builder的Elementor编辑比较

要编辑各种元素中的文本,可以直接在页面上键入(内联编辑),也可以使用侧栏上的文本框。过去,您唯一的选择是该侧边栏框-但自2017年11月起,Elementor现在也可以为您提供内联编辑功能:

元素或内联编辑

稍后您将看到,Beaver Builder是此列表中唯一不提供这种内联编辑的页面构建器.

看看Divi Builder界面

尽管Divi Builder还提供了后端编辑界面,但我们将重点放在可视化编辑器上进行比较,因为可视化编辑器是大多数用户所喜欢的.

与Elementor不同,在您的站点的可视预览和Elementor控件侧边栏之间有明显的区别,Divi Builder选择将其所有选项叠加在实时可视预览之上.

初次打开Divi Builder时,界面如下所示:

Elementor vs Divi Builder与Beaver Builder:DIVI Builder界面

添加一个新的 模组 (Divi Builder的元素名称),您将使用各种 + 图标

Elementor vs Divi Builder vs Beaver Builder:将模块添加到divi builder

与Elementor一样,您可以直接在页面上键入以编辑设计中的文本,尽管Elementor的内联编辑在它所支持的元素上更为灵活.

您还可以通过拖放来重新排列模块:

编辑文本divi构建器

对于非文本模块,您通常会使用弹出框来编辑模块,而不是直接在页面中输入.

看看Beaver Builder界面

在界面方面, Beaver Builder与Elementor有更多共同之处 比Divi Builder更好.

与Elementor一样,Beaver Builder的侧边栏列出了所有可用的模块。要将模块添加到页面,您需要做的就是将其从右侧栏拖放到活动页面中:

Elementor vs Divi Builder vs Beaver Builder:添加模块Beaver Builder

但是,正如您在GIF尾部看到的那样,Beaver Builder使用不同的界面来编辑模块,选择了像Divi Builder这样的弹出窗口。.

Beaver Builder的一大优点是,您只需将一个模块拖到另一个模块旁边即可自动创建新列, 而Divi Builder和Elementor会强制您手动创建新列 在添加新元素之前。这是一件很小的事,但这会使设计过程感觉更加流畅.

Elementor vs Divi Builder vs Beaver Builder:创建列Beaver Builder

3.

您可以使用哪种内容模块来构建页面

元素或模块(术语经常互换使用)是页面构建器的重要组成部分,因为它们是设计的实际构建基块.

在上面的界面比较中,您看到了两种类型的模块:

  • 文本
  • 纽扣

但是大多数页面构建器还提供更长的元素列表,这些列表为您提供了更多利基元素,例如:

  • 感言
  • 联络表格
  • 定价表等

以下是每个模块当前可用的模块总数:

页面构建器中可用的模块数

元素
Divi Builder
海狸生成器

官方元素数量534631
使用WordPress小部件?✅但不容易。比其他模块更复杂
第三方附加组件?

由于这些页面构建器均提供大量模块,因此我们不再关注所有相同的模块。相反,我们将着重强调Elementor与Divi Builder与Beaver Builder之间的一些区别,以提供更多高级模块类型.

也就是说,以下是一些值得注意的模块: 由所有三个页面构建器共享:

所有三个页面构建器都不共享的模块 模组
元素
Divi Builder
海狸生成器
翻盖盒
专用音频播放器✅Soundcloud❌但可以使用小部件
动画标题
作品集
社交分享按钮
社会关注图标
登录
Facebook评论
人/队成员
本地评论

Beaver Builder绝对拥有最多的 "没有" 列表中的答案…但这不一定是破坏交易的人.

Beaver Builder仍然包含您可能每天使用的所有基本模块-它可能无法与其他两个提供的更多细分模块竞争.

4.

您可以在每个构建器中进行额外的样式设计

虽然页面构建者试图使设计尽可能简单,但几乎不可避免的是,与将模块拖入设计并每天称呼它相比,您想要做更多的样式设计.

因此,您需要一个页面构建器,以使您能够更好地控制各个元素和部分的外观和位置。在这里,您可能会发现Elementor与Divi Builder与Beaver Builder之间的最大差异.

简而言之,Elementor和Divi Builder提供了绝对最先进的样式选项,尽管Beaver Builder并不落后.

页面构建器中的样式选项

元素
Divi Builder
海狸生成器

基本样式
自定义边距/填充
自定义字体/印刷术
直接将自定义CSS添加到模块
自定义装订线

以下是所有详细信息:

Elementor高级样式选项

单击Elementor中的任何元素或部分时,您将在Elementor侧栏中看到三个标签:

  • 内容 –让您指定基本内容和对齐设置
  • 样式 –可让您设置字体,颜色,边框等内容(取决于元素)
  • 高级 –可让您添加自定义边距/填充,更改Z索引,入口动画,自定义CSS标识符/自定义CSS代码等

元素或高级样式选项

同样,您可以对各个部分进行大量控制,包括设置装订线,宽度等的能力:

基本或高级样式

Divi Builder高级样式选项

每当您点击 齿轮 图标或Divi Builder中模块或部分的图标,您会看到一个弹出窗口,其中包含更多高级设置选项.

与Elementor一样,Divi Builder也为您提供了三个不同的选项卡来管理模块,尽管每个选项卡中包含的内容略有不同:

  • 内容 –使您可以设置文本和基本格式设置选项
  • 设计 –可让您更改字体,边框,自定义边距/填充,大小和更多内容
  • 高级 –使您可以添加自定义CSS或CSS标识符,以及更改响应式设计设置

如您所见,这里与Elementor有很多重叠之处。这两个页面构建器都使您可以充分控制站点上的特定模块:

divi builder高级样式

同样,您也可以向行和节添加高级样式,包括自定义装订线宽度,相等的列高等:

divi生成器样式

Beaver Builder高级样式选项

与Divi Builder一样,Beaver Builder允许您通过显示弹出窗口来为模块或部分添加更多样式.

同样,像Elementor和Divi Builder一样,您将获得三个不同的选项卡(尽管某些模块的选项卡较少):

  • 一般 –让您设置基本内容和功能
  • 样式 –使您可以选择颜色,基本对齐方式,字体大小等
  • 高级 –使您可以添加自定义边距,响应设置,用户角色可见性,动画和CSS标识符

海狸生成器高级样式选项

Beaver Builder 2.0添加了一些其他样式选项,例如能够为某些元素(例如按钮)快速在平面,渐变或透明样式之间进行选择。.

这里仍然缺少的一项功能是能够将自定义CSS代码直接添加到模块中。但是,Beaver Builder确实有一个很酷的选择,其他两个页面构建器都没有:

根据用户是否登录到WordPress网站来隐藏或显示特定模块的选项.

您还可以向行和列添加高级样式,尽管设置并不像Elementor和Divi Builder那样详细,因为Beaver Builder缺乏添加更多高级样式(如列间距)的功能:

海狸生成器行设置

5.

这些建设者是否都具有移动响应能力??

由于自适应设计的重要性,因此您需要一个页面构建器,以使您可以将自适应设计功能添加到页面中.

下面,您将比较Elementor vs Divi Builder与Beaver Builder中提供的各种响应式设计功能

页面构建器中的响应式设计功能

元素
Divi Builder
海狸生成器

根据设备显示/隐藏内容
根据设备的不同边距
根据设备的不同字体大小
自定义断点❌(但是有一张票✅,但仅限整个站点。不适用于单个页面

另外,值得指出的是 初级用户 似乎非常享受该构建器的移动设计功能。这是我们从Facebook进行的一项快速调查中获得的评论(问: "说服您使用Elementor代替其他流行的Builder插件的前1-3件事情是什么?"):

调查Elementor移动

6.

每个页面构建器提供哪些独特功能?

使用WordPress页面构建器,很多事情都是一样的…

当然,上面的比较中有很多细微的差异–但是核心页面构建界面非常相似。也就是说,您可以将元素拖放到页面上,并根据需要进一步设置样式.

但是现在,我们想深入研究Elementor vs Divi Builder vs Beaver Builder的一些独特功能。这些都是常规页面构建界面之外的内容,并附加了有用的新功能。当Elementor vs Divi Builder vs Beaver Builder决定时,它们还可以帮助您做出决定。.

Elementor的独特功能

Elementor在创建与众不同的独特功能方面做得非常出色。以下是一些大问题:

  • 嵌入到任何地方 –允许您使用小部件和短代码将Elementor设计嵌入网站中的任何位置,包括侧边栏,页脚和其他区域.
  • 维护/即将推出模式 –使您可以使用Elementor设计维护模式或即将到来的页面 实际上是直接从Elementor界面打开这些页面的.
  • 形状分隔线 –很酷的设计效果,可让您直接从Elementor界面向设计添加SVG形状.

Elementor vs Divi Builder与Beaver Builder:Elementor形状分隔线

Divi Builder的独特功能

不甘示弱– Divi Builder具有强大的内置功能:

分割测试.

Divi Builder使您可以从后端构建器界面轻松地为特定模块设置A / B / n测试。然后,您可以比较这些模块对特定目标的影响,以选择效果最好的版本:

Elementor vs Divi Builder与Beaver Builder:Div Builder拆分测试

其他独特功能包括:

  • Divi角色编辑器 –使您可以根据用户角色来限制对某些Divi Builder功能(甚至是特定模块)的访问。另外两个页面构建器包括基本的角色限制-但与Divi Builder一样详细.
  • 锁元件 –另一个有用的功能是 "锁" 某些模块,以避免意外更改完成的模块.
  • 复制模块样式 – Divi Builder无需复制整个模块,而是仅复制样式.

实际上,我们可以将大部分 "右键点击" 这里的选项. 其他页面构建器均不允许您右键单击以进行更改

div右键单击功能

Beaver Builder的独特功能

Beaver Builder最独特的功能之一是最近发布的Beaver Themer附加组件。该插件是单独购买的,但实际上,它使您可以使用相同的Beaver Builder界面来构建整个主题,包括标题,单个帖子布局等。.

此外,默认情况下,Beaver Builder是唯一包含白标签功能的插件。尽管临时用户可能并不在意此功能,但许多WordPress开发人员发现此功能很重要.

7.

每个页面构建器提供什么样的预制模板?

虽然页面构建器的主要优点是您可以从头开始构建自己的设计,但不必这样做。这是因为这些页面构建器中的每一个都带有预制的布局库.

页面构建器中可用的设计模板

元素
Divi Builder
海狸生成器

预制布局的数量100+〜42〜56

Elementor预制布局和库功能

Elementor的卖点之一是它附带 超过100 预设计的模板。这些模板涵盖了以下内容:

  • 主页
  • 登陆页面
  • 联系页面
  • 服务清单页面
  • 定价页面
  • 即将推出的页面
  • 登录页面

对于每种类型的页面,您通常都有针对特定细分市场的设计。如果还不够,您还可以在网络上找到更多Elementor模板.

Elementor vs Divi Builder与Beaver Builder:Elementor模板

您还可以将自己的页面设计(或节/行设计)保存到Elementor库中,以快速重复使用它们.

Divi Builder的预制布局和库功能

Divi Builder带有约42个预制布局。 Divi Builder的布局无需关注Elementor模板等特定的细分市场,而是可以根据需要自定义的一般页面类型(此外,网络上还有多个第三方Divi布局可用):

Elementor vs Divi Builder与Beaver Builder:DIVI Builder模板

与Elementor一样,您也可以将模块,节或完整设计保存到库中,以根据需要快速重用.

Beaver Builder预制的布局和库功能

Beaver Builder包括约56个预制模板,分为两个类别:

  • 登陆页面
  • 内容页

着陆页模板分为特定的细分市场,而内容页面通常更为通用:

Elementor vs Divi Builder与Beaver Builder:Beaver Builder模板

像其他两个页面构建器一样,您也可以将自己的部分或页面保存到库中以根据需要重用它们.

谁拥有最好的模板?在这里发推文:

8.

查看每个页面构建器的代码质量和锁定

在代码质量方面,页面构建器与许多开发人员的关系很糟。此外,某些基于短码的页面构建器(例如Divi Builder)可能会导致 "锁定," 这样,如果您停用了插件,您的内容就会变成一堆短代码.

在本节中,我们将看两件事:

  • 插件输出什么样的代码?
  • 如果您需要停用插件会怎样??

为此,我们将为每个页面构建器创建相似的设计和布局。然后,我们将看到Elementor vs Divi Builder与Beaver Builder之间的代码是什么样的,更重要的是,如果停用该插件会发生什么.

以防万一您感兴趣,以下是我与每个建筑商一起使用的设计:

Divi Builder页面设计Elementor vs Divi Builder与Beaver Builder:DIVI Builder示例
Beaver Builder页面设计Elementor vs Divi Builder与Beaver Builder:Beaver Builder示例

扰流板警报; Elementor和Beaver Builder留下了最干净的代码,而Divi Builder有一个不幸的短代码问题.

Elementor代码质量和锁定

激活后,Elementor的代码如下所示:

Elementor vs Divi Builder与Beaver Builder:Elementor代码

如果停用Elementor,这将对您的布局和代码产生影响:

元素或代码已停用

还不错!当您丢失所有花哨的格式和图标时,Elementor会留下干净的代码,这些代码至少保留了基本的格式,例如

标签和列表。您不能向页面构建器要求更多.

在我们进行的一项Facebook快速调查中,Elementor并未锁定您的事实也被指出是建筑商的主要优势之一(问: "说服您使用Elementor代替其他流行的Builder插件的前1-3件事情是什么?"):

调查Elementor简码

Divi Builder代码质量和锁定

启用后,Divi Builder的代码看起来很像Elementor的代码:

Elementor vs Divi Builder vs Beaver Builder:divi构建器代码

但是,如果停用Divi Builder,您会感到非常惊讶……

禁用divi生成器

哎哟!这简直就是一堆乱码。这就是为什么有人批评Divi的锁定问题.

Beaver Builder代码质量和锁定

启用后,Beaver Builder的代码与其他两个代码非常相似:

Elementor vs Divi Builder与Beaver Builder:Beaver Builder代码

禁用它时,它会留下诸如Elementor之类的干净代码。实际上,据我所知,留下的代码与Elementor几乎相同:

海狸生成器已停用

9.

Elementor vs Divi Builder vs Beaver Builder的性能比较

与代码质量捆绑在一起,另一个重要的考虑因素是每个页面构建器如何影响性能。比原始页面加载时间更有趣的是页面大小和请求数.

为了在Elementor vs Divi Builder与Beaver Builder之间进行测试,我们将从上面的示例中进行考察,并通过Pingdom运行它们以收集页面加载时间和其他相关数据。注–测试站点未运行缓存或任何其他页面速度优化.

Elementor vs Divi Builder与Beaver Builder:性能比较

元素
Divi Builder
海狸生成器

加载时间1.47秒1.32秒1.38秒
页面大小698.2 KB606.0 kB639.0 kB
要求433033

尽管页面加载时间太短,无法得出任何结论,但可以说,至少对于此测试布局,Divi Builder在页面大小和请求数方面是最优化的.

老实说,我们知道这个结果可能会引起一些争议……但这就是我们进行测试时的数字.

以供参考:

基本性能Elementor vs Divi Builder与Beaver Builder:Elementor性能
Divi Builder的性能Elementor vs Divi Builder与Beaver Builder:DIV Builder性能
Beaver Builder的性能Elementor vs Divi Builder与Beaver Builder:Beaver Builder的性能

与以往一样,您的行驶里程可能会有所不同,似乎其他两个建筑商的表现也同样受到称赞.

例如,这是 海狸建设者组 在脸书上不得不说:

调查Beaver Builder

10.

查看每个页面构建器的定价

Elementor和Beaver Builder在免费增值模型上运行,而Divi Builder仅属于Elegant Themes成员资格的一部分.

在两个免费增值插件中, Elementor提供功能更丰富的免费版本. Elementor还提供了最便宜的Pro版本,尽管最便宜的计划仅支持一个站点,而Divi Builder和Beaver Builder的计划都支持无限的站点.

这是所有内容叠加的方式:

Elementor vs Divi Builder与Beaver Builder:定价

元素
Divi Builder
海狸生成器

*只要花89美元,您就可以使用Elegant Themes出售的每一种产品,从而增加了物有所值.
免费版?
专业起拍价$ 49$ 89 *$ 99
无限站点计划?
终身更新计划?

11.

易用性:开始使用每个页面构建器有多么容易

这个部分很难编写,因为它很难消除我每天都会使用和撰写WordPress的人的偏见。也就是说,我认为 "简单" 并不总是与临时WordPress用户发现的内容匹配 "简单."

总的来说,我认为这三个都是用户友好的并且易于上手。但是,如果我必须对它们进行排名,则可以按以下顺序排列它们:

海狸生成器

我认为能够通过拖放创建新列使立即开始构建变得容易.

作者的易用性等级:5/5

Divi Builder

尽管起初部分,行和模块之间的相互作用可能会有点混乱,但我已经与许多初学者交谈,他们发现Divi Builder的内联文本编辑非常直观.

作者的易用性等级:4.8 / 5

元素

自从Elementor引入了内联编辑功能以来,我唯一真正的抱怨是创建新列并不像Beaver Builder那样容易。不过,这只是个小问题,如果您非常重视内联编辑,则可能可以证明Elementor是第一名.

作者的易用性等级:4.9 / 5

再说一遍–两者之间的差异绝不是很大,总的来说,我发现它们都易于使用.

值得一提的是,与易用性主题相关的还有客户/用户支持质量。基本上,您在给定构建器上的总体经验在很大程度上取决于确定构建器的某些非显而易见方面的难易程度,或在多大程度上愿意帮助支持团队.

但是,这很难评估,只有在您使用构建器一段时间后才能发现。您可能会发现所有三个支持团队的好坏评论– Elementor,Divi Builder和Beaver Builder.

这是一个(元素):

调查Elementor支持

Elementor vs Divi Builder vs Beaver Builder:您应该选择哪个?

尽管您总是可以自己使用这些页面构建器中的每一个,然后看看哪一个最合适,但是我们猜测您可能正在阅读本文,因为您希望我们可以帮助您。所以,Elementor vs Divi Builder vs Beaver Builder之间最适合您的选择?

通常,与使用Divi Builder相比,Elementor和Beaver Builder彼此共享更多的共同点。.

因此,在Elementor / Beaver Builder和Divi Builder之间进行有意义的划分比较容易。在Elementor和Beaver Builder之间进行论证比较困难.

不过,我们将尝试…

就像我们的Divi vs Avada vs X Theme比较一样,我们将问您以下哪种陈述最适合您:

(一个)

  • 我喜欢能够直接在页面上编辑文本(嵌入式编辑).
  • 我想要尽可能多的高级样式和响应设计选项.
  • 我想要尽可能多的预制模板.
  • 如果我停用了页面构建器,则必须留下干净的代码,这一点很重要.

单击此处显示Elementor

(B)

  • 我喜欢能够直接在页面上编辑文本(嵌入式编辑).
  • 我喜欢通过拆分测试优化设计.
  • 我不打算切换页面构建器-选择一个页面构建器后,我会使用很长时间.
  • 我重视拥有庞大的第三方社区,可以寻求帮助.

单击此处显示Divi Builder

(C)

  • 我喜欢用页面构建器构建整个主题的想法
  • 我认为能够通过拖放创建多列设计会有所帮助
  • 如果我停用了页面构建器,则必须留下干净的代码,这一点很重要.

单击此处显示Beaver Builder

这进一步完善了我们对Elementor,Divi Builder和Beaver Builder的比较。现在我们想听听您的消息– 您对这三个出色的页面构建器有何看法? 您是否比其他人更喜欢?您是否认为我们错过了一项重要的差异化功能?

让我们在评论中知道!

别忘了加入我们的速成班,以加快WordPress网站的速度。通过一些简单的修复,您甚至可以减少50-80%的加载时间:

Colin Newcomer和Karol K的原文.
Karol K的布局和演示.

*这篇文章包含会员链接,这意味着,如果您单击其中一个产品链接,然后购买该产品,我们将收取一小笔费用。不用担心,您仍然需要支付标准金额,因此您无需承担任何费用.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Like this post? Please share to your friends:
    Adblock
    detector
    map