Divi与Elementor：WordPress页面构建器插件比较

试图在Divi与Elementor之间做出决定来搭建您的WordPress网站？

Divi和Elementor是两个顶级的拖放式WordPress页面构建器。两者都让您无需任何技术知识即可构建100%自定义网站。除了帮助您构建页面外，它们还支持主题构建和高级动态内容集成。

但是，尽管它们有许多相似之处，但一些重要的差异可能会将您推向一个方向或另一个方向。

在这篇文章中，我们将深入比较Divi与Elementor，以帮助您选择适合您需求的选项。

我们不专注于挑选一个“赢家”。相反，我们将展示许多相同点和不同点，以帮助您选择适合您的工具。为此，我们将在六个关键领域比较Elementor与Divi。

1. 性能对比
2. 用户界面对比
3. 独特功能对比
4. 定价对比
5. 模板对比
6. 技术支持对比
7. 应该选择哪一个？

Divi与Elementor：性能对比

任何页面构建器的一个重要考虑因素是性能。也就是说，您创建的设计加载的速度有多快？

为了测试Divi与Elementor的性能，我们使用Divi和Elementor设置了相同的设计，并通过一些速度测试工具运行它们。

为了尽量做到这一点，我们在每个构建器之间使用相同的模块集和每个模块中的相同内容创建了我们的设计。

我们使用的模块是：

• 段落文字
• 按钮
• 计数器
• 基本联系表
• 价格表
• 两件式手风琴
• 客户感言

为了使其成为公平竞争，我们正在测试Divi Builder与Elementor和Elementor Pro的插件版本。我们这样做是为了使用相同的主题 ( Astra ) 来准确比较这些构建器的性能。

Divi测试页面

测试站点1：我们的Divi测试页面

我们的Divi测试页面是用以下资源制作的：

• Divi Builder插件
• Astra主题
• 使用上面的模块使用Divi构建的设计

Elementor测试页面

测试站点2：我们的Elementor测试页面

我们的Elementor测试页面是由：

• 免费的Elementor插件（我们禁用了Elementor的内置样式以支持继承主题样式）
• 元素专业版
• Astra主题
• 使用上面的模块使用Elementor构建的设计

需要注意的一件事是，Divi包含一个内置功能来缩小和组合其CSS和JavaScript，而Elementor则没有。出于这个原因，Divi更擅长限制其开箱即用的HTTP请求。

但是，您可以（并且应该）使用免费插件（例如 Autoptimize ）或高级优化插件（例如WP Rocket）轻松地向Elementor添加相同的优化。

因此，我们将运行两组测试：

1. 没有额外的性能优化
2. 已安装Autoptimize以缩小和组合脚本

使用第二个场景中的数字应该更准确地了解这两种工具在实时、性能优化的WordPress网站上的表现。但是，我们仍然包含未优化的数字，以向您展示当您未实施性能优化​​时它们的比较情况。

除了我们讨论的内容之外，我们没有对默认的WordPress环境进行任何更改。

我们将使用两个测试工具：

• web.dev：来自Google的使用Lighthouse的工具。它从移动设备进行测试。
• WebPageTest：流行的速度测试工具。我们已将其配置为从桌面设备进行测试。

Divi性能

我们将从Divi本身的结果开始（没有自动优化）。

WebPageTest（没有自动优化）：

Divi未添加优化下的WebPageTest结果

web.dev（没有自动优化）：

Divi未添加优化下的web.dev结果

这是安装了Autooptimize插件的Divi的结果。

WebPageTest（使用自动优化）：

Divi启用Autooptimize插件下的WebPageTest结果

web.dev（使用自动优化）：

Divi启用Autooptimize插件下的Divi web.dev结果

Elementor性能

我们还将从Elementor本身的结果开始（无自动优化）。

WebPageTest（没有自动优化）：

Elementor未添加优化下的WebPageTest结果

web.dev（没有自动优化）：

Elementor未添加优化下的web.dev结果

这是安装了Autooptimize插件的Elementor的结果。

WebPageTest（使用Autooptimize）：

Elementor使用Autooptimize插件下的WebPageTest结果

web.dev（使用Autooptimize）：

Elementor使用Autooptimize插件下的web.dev结果

