Gutenberg和Elementor：两个WordPress页面构建工具的主要区别

Gutenberg 与 Elementor：如何正确地选择？这取决于您希望从 WordPress 页面生成器中获得哪些功能。

我们将解释 Gutenberg 和 Elementor 的基本原理，然后对两者进行直接比较。

以下是我们根据多年的使用经验和严格的测试，深入了解 Gutenberg 和 Elementor 之间的比较。

什么是古腾堡？

古腾堡是默认的 WordPress 页面生成器。它于 2018 年推出，取代了现在所谓的 “经典” WordPress 编辑器，后者是最初的富文本/HTML 内容编辑器，没有任何拖放功能。

Gutenberg 实际上是对包括 Elementor、Divi 和 Visual Composer 在内的一大波第三方页面生成器插件的回应，这些插件的出现都是为了取代经典编辑器。

从功能角度来看，Gutenberg 提供了一个易于访问的 “区块” 库，用于将内容元素拖放到页面和帖子上。

古腾堡中的区块选项卡

Gutenberg 配备了近 100 个内容区块，其中一些区块允许整合和嵌入 Twitter、Reddit 和亚马逊 Kindle 等第三方服务。还可以创建动态区块，自动更新块内容。一些古腾堡区块示例包括

• 段落
• 标题
• 表格
• 图片
• 图库
• 视频
• 按钮
• 日历
• 自定义 HTML
• 最新文章

大多数 WordPress 主题都能很好地与 Gutenberg 配合使用（现在基本上都需要）。

Gutenberg 界面将页面或文章内容置于中心位置，并在可能的情况下呈现内容（如显示表单或按钮）。这是对经典编辑器的重大升级，因为 Gutenberg 在提供可视化用户体验的同时，还支持快速标记编辑。如果需要，还可以直接访问 CSS 和 HTML 的自定义编码部分。

每个区块都有自己的一长串设置，Gutenberg 的快速面板可以对文档和区块设置（如 alt 标记、背景颜色和评论审核）进行强大的控制。

什么是 Elementor？

Elementor 是一款页面生成器，与 Gutenberg 非常相似。不过，Elementor 早于 Gutenberg，它是第三方页面生成器应用程序之一，最终促成了 WordPress 默认页面生成器的诞生。

Elementor 于 2016 年推出，因其完全可视化的网页设计界面、时尚的入门模板（可随时导入）以及拖放式内容模块而深受 WordPress 设计师的喜爱。

Elementor

Elementor 和 Gutenberg 之间最明显的区别之一是，Elementor 并非内置在 WordPress 中。它是由另一家公司制作的，所以你必须安装它的免费插件（也有高级版本）。

你还会注意到，Elementor 有独特的功能名称。在 Gutenberg 中被称为 “块 “的功能在 Elementor 中被称为 “小部件”。说到这一点，Elementor 拥有 100 多个这样的内容小部件。

Elementor 内容小部件示例：

• 文章
• 文本编辑器
• 标题
• 图片
• 文本
• 引荐
• 切换
• 进度条

许多小工具可以在 WordPress 网站和第三方应用程序（如 Stripe、Facebook 和 Sound Cloud）之间创建集成。

总之，Elementor 是顶级 WordPress 页面构建工具之一，拥有一个充满活力的开发者和用户社区。它的可视化、拖放式界面无可匹敌，你可以获得数百个设计模板，而且所有编辑都是实时完成的。

除了专业的 WooCommerce 小工具以及用于登陆页面和表单的营销工具外，Elementor 仍然是网站建设领域的巨无霸，这一点在比较 Gutenberg 与 Elementor 时显而易见。

古腾堡与Elementor的比较

我们将从功能、用户界面、价格等方面对 Gutenberg 和 Elementor 进行比较。经过我们的评测，您将更清楚地了解哪种页面生成器更适合您的需求。

1. 主要功能
2. 用户界面对比
3. 两者对性能和页面速度的影响
4. 定价策略差异
5. 两者与主题和插件的兼容性
6. 后台编辑与前台编辑对比
7. 客户支持对比

主要功能

