使用 Gutenberg 块编辑器创建定价表
已发表: 2020-03-10在一年多的时间里，我们见证了 Gutenberg 区块编辑器的巨大发展。 与经典的 WordPress 编辑器相比，我们现在可以在帖子和页面中设计以前只能通过编码完成的元素。
例如，使用经典编辑器，在帖子中显示表格的最简单方法是在电子表格中创建所述表格，将其导出为图像，然后将其插入到要显示的帖子中。 但是我们现在在新的 WordPress 编辑器中找到的块之一是表格块。 让我们看看我们如何使用 Gutenberg 创建一个表，以及我们可以在多大程度上使用同一个块创建一个价格表。
表块
创建表格就像添加一个新的表格块一样简单，我们在其中指出我们想要的行数和列数以及它们的对齐方式。
在 Table 块中，我们可以自定义以下属性：
我们还可以在每个单元格中指示文本的对齐方式以及字体是粗体还是斜体，并添加链接。 此外，我们可以随时通过添加或删除行和/或列来修改表。
这样，我们看到我们可以很容易地创建下表：
| Nelio A/B 测试计划 | ||
|---|---|---|
| 基本的 | 专业的 | 企业 |
| 适用于自由职业者和个人网站 | 对于小企业家 | 对于专注于优化的团队 |
| 29 欧元/月 | 89 欧元/月 | 259 欧元/月 |
| 1 个站点 | 5 个站点 | ? 10 个站点 |
| 5,000 次访问测试页面 | 35,000 次访问测试页面 | 200,000 次访问测试页面 |
| 订阅 | 订阅 | 订阅 |
这比我们用经典编辑器做的更简单、更快捷。 并且得到的结果肯定可以用来显示一个数据表。
表块限制
虽然创建之前的表对我们来说非常容易，但我们遇到了很多限制。 一方面，您使用 Gutenberg 中的表格类型块设计的表格没有响应。 也就是说，表格不会中断，而是会变小，而无法按列显示表格的不同元素：
完全适应设备的表格通过将表格分成列来显示表格的元素，以便更好地显示所有单元格。
除了适应设备的（不）能力之外，您可能已经注意到，在表格块中，我们无法轻松更改每个单元格中的字体类型和大小、颜色等。 也就是说，由于其所有限制，Gutenberg 表格块对于为您的产品创建有吸引力的价格表没有用处。
我们如何创建这些响应式表格？
备择方案
列块
另一种方法是尝试使用列块布置表格：
基本的
适用于自由职业者和个人网站
29 欧元/月
1 个站点
5,000 次访问测试页面
专业的
对于小企业家
89 欧元/月
5 个站点
35,000 次访问测试页面
企业
对于专注于优化的团队
259 欧元/月
? 10 个站点
200,000 次访问测试页面
与表格块相比，列块的优势在于它是完全响应的，并且在移动屏幕上我们会看到每个计划都显示在另一个之后。
我们看到这些列是完全响应的。 当然，为了显示很少的信息并且没有太多复杂性，这些列是可以考虑的替代方案。
价格表块插件
如果您必须创建有吸引力的价格表，我的建议是您安装一些包含此块的插件。 它们可能不允许您在不接触代码的情况下进行任何类型的自定义，但在许多情况下，您可以获得非常优雅的结果。 让我们看一些与 Gutenberg 块编辑器完全集成的示例。
共块
Coblocks 是一个插件，包含一整套完全适应古腾堡的块。 其中之一是价格表块。
它非常简单易用，无需编码，您可以自定义列数和与排版相关的某些方面，以及列和文本的颜色。 您很快就有了一个完全响应的价格表，如下图所示。
格威德
同样，Getwid 插件还包括一整套与 Gutenberg 编辑器完全兼容的块。 很快，您可以轻松地构建一个完全响应的价格表，如下所示：
在这种情况下，您可以自定义字体以及背景和文本颜色。
古腾堡高级积木
The Premium Blocs for Gutenberg 插件还包括块，您可以使用这些块创建非常有吸引力的价格表。 下面我向您展示了我使用在列中插入的定价表块创建的价格表图像。
此块允许您自定义颜色、字体、按钮类型、是否要包含图标、如何显示价格的属性、功能和描述等。 如您所见，它允许您非常完整的自定义。
带有内置编辑器的插件
或者，您会发现其他类型的插件，其中包括一个内置的定价表编辑器，该编辑器集成到您的 WordPress 仪表板中，您可以使用它创建非常完整和自定义的表。 构建所需的表格后，可以使用简码将此表格包含在任何页面或帖子中。 让我们看一些例子：
响应式定价表
响应式定价表是一个插件，它为您的 WordPress 添加了一个新的编辑器，以便您可以创建价格表。 您可以添加大量计划并自定义每个计划。
对于每个计划，您可以添加名称、副标题、描述和价格。 您还可以添加功能列表、自定义购买按钮和更改计划的配色方案。
创建计划后，您只需在定价页面上使用简码添加它。
Supsystic 的定价表
Supsystic 定价表插件向您的 WordPress 仪表板添加了一个拖放编辑器，您可以使用它来构建表格。 它为您提供了许多响应式表格设计。 在免费版本中，您最多可以使用 7 种设计。
选择所需的表格设计后，您将拥有一个编辑器，可让您修改列数并自定义显示的每个计划的许多功能。 您还可以随时更改布局。 最后，和以前一样，该表格可以包含在任何页面或带有简码的帖子中。
其他集成价格表编辑器的免费插件有：
- ARprice的定价表
- 定价表 WordPress 插件 – Fatcat Apps 的简单定价表
- 响应式定价表生成器 – wpPricing Builder
- WRC 定价表
- 定价表生成器 – AP 定价表 Lite
- TC 定价表（按主题代码）
- 定价表 – bh A WP Life
结论
如您所见，在 WordPress 中，您可以使用多种替代方法来构建价格表，无需额外成本，也无需直接编写代码。 因此，只需选择最适合您需求的选项即可。
请记住，显示产品价格的页面最终对吸引客户至关重要。 所以，你花在让它有吸引力上的时间不会白费。 为了激发您的灵感，您可以查看我们的 Nelio A/B 测试产品的价格表设计，该产品是本文的特色图片？