性能结论

为了让您更轻松地使用这些数据，这里有两个表格将所有数据放在一起。

没有自动优化：

使用自动优化：

总体而言，你可以看到，Elementor确实有轻微的优势迪维以其较小的文件大小。它还在web.dev的Lighthouse审计中表现更好，并且在两个测试中的最大内容绘制时间都较短。

不过，差距并不大，迪维做了很多工作来缩小差距。总体而言，Elementor在性能方面略领先。

如果您想知道Divi主题如何与Elementor Pro和Hello主题进行比较，那么该领域将更加有利于Elementor，因为Hello主题比Divi的主题轻。从本质上讲，如果“Elementor + Astra”已经击败“Divi Builder + Astra”，那么如果将“Elementor + Hello”与“Divi Builder + Divi 主题”进行比较，差距只会变得更大。

Divi与Elementor：用户界面对比

用户界面很难客观地进行比较，因为很多都归结为个人喜好。有些人更喜欢Elementor的界面，而另一些人则更喜欢Divi的界面。

出于这个原因，我们不能在这里真正宣布一个赢家。相反，我们只会向您展示每个工具的界面是如何工作的，您可以选择最喜欢的方法。

客观的一件事是后端界面的“速度”，因为这将影响您构建设计的速度。过去，Elementor的后端用户界面绝对让人感觉“更快”。也就是说，设置面板打开速度更快，拖放更流畅等。

然而，Elegant Themes在2021年1月为Divi Builder发布了一个重大的后端性能更新，该更新取得了巨大的改进，将许多重要的后端操作加速了100-700%。在Elegant Themes设置的压力测试环境中，悬停在模块上的时间从891毫秒下降到383毫秒，提升了155%。

您绝对可以感受到这些变化，现在这两个构建器在后端都非常快。在此更改之后，很难宣布某个构建器成为后端性能的赢家。

Divi用户界面

当您打开Divi的视觉构建器时，它会向您显示您网站的全屏实时预览。底部有一个可折叠的浮动工具栏，当您将鼠标悬停在网站的不同部分时会出现浮动图标。

您可以单击各种图标来插入内容或布局。例如，黑色图标可让您插入新模块。

Divi界面

添加内容或布局元素后，您可以单击它以打开包含详细设置的弹出窗口。您可以调整此弹出窗口的大小或将其拖动到屏幕上的任何位置，让您可以根据自己的喜好自定义界面。

编辑Divi模块

对于文本内容，您还可以使用内联编辑，这意味着您只需在页面的实时预览中单击并键入即可。

如果单击页面底部的 ，可以展开菜单以选择不同的设备预览、打开后端编辑线框视图以及访问其他高级设置。

这是线框视图的样子：

Divi控制栏和线框视图

作为线框的替代方案，您还可以使用图层工具，它可以帮助您将内容组织成不同的结构。

Divi图层界面

另一个有用的功能是能够使用右键单击。您可以使用它来快速复制整个模块，或者只是从模块复制和粘贴设置配置。您还将获得其他有用的选项，例如能够“锁定”模块以避免意外更改。

在Divi中右键单击

总体而言，Divi界面的所有浮动图标有时会让人感到有些不知所措。但它确实擅长为您提供许多有用的工具和自定义选项。

它还为您提供了一些Elementor不提供的界面选项，例如线框视图。

Elementor用户界面

Elementor对其界面使用了稍微不同的方法。它在右侧显示您的设计的实时预览，在左侧显示一个固定的侧边栏（很像本机WordPress主题定制器）。

此侧边栏是您管理设计大部分设置的地方。例如，您可以在侧栏中查看小部件列表并将其中一个拖到您的设计中。

Elementor主界面

然后，您可以使用侧栏中的选项自定义小部件的样式、内容等。

编辑Elementor小部件

对于大多数文本内容，您还可以使用内联编辑。同样，这意味着您只需单击并输入实时预览即可。但是，Divi为内联编辑提供了更多支持，因为Elementor中仍有一些文本不支持此功能。

Elementor没有为您提供Divi提供的线框视图，但它确实带有一个非常有用的导航器工具。此工具为您提供页面结构的轮廓，很像Divi的图层工具。您还可以重命名元素以帮助您记住它们。