在本节中，我们将挑选出我们认为页面生成器的 “关键” 功能，然后在每个类别中比较 Gutenberg 和 Elementor。

拖放功能与编码：古腾堡与 Elementor

页面构建工具的问题在于，它们往往在界面上充斥着可视化创建工具，而将代码编辑等更高级的功能拒之门外。

我们更喜欢看到二者的结合，初学者有一个易于访问的光滑拖放界面，而高级用户则可以使用 CSS，无需四处寻找正确的字段。

Gutenberg 的拖放功能简单明了，没有延迟。只需花一点时间搜索内容块，然后拖动或点击并插入到内容中。然后，区块设置就会出现，供用户自定义。

有几十个内容区块可供选择

它的一个缺点是，拖动当前放置的区块时，必须先选择一个区块，然后点击并按住一个拖动小图标。这就要求点击时要精确，而其他页面生成器则不需要。

使用拖动图标移动区块

说到编码，Gutenberg 的代码编辑器很容易找到。

代码编辑器易于访问

用户在使用预制区块时，发现块会弄乱他们的代码，而且很难使用，这就要求开发人员制作几十个自定义块。

尽管有这样的抱怨，但页面生成器对编码人员来说已经有所改进，而且工具也确实存在，只是学习曲线可能比经典编辑器更陡峭。

你甚至可以直接在 Gutenberg 中的 “区块” 选项卡中添加 HTML 锚点和额外的 CSS 类，而以前则需要在经典编辑器的 HTML 选项卡中进行繁琐的操作。

调整 HTML 锚点和 CSS 类

Elementor 还提供拖放功能。它可与大多数 WordPress 主题配合使用，并提供一个可快速插入任何页面的块库。

基本区块列表

由于 Elementor 使用半自动生成的网格系统，因此可以在页面的大部分区域放置小部件。

将按钮区块拖入编辑器

在 Elementor 中，移动之前放置的内容区块比在 Gutenberg 中更容易。只需点击并按住内容区块的任意位置即可移动它。

点击并拖动即可移动任何区块

插入或选择一个内容部件，就会显示该部件的内容、样式和高级设置。至于编码，它通过许多块设置进行了简化。比如你可以在 widget 或页面设置中直接添加 HTML 锚点、属性和自定义 CSS。

轻松插入自定义 CSS

Elementor 还提供 HTML 代码小工具，用于在网页中插入任何自定义编码。

您可以使用 HTML 代码框进行定制

总的来说，Elementor 的拖放功能强于 Gutenberg。不过，在这两种页面生成器中，自定义编码选项的可访问性是一样的。

模板（用于网站、区块、页面、弹出式窗口等）

页面生成器模板允许开发人员以极快的速度构建网站。使用模板，您可以从专业网站或页面设计开始，而无需从头开始。

许多网页制作工具都提供预制模板，用于：

• 完整网站
• 页面
• 博客文章
• 页面部分
• 内容区块
• 页眉
• 页脚
• 登陆页面
• 更多

Gutenberg 严重缺乏预制模板。样板选项卡提供了有用的部分模板，但仅此而已。

样板选项卡

不过，也可以安装第三方插件，为网页和完整网站提供启动模板。Gutentor、Twentig 和 Otter Blocks 等插件都符合要求。

另一方面，Elementor 在其主题生成器中提供了数百个启动模板。

Elementor 的模板包括：

• 页眉
• 页脚
• 单个页面
• 单个文章
• 档案
• 搜索结果页面
• 产品页面
• 产品档案
• 404 页面

来自 Elementor 的各种主题生成器元素

Elementor 的几乎所有模板都需要高级订阅，但价格实惠，而且比 Gutenberg 提供的更好。

版式

Gutenberg 中的版式功能允许在右侧块面板上进行快速定制–在选择要编辑的任何区块之后。

在古腾堡中设计图片样式

与 Elementor 中的设置相比，样式设置非常简单，但基本要素几乎都有，例如更改图片边框和尺寸的选项，或段落区块的颜色、排版和边距设置。

除了所有区块的自定义 CSS 外，点击区块时还会发现一个悬浮工具栏。本部分提供文本样式、HTML 编辑、样式复制和复制功能。

