Gutenberg与Elementor WordPress页面构建工具对比：功能、界面、价格全面解析

Gutenberg与Elementor：如何做出明智的选择？关键在于您期望从WordPress页面生成器中获得哪些功能。我们将深入解析Gutenberg和Elementor的核心特性，并进行直接对比。基于多年的使用经验和严格测试，以下是我们对两者之间差异的深刻见解。

什么是Gutenberg？

Gutenberg是WordPress的默认页面生成器，于2018年推出，取代了原先的“经典”WordPress编辑器。后者作为最初的富文本/HTML内容编辑器，缺乏拖放功能。Gutenberg实际上是对包括Elementor、Divi和Visual Composer在内的一批第三方页面生成器插件的回应，这些插件的出现正是为了取代经典编辑器。

从功能角度来看，Gutenberg提供了一个易于访问的“区块”库，允许用户将内容元素拖放到页面和帖子中。Gutenberg中的区块选项卡配备了近100个内容区块，其中一些区块允许整合和嵌入Twitter、Reddit和亚马逊Kindle等第三方服务。此外，还可以创建动态区块，自动更新块内容。一些Gutenberg区块示例包括：

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

大多数WordPress主题都能很好地与Gutenberg配合使用（现在基本上都需要）。Gutenberg界面将页面或文章内容置于中心位置，并在可能的情况下呈现内容（如显示表单或按钮）。这是对经典编辑器的重大升级，因为Gutenberg在提供可视化用户体验的同时，还支持快速标记编辑。如果需要，还可以直接访问CSS和HTML的自定义编码部分。每个区块都有自己的一长串设置，Gutenberg的快速面板可以对文档和区块设置（如alt标记、背景颜色和评论审核）进行强大的控制。

什么是Elementor？

Elementor是一款页面生成器，与Gutenberg非常相似。不过，Elementor早于Gutenberg，它是第三方页面生成器应用程序之一，最终促成了WordPress默认页面生成器的诞生。Elementor于2016年推出，因其完全可视化的网页设计界面、时尚的入门模板（可随时导入）以及拖放式内容模块而深受WordPress设计师的喜爱。

Elementor和Gutenberg之间最明显的区别之一是，Elementor并非内置在WordPress中。它是由另一家公司制作的，所以你必须安装它的免费插件（也有高级版本）。你还会注意到，Elementor有独特的功能名称。在Gutenberg中被称为“块”的功能在Elementor中被称为“小部件”。说到这一点，Elementor拥有100多个这样的内容小部件。Elementor内容小部件示例包括：

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

许多小部件可以在WordPress网站和第三方应用程序（如Stripe、Facebook和Sound Cloud）之间创建集成。总之，Elementor是顶级WordPress页面构建工具之一，拥有一个充满活力的开发者和用户社区。它的可视化、拖放式界面无可匹敌，你可以获得数百个设计模板，而且所有编辑都是实时完成的。除了专业的WooCommerce小工具以及用于登陆页面和表单的营销工具外，Elementor仍然是网站建设领域的巨无霸，这一点在比较Gutenberg与Elementor时显而易见。

Gutenberg与Elementor的比较

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

主要功能

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

拖放功能与编码：Gutenberg与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拥有强大的集成列表。以下是Elementor40多个集成中的一部分：

– 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似乎能与大多数主题和插件兼容。毕竟，第三方开发者必须迎合页面生成器，因为Gutenberg默认内置在WordPress中。

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

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

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

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

后台编辑与前台编辑对比

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

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

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

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

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

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上的即用型页面生成器，具有简化、易用的样式工具和设置，非常适合快速创建内容。