Elementor导航功能

在Elementor中使用右键单击

此外，您还将获得其他有用的工具，例如撤消/重做、设备预览、修订历史记录等。并且，与Divi一样，Elementor支持右键单击以让您在其他操作之上复制小部件及其设置。

总体而言，由于Elementor不像Divi那样依赖浮动图标，因此Elementor界面感觉更简洁，不那么压倒性。

Divi与Elementor：独特功能对比

在功能方面，这两个工具之间有很多重叠。例如，这两种工具都提供：

• 可视化拖放界面
• 完整的主题构建支持
• 支持动态数据

然而，每个插件也有一些特殊的技巧。在本节中，我们将比较每个构建器独有的功能。

Divi的独特功能

Divi最独特的功能之一是内置A/B测试，它使您可以对不同的模块进行拆分测试。例如，您可以测试不同CTA按钮的性能。

这是一个非常有用的营销工具，因此在更多以业务为中心的用例中，这是Divi的一大优势。

您可以使用Google Optimize或第三方Split Test for Elementor插件将A/B测试添加到Elementor ，但这不是您使用Divi获得的紧密内置功能。

Divi的内置A/B测试功能

表单模块内部还有一个重要的区别：条件逻辑。虽然Divi和Elementor Pro都提供灵活的表单小部件，但Divi的表单小部件包含内置条件逻辑，而Elementor Pro则没有。如果您不想使用第三方表单插件，但又想构建高级表单，那么这个附加功能非常好。

Divi还包括自己的内置角色编辑器，可让您控制不同WordPress用户角色可以访问的模块和设置。如果您正在构建客户端站点，您可以使用它来控制您的客户可以访问哪些Divi功能，这样他们就不会破坏某些内容。或者，您可以使用它来控制贡献者可以在您的站点上执行的操作。

Elementor确实包含一个基本的角色编辑器，用于授予或限制对整个Elementor界面的访问权限，但它不像Divi的角色编辑器那样精细。

最后，Divi有插件和主题两种版本，而Elementor只是一个插件。尽管Elementor团队确实提供了他们自己的轻量级主题Hello，该主题旨在与Elementor Pro配对。

Elementor的独特功能

Elementor Pro最独特的功能之一是它的Popup Builder。使用Popup Builder，您可以使用Elementor界面（及其所有小部件）来设计可在站点上的任何位置显示的自定义弹出窗口。

Elementor弹出窗口构建器功能

您可以创建不同类型的弹出窗口（模式、通知栏、滑入等），还可以使用常见的弹出窗口触发器（站点停留时间、滚动深度等）。您还将获得详细的定位规则来控制弹出窗口的出现时间。

这是一个超级灵活的功能，您可以将其用于所有类型的潜在客户生成，从电子邮件选择加入到弹出式联系表单、促销、登录/注册等等。您可以前往Elementor的官方Facebook群组获得超过98,000名成员的社区支持。对于免费和付费Elementor用户来说，这都是一个不错的选择。

您可以找到向Divi添加弹出窗口构建的第三方附加组件，但这不是核心功能。您购买的Divi还包括Bloom电子邮件选择加入插件，其中包含弹出窗口。但是，Bloom没有为您提供拖放式构建器，因此它不是Elementor Popup Builder的真正匹配项。此外，Divi’s Bloom仅限于选择加入，而您可以使用Elementor创建任何类型的弹出窗口。

Divi与Elementor：定价对比

比较定价是一个棘手的问题，因为Elementor在某些情况下更便宜，而Divi在其他情况下更便宜。因此，根据您将如何使用每种工具，一种可能比另一种更实惠。

免费版

让我们从头开始。Elementor是唯一提供100%免费版本的产品。更重要的是，Elementor的免费版本非常灵活。即使只有免费版本，您也可以构建一些漂亮的设计并访问最基本的小部件。

因此，如果您的目标是保持免费，那么Elementor是您唯一的选择。这是一个伟大的！

高级版本

就高级版本而言，它是如何摆脱困境的：

• 如果您只需要一个网站的构建器，Elementor Pro会更便宜。
• 如果您需要多个网站的构建器，Divi会更便宜。