悬浮工具栏

Elementor 中的样式设置包含在选中小工具时的三个选项卡中。调整图片和文字大小的内容设置，然后跳转到高级区域，从悬停动画到 CSS 滤镜和遮罩，再到变换效果，应有尽有。

调整任何选定区块的样式

毫无疑问，Elementor 比 Gutenberg 拥有更强大的样式工具集合。不过，对于那些追求简洁的用户来说，Gutenberg 提供的样式功能会让他们感到宾至如归。

内容区块/小工具

Gutenberg 配备了 90 多个内容区块。Elementor 提供了 100 多个。

以下是 Gutenberg 区块的类别：

• 文本
• 媒体
• 设计
• 小工具
• 主题嵌入

你可以获得所有基本元素（段落、图片和按钮块），以及一些独特的元素，如 Speaker Deck、Kickstarter、Query Loops、Verse、Time To Read 等。

Elementor 还对内容小工具进行了分类：

• 基本
• 专业版
• 通用型
• 网站
• WooCommerce
• WordPress

这些分类并不是最有用的，但至少它们以某种方式组织起来了。

提供了标准的内容小部件，如分隔线、部分和标题。此外，还有谷歌地图、代码集锦、WooCommerce 产品数据等独特的小工具。

更高级的元素包括产品图片、产品元和追加销售

我们的结论是，Gutenberg 能更好地组织和解释其内容区块，但 Elementor 提供的区块（小部件）数量更多，设置也更强大。

WooCommerce支持

WooCommerce 是一个第三方插件，可将任何 WordPress 网站变成一个在线商店。与页面生成器搭配使用时，您通常会收到 WooCommerce 区块，以便对购物车、产品页面等进行更多定制。

Gutenberg 也不例外。一旦安装了 WooCommerce，就会出现无数的 Gutenberg 块，用于加强 WooCommerce 商店的设计。这里有产品搜索区块、显示活动过滤器的选项以及显示最畅销产品的方法。我们统计了 26 个 Gutenberg/WooCommerce 块，还有几个第三方插件可以扩展这个列表。

WooCommerce 区块

Elementor 与 WooCommerce 也有很好的配合，但这是有代价的。你必须订阅 Elementor Pro，才能解锁任何 WooCommerce 内容小部件或页面模板。尽管如此，Elementor Pro 的价格还是很实惠的，而且其区块提供的样式工具比 Gutenberg 中的任何工具都要强大。

在撰写本文时，Elementor 提供了 20 个 WooCommerce 块。其中包括 “产品图片”、”添加到购物车” 按钮、”产品评价” 和 “产品图库”。

额外的 WooCommerce 区块，如菜单购物车和产品标题

甚至还有一些独特的小工具，如 Upsells 和 Product Meta Data。

集成

重要的是不要混淆集成和兼容性。我们将在本文中进一步介绍主题和插件的兼容性，但集成更像是与其他应用程序、平台和软件的链接，数据从页面生成器发送或接收到这些应用程序、平台和软件。

例如，与 Facebook 的集成可能会显示一个按钮，让人们关注你的页面，或者显示你最近在 Facebook 上发布的帖子列表。

Gutenberg 有一个简短的直接集成列表，主要是使用区块从外部来源获取内容。

下面是 Gutenberg 目前的 32 个集成：

• Openverse
• Twitter
• YouTube
• WordPress
• SoundCloud
• Spotify
• Crowdsignal
• Dailymotion
• Imgur
• Issue
• Kickstarter
• Amazon Kindle
• Pinterest
• Reddit
• Slideshare

从媒体平台到社交网站，Elementor 拥有强大的集成列表。

以下是 Elementor 40 多个集成中的一部分：

• PayPal
• Facebook (for comments, embeds, pages, and buttons)
• YouTube
• Vimeo
• Google Maps
• SoundCloud
• MailChimp
• ActiveCampaign
• ConvertKit
• HubSpot
• Zapier
• Discord
• Custom icon libraries
• Slack
• ReCaptcha
• Drip

