Elementor vs Gutenberg – 2021 年摊牌：哪个页面构建器更好？
已发表: 2021-11-02我们甚至能够记住 WordPress 在没有页面构建器的情况下运行的时代吗？
时光飞逝，技术进步，功能非常有限的 WordPress 现在只是一个模糊的记忆，这要归功于 WordPress 主题的功能，尤其是 WordPress 插件，例如页面构建器。
在本文中，我们将介绍OceanWP 用户中最受欢迎的两个页面构建器——Elementor 和 Gutenberg 。 我们将在此处提供的信息不仅基于我们个人的意见和经验，还基于我们每天收到的 OceanWP 用户的反馈。
让摊牌开始吧！
什么是元素？
平均评分为 5 次中的 4.7 次和 5+ 百万次活跃安装– 毫无疑问： Elementor 是 WordPress 用户中最受欢迎的页面构建器。
Elementor 于 2016 年首次推出，并迅速占据领先地位。 它几乎立即流行的原因是Elementor 的视觉拖放构建器和通常的 WordPress 文本编辑器（古腾堡时代之前）之间的区别。
WordPress 用户终于获得了一些与 Microsoft Word 不同的东西——一个灵活的编辑器，让他们的创造力大放异彩，这一切都归功于各种小部件，这些小部件减少了对各种自定义编码或自定义 HTML/PHP/CSS 模板创建的需求。
而且，如果您正在寻找一些新的 Elementor WordPress 网站模板？ 查看我们最新的 HubSpot 系列。
在此 Elementor 与 Gutenberg 比较中，我们将仅讨论 Elementor 免费版本的功能。
什么是古腾堡？
Gutenberg，也称为块编辑器，是默认的 WordPress 页面/帖子编辑器。 它于 2018 年首次推出，使用 WordPress Bebo 5.0 版本。
WordPress 团队了解社区对更高级和更直观的默认编辑器的需求，以及网站建设的趋势。 这就是古腾堡编辑器的诞生方式，并取代了它的前身——经典编辑器。
尽管 Gutenberg 尚未发展到最全面，预计在未来几年将达到顶峰，但 WordPress 团队兑现了他们的承诺 - 一个简单但功能强大的可视化编辑器，它从内容编辑器转变为页面构建器。
而且，如果您正在寻找一些 Gutenberg WordPress 网站模板，请查看我们最新的使用 Gutenberg 的 WooCommerce 模板集合。
Elementor vs Gutenberg：比较
Elementor vs Gutenberg：易用性
任何有幸使用这两种工具的 WordPress 用户都会告诉你一些我们也同意的事情——Elementor 赢得了易用性比较。
由于其巨大的灵活性和移动性，Elementor 非常类似于高级图像编辑工具。 只需选择您需要的小部件并将其放置在内容中的任何位置 - 就是这样。
需要创建部分？ 还是具有不同列数的部分？ 为不同的设备选择不同的设计或图像？ 也不是问题。 Elementor 真正允许您设置整个内容，直到完美。 更不用说网站设计师喜欢的各种动画（即使速度测量工具不是）。
另一方面，古腾堡是一个干净简单的页面构建器。 与 Elementor 不同，Gutenberg 不提供广受欢迎的拖放功能（至少目前还没有）。 即使您可以轻松添加和移动块，但事情并不像 Elementor 那样简单。 除此之外，对块进行造型可能会有些挑战，特别是对于那些习惯了 Elementor 提供的豪华环境的人来说。
Gutenberg 作为默认的 WordPress 编辑器已经 3 年了，但仍有人不愿意尝试。 这些用户不喜欢任何页面构建器——他们喜欢经典（内容）WordPress 编辑器胜过其他任何东西。
由于我们都是习惯性动物，我们发现仅仅因为经典编辑器更易于使用而将 Gutenberg 标记为不直观且难以使用是不客观的。 但是，我们可以告诉你一件事——一旦你用 Gutenberg 创建了一篇文章并克服了最初的学习曲线，你将继续使用它。
Elementor vs Gutenberg，选择哪一个？ 答案总是 OceanWP，因为我们同时使用
PS Gutenberg 的积木之一也是 Classic 积木，因此没有理由使用其他插件来使用老式功能
Elementor vs Gutenberg 易用性总结
Elementor 提供了先进的小部件和编辑工具，使其比 Gutenberg 更易于使用，但一旦出现使网站页面响应的需求，它就会变得同样具有挑战性。
古腾堡有自己的学习曲线，您可以轻松克服。 了解 Gutenberg 的工作原理将帮助您管理所有其他页面构建器，包括 Elementor。
Elementor vs Gutenberg：特点
Elementor 有小部件，Gutenberg 有块——就这么简单。
然而，当指代使用组合元素的功能时，术语小部件在 WordPress 中已经使用了很长时间。 例如，带有标题的图像、具有不同查询选项的博客文章列表等。
Elementor 小部件的功能类似——通过提供具有分组选项和多个查询和样式设置的功能。 自然地， Elementor 小部件提供了比 WordPress 小部件（外观 > 小部件）更多的选项和多功能性。
Gutenberg 从非常基本的块开始，例如段落块、图像、视频等。尽管块也提供样式选项，但这些功能并不像 Elementor 那样丰富且直观。 但是，公平地说，在用户友好的设置方面，Elementor 绝对领先——不仅与古腾堡相比，而且与几乎所有可用的页面构建器相比。
另一方面，“过于简单”的块问题可以通过一些额外的 Gutenberg 插件轻松解决，这些插件提供具有更多功能和用户选项的功能强大的块。
说到这里，您有没有机会探索我们的最新产品——Ocean Gutenberg Blocks？ 如果您是客户，则此插件已在您的仪表板中可供下载和使用。 如果您考虑成为专业人士，请查看我们的最新报价。
Elementor vs Gutenberg 功能总结
Elementor 使用小部件，Gutenberg 使用块。 Elementor 的免费版本带有许多高级小部件，每个网站设计师都可以使用它来构建一个很棒的网站。 为了获得更高级的块，Gutenberg 需要额外的插件- 例如 Ocean Gutenberg Blocks。
Elementor vs Gutenberg：性能
您可能注意到我们故意使用术语“性能”而不是“页面速度”。
原因很简单——大多数在线工具测量的网站分数并不反映网站的速度。 除此之外，网站速度依赖的因素太多了。 可悲的是，网站性能的成功不仅仅取决于您正在运行的主题或插件。
更不用说，网站所有者通常会忘记这些工具并不能反映整个网站的状态——只有分配给测试的 URL 的页面。 简而言之，像对待主页一样对待所有网站页面。
但是，主题和插件的质量会对网站的整体性能产生重大影响。 页面构建器也是如此。
WordPress 设置比较
在开始之前，我们想简要介绍一下我们如何构建 WordPress 模板。 这样一来，Elementor vs Gutenberg 对比的结果就可以完全理解了。
WordPress 模板是示例网站内容（页面、博客文章、预建和样式）。 这些模板有助于加快构建过程或激发灵感。 对于 Ocean 网站模板，当使用 Elementor 页面构建器时，它仅用于主页（主页、联系人、关于等）。
所有其他页面，例如博客文章、商店、产品页面、存档页面都是由 OceanWP 主题管理的默认 WordPress 页面。
对于这个小实验，我们使用了我们的两个 WordPress 网站模板：议程和古腾堡议程。
带有 Elementor 的议程 WordPress 模板 
带有古腾堡的议程 WordPress 模板
乍一看，只看图像，您能分辨出这两者之间的区别，并猜出哪个是使用 Elementor 构建的，哪个是使用 Gutenberg 构建的？
两个网站都位于同一台服务器上，并且具有完全相同的配置：
- 软件：Apache/2.4.51 (Unix)
- MySQL：（Ubuntu）v5.7.36
- PHP：7.4.24
- WordPress：5.8.1
- WordPress (PHP) 内存限制：256M
- WordPress 主题：OceanWP （眨眼眨眼）
两个网站都有大部分共同的 WordPress 插件：
- 海洋额外
- 海洋产品分享
- 海洋社交分享
- WooCommerce
- TI WooCommerce 愿望清单
- WPforms 精简版
- 海洋粘页眉
- WP Rocket（不用于创建 WordPress 模板）。
议程 WordPress 模板：
- 元素
- 海洋元素小部件
古腾堡议程 WordPress 模板：
- 海洋古腾堡街区
如您所见， Gutenberg 版本不需要任何额外的插件即可运行。 您只需要默认的 WordPress 块编辑器 – Gutenberg 。
Elementor vs Gutenberg：Google Page Speed Insights
对于所有跳过部分文本并直接来到这里的人来说——重要的是要强调Google Page Speed Insights 不会测量网站速度。 相反，它通过考虑不同的因素对网站进行评分。
此外，同样重要的是要承认分数不仅可能是误报（分数低但网站速度快，反之亦然），而且它们通常不会描绘真实的画面。 谈到移动 PSI（Page Speed Insights）分数时， Google 会从使用手机浏览您网站的真实用户那里收集信息。
这意味着实际情况将随着时间的推移而变得可见——而不是立即可见。 这也意味着我们巧妙地建议您不要在安装 WordPress 或构建页面时检查您的分数并尝试对其进行处理——这些信息是不准确的。
要全面了解有关网站性能和数据处理的数据收集是如何工作的，我们建议您查看 Google 员工的此回复。 没有什么比直接从源头获得答案更好的了。
尽管如此，我们确实理解分数对用户很重要。 这就是我们与您分享结果的原因。
谈到移动 PSI 分数，在 Elementor 与 Gutenberg 的比赛中，获胜者是 Gutenberg 。
所有数据之间的差异非常明显，并且有利于古腾堡。
最让我们惊讶的结果是总阻塞时间（TBT）的差异。 对于 Elementor 构建的页面，TBT 为 310ms，而 Gutenberg 构建的页面上的 TBT 仅为 50ms 。
你能想象如果我们在正确上传和设置 WP Rocket 之前优化网站上的图像而不是运行默认设置会产生什么结果？ 不要像我们一样 -优化您的图像并为您的网站找到最佳缓存设置。
在桌面 Elementor 与 Gutenberg 的比较中，尽管结果略微偏向 Gutenberg，但差异并没有那么大。 至少，不是根据 PSI。
这就是为什么我们要转向另一个我们经常向用户推荐的工具——GTmetrix。
Elementor vs Gutenberg：GTmetrix 比较
GTmetrix 似乎对我们的 Agenda WordPress 模板的两个版本——Elementor 和 Gutenberg 都很满意。
但是，我们不能忽视Time to Interactive 和 DOM Interactive Time 之间的巨大差异——这两个指标都支持 Gutenberg。
互动时间：Elementor vs Gutenberg ：912ms vs 408ms 。
DOM 交互时间： Elementor vs Gutenberg ：714ms vs 405ms 。
当谈到 Elementor 与 Gutenberg Structure 比较时，GTmetrix 再次向我们展示了绿色扫描。
但是有一件事立即引起了我们的注意——DOM 大小。 同样，结果有利于古腾堡。
避免过多的 DOM 大小：Elementor vs Gutenberg ：1251 个元素 vs 929 个元素。
无论您是否是 Gutenberg 的粉丝，您都必须承认，对于内容几乎相同的页面来说，减少 300 多个元素是一个巨大的胜利。 更不用说，这也是一个开箱即用的胜利。
总而言之，图表已经说明了问题。 尽管性能和结构分数完全相同，但两个网站都获得了GTmetrix A 级、性能分数 100% 和结构分数 98% - 如果您是一个巨大的优化和性能爱好者。
从 GTmetrix 来看，事情是清晰的。 当谈到 Elementor 与 Gutenberg的并排性能比较时，Gutenberg 是绝对的赢家。
但是，等一下。 这是否意味着 Elementor 不好，不应该使用？ 不，因为使用 Elementor 也可以实现您引以为豪的令人满意的分数。
结果仅表明 Gutenberg 提供了即时、轻松和前卫的性能优势，而对于 Elementor，您需要成为一名精明且负责任的网页设计师。
Elementor vs Gutenberg 性能总结
我们的网站模板都没有针对速度/分数进行优化，并且我们都使用默认的 WP Rocket 缓存设置。 Gutenberg 提供了更多开箱即用的性能优势，并且与 Elementor 相比，一些指标差异非常大，尤其是总阻塞时间、DOM 大小、交互时间和 DOM 交互时间指标。
具有高级优化技能的经验丰富的网站设计师遵循最佳网站建设实践并使用适当的工具，使用 Elementor 获得最佳速度或分数将毫无问题。
与 Elementor 网站结合各种附加 Elementor 插件相比， Gutenberg 支持的网站还需要更少的资源，主要是 WordPress 内存限制，才能顺利运行。
Elementor vs Gutenberg：好处
关于 Elementor 与 Gutenberg 的好处比较，很难决定。
每个页面构建器都有自己的优点和使用理由。 同样，每个页面构建器都有其缺点。 优点和缺点都可以是主观的。
当然，我们都喜欢 Elementor，因为它具有拖放功能，但使用 Gutenberg 也没有那么难。
Elementor 的响应设置以及能够隐藏基于设备的部分或元素或基于设备的完全样式元素，是喜欢它的额外原因之一。 现在，同样的功能会让初学者在刚开始时感到气馁和不知所措，因为他们意识到网站建设需要比过去在各种博客中阅读更多的努力。
在用户友好的使用和释放创造力方面，我们投票给 Elementor 。
但是，当我们的用户向我们询问 Elementor 的替代品时，他们提到稳定性是需要更改的主要原因。 需要明确的是，即使像 Facebook 这样的公司也会发生错误和错误。 而且，无论网站所有者和开发人员正在运行什么设置，都必须负责任并遵循最佳实践，以避免不便。 是的，我们正在讨论在暂存区域进行备份或测试新更新。
事实上，即使是遵循这些做法的有经验的用户也会怀恨在心，因为 Elementor 的创新和变化往往使他们无法在一段时间内 [正确] 使用该工具。
谈到古腾堡，作为开发人员，我们支持它的性能（前端和后端）、可访问性和稳定性。 请注意，一些 Gutenberg 插件可以像其他非 Gutenberg 页面编辑器一样向 HTML 添加更多甚至更多的膨胀，因此请明智地选择。
尽管古腾堡不像 Elementor 那样对初学者友好，但我们绝对鼓励初学者尝试一下。 而且，我们的建议完全基于缺少一些需要更专业或经验丰富的方法的高级功能（例如在响应模式下编辑和针对不同设备调整内容）。
也可以肯定地说，那些处理和学习如何处理古腾堡的人也将快速掌握所有其他页面构建器- 包括 Elementor。
Elementor vs Gutenberg 的好处总结
Elementor 的响应选项和设置可以帮助任何人调整所有设备的网站设计，甚至在需要时进行不同的调整。 但是，一旦WordPress 初学者意识到网站建设需要的时间、精力和实践比他们读到的更多，这也是同样的设置。
古腾堡一开始可能看起来很吓人，完全不直观，但实际上是一个了不起的学习起点。 克服 Gutenberg 将帮助每个人更好地了解所有页面构建器。 此外， Gutenberg 提供了更多的稳定性、可访问性、SEO 和整体性能优势。
Elementor vs Gutenberg：哪个页面构建器更好？
你知道他们在说什么——一只鞋不会适合每只脚，但除非你先试鞋，否则你不会知道这一点。
有些用户喜欢 Elementor，有些喜欢 Gutenberg ，背后有各种原因。 由于我们谈论的是您的网站，因此必须找出适合您和您的网站需求的内容。
当我们的用户在不影响网站稳定性、性能、SEO、可访问性和许多对网站建设至关重要的事情的情况下向我们寻求有关使用 Elementor 的建议时，我们建议他们以与我们使用 Elementor 构建 WordPress 网站模板相同的方式使用 Elementor . 在需要具有吸引力和吸引力的主页上使用 Elementor – 将其他所有内容留给 WordPress 和您的主题。
简而言之，避免创建自定义存档模板，特别是如果您不是一个精明的设计师或在整体网站优化方面经验不足的情况下。
如果您是初学者并且不想担心额外的编辑和样式，或者如果您是不介意在网站设计中投入更多精力的专业人士（我们指的是没有拖放-drop 功能）并且不反对缺少各种动画选项，那么您绝对应该选择 Gutenberg 。 特别是考虑到所有性能优势以及您可以使用 Gutenberg 创建同样质量的设计这一事实。
您绝对不应该做的一件事，我们已经看到了这样的设计，就是使用 Elementor 创建自定义模板，然后结合使用 Gutenberg 来添加内容。 不要让您的生活变得比应有的更艰难，也不要扼杀您的网站
无论您选择的页面构建器是 Elementor 还是 Gutenberg，答案始终是 OceanWP 和 Ocean Core Extensions Bundle，因为我们为您提供小部件和块来实现所需的网站设计
你的判决是什么？ 您最喜欢的页面构建器是什么，为什么？ 是的，您可以选择并使用两者。
一旦您从构建网站中休息一下，请发表评论并让我们知道您的想法。