Elementor Pro提供三个为期一年的许可证选项，每个选项用于不同数量的站点：

• 1个站点：49美元/年
• 3个站点：  99美元/年
• 1,000个站点：199美元/年（基本上无限制，但有上限以避免滥用）

从2021年3月9日起，Elementor将转向定价更高的新Pro计划。基本上，前两个计划将保持不变，而1,000个站点计划的费用为999美元/年。两个新的Pro计划是25个站点计划，费用为199美元/年，100个站点计划费用为499美元/年。

在2021年3月9日之前购买Elementor Pro的1,000个站点计划的任何人都将拥有旧许可证。这意味着只要他们保持有效的许可证，他们只需支付199 美元/年。

另一方面，Elegant Themes允许无限使用其计划。对于一年的许可证，您需要支付89 美元才能在无限制的个人和客户网站上使用。

除此之外，您的购买可让您访问所有Elegant Themes产品，而不仅仅是Divi。只需一个价格，您就可以获得：

• Divi主题
• Divi Builder插件
• 额外的主题
• Bloom插件（电子邮件选择加入）
• Monarch插件（社交分享）

因此，回顾一下，让我们看一下三种不同的情况，看看哪个高级构建器会更便宜。如果您需要在以下位置使用构建器：

• 一个站点： Elementor Pro最便宜，为49美元/年，而 Divi为89美元/年。
• 三个站点：两个构建器几乎相等，Elementor Pro为99美元/年，Divi为89美元/年。
• 四个站点（或更多）： Divi最便宜，每年89美元，而 Elementor Pro每年199美元。

终身许可证

最后，最后一个重要的考虑因素是许可期限。Elementor仅提供一年的许可证。也就是说，如果您想继续获得支持和更新，则需要每年更新您的许可证。此外，如果您不续订，您将无法再添加新的Elementor Pro小部件。尽管您设计中的所有现有Elementor Pro小部件都将继续工作。但是您将无法插入新的高级模板。

Elegant Themes提供相同的年度许可以及终身许可选项。使用终身许可证，您只需为终身使用、更新和支持支付一笔固定费用。从价值的角度来看，这很难被击败。

终身许可证为249 美元，与一年许可证相比，盈亏平衡点约为2.8年。

Divi与Elementor：模板对比

这两个构建器的一大优点是它们带有大型模板库，因此您无需从头开始设计。

相反，您只需导入一个模板，对其进行自定义以满足您的需求，您就拥有了一个专业设计的网站。

它们都有相当大的模板库，但Divi在其模板的数量和组织方面具有优势。

Divi模板

截至2021年3月，Divi附带了1,500多个预建模板，您可以将这些模板分为199个布局包。布局包本质上是围绕特定网站构建的主题模板集合。例如，您可能会为主页获得一个模板，为联系页面获得另一个模板，等等。

Divi模板库

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

Elementor模板

Elementor的模板有很多不同的风格，具体取决于您正在构建的内容类型。在设计页面方面，您将获得两种类型的模板：

• 页面：这些是整页模板。使用Elementor Pro，您将获得大约200个模板。
• 区块：这些是页面部分的部分模板。你可以像乐高一样把它们放在一起来设计一个完整的页面。

Elementor模板库

Elementor还将其一些模板组织成模板工具包，这些模板以构建完整网站为主题（就像Divi）。然而，截至2021年3月，Elementor提供的模板套件少于25个，尽管他们每个月都会发布一个新的模板套件。

您还将获得用于弹出窗口和主题构建的单独模板，这在技术上进一步扩展了Elementor的模板列表。

最后，您还可以保存自己的模板，以便日后重复使用。

Divi与Elementor：技术支持对比

Divi和Elementor都为拥有有效许可证的客户提供24/7支持。不过，总的来说，Divi略有优势，因为它提供了更灵活的联系支持选项。

Divi支持

所有拥有有效许可证的Elegant Themes用户都可以获得24/7的高级支持。一大好处是您可以通过对讲机获得实时聊天支持。

这是一个很大的优势，因为在任何WordPress主题或插件中找到实时聊天支持是非常罕见的。

此外，如果愿意，您还可以访问他们较旧的论坛支持系统。不过，论坛系统依赖于社区支持（Elegant Teams工作人员不再在那里回答问题）。或者，您可以通过详细的知识库文档帮助自己。