两者都有值得称道的集成，但 Elementor 的集成似乎更强大、更丰富。在 Elementor 中，你可以接入著名的电子邮件营销提供商，通过支付处理器进行销售，还可以连接客户关系管理软件。而 Gutenberg 则更注重与媒体库和社交网站的链接。

用户界面对比

开始使用 Gutenberg 就像使用 WordPress 本身一样直观。这是因为 Gutenberg 自动内置于 WordPress 的仪表板中。无需安装插件或附加组件。只需打开页面或文章编辑器，Gutenberg 就会开始工作。

通过搜索栏或在编辑器中添加区块

通过点击散布在编辑器各处的多个 “+”（添加区块）按钮之一，即可搜索和插入区块。它提供了一个搜索栏，以及区块、样板和媒体等多个选项卡。你甚至会注意到，Gutenberg 与流行的知识共享（Creative Commons）图片提供商集成，可以免费找到合适的图片。

快速的内容创建使 Gutenberg 成为博主和所有在线发布者的最佳页面构建工具之一。您可以直接在编辑器中编写内容，并利用标记和键盘快捷键快速插入标题、链接和图片等元素。

更不用说，Gutenberg 还集成了大量其他第三方文本编辑器，你也可以将其他程序中的内容直接复制到 Gutenberg 中（无需二次上传图片或调整格式）。

页面选项卡提供了发布和以页面为重点的设置，如特色图片、摘录和评论工具。

特色图片选项卡

调整面向区块的设置也很容易。只需点击 “区块” 选项卡。这将打开所选区块的独特自定义功能。例如，图片区块会显示从 Alt 文本字段到图片尺寸设置的所有内容。您还可以在这里添加 CSS 标记、HTML 锚点或标题属性。

使用 “区块” 选项卡访问区块的所有设置

说到易用性，Elementor 在直观性方面并不陌生。不过，学习曲线还是有的，这主要是由于它提供了一系列强大的功能。

在编辑器中，你会收到一个页面前端的复制品。每个 Elementor 内容部件都可以从库中拖动或编辑。

分类 Elementor 元素

虽然分类缺乏有用的名称，但你可以在 Basic、Pro、General、Site、WooCommerce 和 WordPress 下找到小工具。还有一个 “收藏夹” 面板，用于保存自定义小工具，以备日后使用。

Elementor 真正的易用性来自其基于网格的编辑器，它允许你将元素拖放到页面上的任意位置。不仅如此，你还可以拖动整个版块，删除版块，或在编辑器中点击添加版块。

将区块拖动到另一个位置

我们还可以快速访问区块和模板库。保存自定义模板以供日后使用，或利用专业设计的区块和页面模板。其中很多都是针对特定情况的，比如你需要一个 404 页面或一个自定义的 WooCommerce 购物车。

这只是通过 Elementor 提供的区块中的一小部分

Elementor 界面的主要缺点是其第三方性质。你必须安装一个插件才能让它在 WordPress 上激活。即便如此，你还必须点击 “使用 Elementor 编辑” 按钮，因为从技术上讲，Gutenberg 仍然安装在后台。

总的来说，Gutenberg 界面更容易掌握，但没有什么比使用 Elementor 更好的了。它使用起来流畅、有趣，一旦你掌握了窍门，它的功能远远超过 Gutenberg。

两者对性能和页面速度的影响

网页制作工具提供了大量功能。这可能会导致一组笨重的工具与插件和主题冲突，也会影响页面速度。从用户评论来看，如果使用适当的优化工具和快速的主机，Elementor 和 Gutenberg 的表现似乎还不错。

在我们的测试中，我们将 Gutenberg 和 Elementor 分别安装在我们所知的高性能 CDN 服务器上。我们还使用了相同的主题和演示内容，以使测试尽可能平等。我们在两次测试中都使用了相同的服务器位置（爱荷华州），并安装了两个常用插件（WooCommerce 和 Yoast SEO），以了解页面生成器在实际环境中的响应情况。

以下是使用 Pingdom 和 Google PageSpeed Insights 得出的结果：

古腾堡页面速度测试

• Pingdom 性能得分：92（旧金山测试服务器）
• 页面大小：905.2 KB
• 加载时间：1.32 秒
• 请求数：19

我们在伦敦的测试服务器上进行了同样的测试：

• Pingdom 性能得分：92
• 页面大小：905.8 KB
• 加载时间：1.50 s
• 请求数：19

以下是 Google PageSpeed Insights 的结果：

• 桌面性能：99
• 桌面可访问性：100
• 桌面最佳实践：92
• 桌面搜索引擎优化：67
• 移动性能：93
• 移动可访问性：100
• 移动最佳实践：92
• 移动搜索引擎优化：71

Elementor 网页速度测试

• Pingdom 性能得分：88（旧金山测试服务器）
• 页面大小：2.5 MB
• 加载时间：1.93 秒
• 请求数：48

以及伦敦测试服务器的结果：

• Pingdom 性能得分：87
• 页面大小：2.5 MB
• 加载时间：1.97s
• 请求数：48

来自 Google PageSpeed Insights 的结果：

• 桌面性能：94
• 桌面可访问性：100
• 桌面最佳实践：92
• 桌面搜索引擎优化：67
• 移动性能：81
• 移动可访问性：100
• 移动最佳实践：92
• 移动搜索引擎优化：71

Gutenberg 的性能得分几乎总是更高，页面大小更小，加载时间更快，请求更少。不过，这可能是因为 Elementor 有更先进的区块设计，而 Gutenberg 在技术上总是与 Elementor 同时安装，所以你需要同时运行两个页面生成器，可能会降低网站的速度。

无论如何，两者都能提供高速度。要保持可接受的页面速度，最重要的是选择有 CDN 支持的托管主机。

定价策略差异

你可以免费获得 Gutenberg 和 Elementor。两者的主要区别在于，Gutenberg 是完全免费的，而且是永久免费。Elementor 提供强大的免费版页面生成器，并为对更高级功能感兴趣的用户提供多种升级和附加组件。

Gutenberg价格

免费，因为它是 WordPress 编辑器，默认内置在 WordPress 中。

Elementor价格

Elementor 品牌还提供其他产品和服务，但为了便于比较，我们只对其页面生成器插件进行定价。

• 免费计划：0 美元可获得 40 多个免费部件、拖放功能和开发人员 API
• Essential 计划：每年 59 美元，支持 1 个网站，提供 100 多个小工具、300 多个模板、拖放式主题生成器、WooCommerce 商店生成器、登陆页面生成器、营销工具、弹出窗口生成器和高级支持
• Expert 计划：每年 199 美元，支持 25 个网站，并获得基本计划中提及的所有功能
• Agency 计划：每年 399 美元，可获得前述计划中提及的所有功能，但可支持 1,000 个网站

初看起来，”永久免费” 的插件（如 Gutenberg）似乎是最划算的。但是，Elementor 的免费版本包含了足够多的工具，可以满足多种类型项目的需求，而且他们的高级计划价格合理。

我们认为 Elementor 比 Gutenberg 更划算，因为它是比 Gutenberg 更精简、更强大的页面生成器，而且你还可以免费获得许多功能。但如果你必须将预算永远保持在 0 美元，那么 Gutenberg 就能满足你的需求。

两者与主题、插件的兼容性

面对市场上数以千计的 WordPress 主题和插件，我们很难确定页面生成器的兼容性（或缺乏兼容性）。不过，我们可以通过用户评论来了解是否存在与流行主题或插件的明显兼容性问题。

古腾堡似乎能与大多数主题和插件兼容。毕竟，第三方开发者必须迎合页面生成器，因为 Gutenberg 默认内置在 WordPress 中。

根据我们的研究，Gutenberg 最常见的兼容问题是与同一网站上的其他页面生成器结合使用时出现的。我们还发现，插件开发人员在制作与他们的插件相关的古腾堡区块时也在玩追赶游戏。因此，你可能会发现一些较旧、更新频率较低的插件缺少 Gutenberg 区块。

截至本文发稿时，WordPress.org 论坛上大约有 12 个开放的兼容性问题，其中一些似乎是用户错误。不过，假设你可能会遇到一些问题也并非不可理解。