您还可以通过拥有超过64,200名成员的大型官方Divi主题用户Facebook群组获得社区支持。

Elementor支持

Elementor的付费客户将通过工单获得24/7的高级支持。此外，Elementor维护一个详细的公共知识库，向您展示如何使用核心功能、解决常见问题等。

Elementor在Facebook上还有一个大型官方群组，您可以在其中获得超过98,000名成员的社区支持。对于免费和付费Elementor用户来说，这都是一个不错的选择。

还有一些常见问题的分支组，例如Elementor + 哪个主题？和Elementor + which Plugin，以及专门的Elementor Pro社区。

由于Facebook社区中有如此多的人，与提交工单相比，您在Facebook社区中提问通常会更快地得到答复。

Divi vs Elementor：你应该选择哪一个？

最终，没有明显的赢家，这就是为什么这两种工具都如此成功的原因。这实际上取决于您的预算、您看重的功能以及您喜欢的界面。

Elementor可能是最好的起点，主要是因为如果您刚刚开始，它是免费的。您可以了解自己是否喜欢Elementor的免费版本，如果它适合您，那么您无需花一分钱就能获得一款出色的工具。

如果你愿意付钱，这是一个更艰难的决定。

首先，考虑每个工具的接口。有些人更喜欢其中之一，所以这将是一种选择方式。您可以通过以下方式测试每个接口：

• 使用Divi Builder的实时网络演示
• 安装免费版Elementor

两者都为您提供顶级风格和设计选项，因此很难在那里宣布获胜者。当然，有一些小的功能差异，但这些不会影响大多数人。

其次，考虑是否有可能将您推向一个方向或另一个方向的独特功能。例如，如果您是营销人员，您可能真的很看重Divi的内置A/B测试。

另一方面，营销人员也会重视Elementor Popup Builder，这是一种多功能工具，适用于从电子邮件选择加入到促销、调查等的所有内容。

在性能方面，Elementor略有优势。因此，如果性能对您来说排名第一，那么这对Elementor有利。

当然，如果性能对您来说至关重要，那么您可能首先要重新考虑使用可视化构建器，因为使用本机块堆栈几乎肯定会帮助您实现更快的站点。

最后，还有定价。对于单个站点，Elementor Pro更便宜。但是对于多个站点，从长远来看，Divi在性价比方面有两大优势：

1. 入门级89美元Elegant Themes计划仍然允许在无限站点上使用，而您需要价格更高的199美元Elementor Pro计划。Elementor Pro的1,000个站点计划很快将其价格提高到999美元。
2. Elegant Themes提供终身会员资格。如果您知道您将使用此工具多年，那么从价值的角度来看，很难击败终身交易。对于Divi来说，一年许可证和终身许可证之间的盈亏平衡点大约是两年零九个月。

但是，请记住，具有终身许可证的产品和服务是不可持续的。提供它们的企业必须跟上不断增加的支持和开发成本。最终，他们降低支持质量，将业务出售给其他人，或者关闭。因此，明智地选择！

您可以将Elementor与Divi一起使用吗？

是的，有点。在同一网站上同时使用Elementor和Divi在技术上是可行的。但是，我们强烈建议您不要这样做。尝试这样做会减慢您的网站速度（因为每个构建器都会加载自己的脚本），增加很多复杂性，并且通常会使您的工作更加困难。

如果您绝对必须同时使用这两个插件（同样，我们真的不推荐它），您可以考虑使用诸如Asset CleanUp之类的插件来有条件地仅在需要时加载每个构建器的脚本。当一起使用Divi和Elementor时，它应该会减少性能损失。

不过，在相关说明中，您可以将Divi Builder与Elementor的Hello主题一起使用，如果您打算使用Divi的新主题构建器来设计整个网站，这可能比使用Divi主题更好。

小结

这结束了我们完整的Elementor与Divi比较。我们希望你觉得它有用！

如果这两个仍然不符合您的要求，请阅读我们出色的WordPress页面构建器列表。它包括一些WordPress社区最喜欢的其他页面构建器，例如GeneratePress with Sections、Beaver Builder、Oxygen和Brizy。