众所周知，Elementor 在 WordPress 社区中具有良好的兼容性。不过，由于它是第三方页面生成器，所以最好还是留意一下兼容性标签（说明插件不兼容的情况）。在搜索主题时，请务必查看它是否与 Elementor 兼容（如果您使用的是 Elementor 作为页面生成器的话）。

对于 Gutenberg 和 Elementor，你必须留意带有启动模板的 “多用途 “WordPress 主题。这些启动模板是为特定的页面生成器设计的，因此适用于 Gutenberg 的模板不能用于 Elementor，反之亦然。有些主题则完全没有这些页面构建工具的启动模板。

后台编辑与前台编辑对比

使用 Gutenberg 无法在网站前端编辑内容。但这正是重点所在。古腾堡力求将前端编辑与后台体验结合起来，让你只需使用一个界面。

因此，举例来说，所有的编辑工作都在 WordPress 的后台进行，但许多区块都会以完全显示的形式出现，以便最真实地展示发布时的效果。

古腾堡（Gutenberg）后台及其区块和背景完全显示

Elementor 也没什么不同。它曾提供后台和前台编辑功能，但最终将编辑体验合并到了一个模块中。因此，你不可能在网站前端拖动元素。

不过，Elementor 会将页面和文章带入自己的后台编辑器，并提供漂亮的前台页面预览。这样，你就能清楚地看到修改后的效果。

Elementor 编辑器

最后，这两种页面生成器都有自动保存和手动保存按钮。

客户支持对比

通常只有付费购买页面生成器后，才能获得客户支持。在我们的研究中，这一假设适用于 Gutenberg 和 Elementor。

独立的 Gutenberg 页面生成器没有直接的客户支持热线。不过，您可以在 Gutenberg 用户论坛上讨论问题。WordPress.com 会员可以获得专门的客户支持，因此您可以请他们协助解决 Gutenberg 问题。遗憾的是，WordPress.org 用户只能通过论坛和博客文章来完成自己的研究。

免费的 Elementor 插件有一个知识库和用户论坛。

使用 Elementor Academy 搜索帮助文档

要获得真人提供的电子邮件支持，您必须付费购买 Elementor Pro。尽管如此，我们还是为销售问题提供了即时聊天模块。

应该选择哪一个？

经过多年与 WordPress 用户的合作以及对 Gutenberg 和 Elementor 的详细比较，我们得出了一些最终结论。

以下是我们的收获：

• Gutenberg 的功能比 Elementor 的简单。它们非常适合基础网页设计，但高级用户会需要 Elementor 的高级样式设置和内容块。
• Gutenberg 的用户界面内置于 WordPress 中，而 Elementor 的用户界面则始终是一个第三方插件。不过，在 Elementor 中，用户体验是无缝的，而在 Gutenberg 中，要简单地拖放一个元素要困难得多。
• 性能方面，Gutenberg 和 Elementor 的表现都不错。我们的测试表明了这一点。无论如何，你可能会遇到页面速度变慢的问题。解决这个问题的主要方法是使用优质主机。
• Gutenberg 始终是免费的，但你只能使用现有的功能。Elementor 有一个功能强大的免费版本，可以选择升级以获得更多功能和真正的客户支持。
• Gutenberg 和 Elementor 兼容多种 WordPress 主题和插件。
• Gutenberg 的后台编辑提供了一个具有快速样式选项的视觉愉悦界面。前台编辑功能并不存在。不过，您可以在后台编辑器中看到实时的前台视图。Elementor 也只提供后台编辑功能，但有一个真正的预览，可以显示前台的所有内容。
• Gutenberg 有版块模板，但没有其他功能。而 Elementor 则有大量的版块、网站、页面、页眉和着陆页模板，所有这些都需要高级计划。
• Gutenberg 的客户支持包含在用户论坛和博客文章中。WordPress.com 的付费用户可以获得 Gutenberg 的帮助。付费的 Elementor 用户可以获得人工支持，而免费用户则可以访问包括知识库在内的许多在线资源。

小结

每种页面生成器都有自己的用武之地。Elementor 适用于更熟练的用户或需要页面模板库的用户。Gutenberg 是 WordPress 上的即用型页面生成器，具有简化、易用的样式工具和设置，非常适合快速创建内容。