如何在 WordPress 中创建产品比较表

比较表通过并排显示相似或不同的产品，为用户提供有关相似或不同产品的快速详细信息。 它可以帮助客户做出决策并增强您网站上的客户体验。

但是，如果您想将自定义功能添加到比较表中，可能会有点棘手。 幸运的是，Elementor 通过提供各种有用的插件（如 Happy Addons）使这个过程变得更容易。 使用快乐插件“比较表”小部件，您可以轻松地在一帧中显示多个产品的功能。

在本教程博客中，您将学习如何在 WordPress 网站中创建比较表。 让我们从基本查询开始——

为什么产品比较对您的企业网站很重要

比较表是指一个表格，您可以在其中并排显示多个产品或服务的数据组，以便更好地理解。

主要用于电子商务网站，分享不同产品的型号、图片、功能、定价、描述等。但是，网站所有者也使用比较表来证明他们的产品是最好的产品，通过在同一张表下比较他们的竞争对手产品.

它可以帮助客户一目了然地找到产品的优缺点。 使用这种有效的比较表数据，客户可以在几分钟内选择合适的产品并节省宝贵的时间。

快乐插件如何帮助创建产品比较表

使用新的 Gutenberg 块编辑器，您可以根据基本需求创建表格。 但是，如果您想为产品比较创建一个产品比较表，您需要一个 3rd 方插件或为此功能编写自定义代码。 这会消耗大量时间和金钱，因为免费插件带有一些初始功能。

您可以使用 Happy Addon 的新免费小部件“比较表”来解决这些类型的障碍。 使用此小部件，您可以高效地创建和自定义响应式表格，以更有条理的方式并排比较您的产品。

让我们看看为什么需要使用 Happy Addons 小部件：

• 移动友好
• 大型预制模板库
• 在列中添加图像
• 广泛的支持图标
• 提供现成的餐桌设计

在 WordPress 中设计完美的功能比较表

是时候向您展示如何使用 Happy Addons 的比较表小部件并为您的网站创建交互式产品比较表了。

在此之前，您需要在您的 WordPress 网站中安装并激活以下插件：

• 元素（免费）
• 快乐插件（免费）

您可以将比较表添加到网站的任何部分。 但在这里，我们将把小部件演示成一个空白页面。

您还可以查看本指南以了解如何在 WordPress 上创建新页面。

以下是创建比较表所需执行的步骤：

• 第 1 步：添加比较表小部件
• 第 2 步：管理表头
• 第 3 步：管理表格行
• 第 4 步：管理表格按钮
• 第 5 步：表格设置
• 第六步：风格对比表

让我们开始吧：

第 1 步：添加比较表小部件

首先，您需要找到小部件并将其添加到您网站的合适位置。 您从 Elementor 小部件库区域获取小部件。

比较表内容区

添加小部件后，您将获得如下图所示的默认表格设计。 内容区域具有管理表格内容的必要设置。

在这里你会得到。

• 表头
• 表行
• Tabke 按钮
• 数据库设置

现在，我们将介绍每个设置，以便您可以轻松管理表格内容。

第 2 步：管理表头

Table Head 选项允许您通过单击ADD ITEM按钮来添加表的头项。 您可以复制和删除项目。 此外，您可以轻松设置整个表头内容的对齐方式（左、中和右）和图标位置（左和右）。

自定义表头项目

要自定义表头单个项目，您需要先打开一个项目。 然后你可以添加Title ，选择Title HTML Tag set Content Width ，插入一个Icon ，设置Icon Color ，写一个Description 。

整个列宽定义为100% 。 在这里，您注意到我们设置了Column Width 60 (%) 。 这意味着特征列获得 60% 的空间，而其他两列获得20%的空间。

你也可以写一个描述。 首先，您打开描述选项。 然后你会得到文本编辑器来编写描述。 我们不需要添加说明，这就是我们没有启用它的原因。

添加粘性标题

如果要添加 Sticky Header，则需要先激活Sticky Header选项。 然后，每当您向下滚动时，您的表格标题就会显示在顶部。

第 3 步：管理表格行

默认情况下，小部件带有两个带有Columns的Rows 。 您可以添加新行并在其中插入所需的列。

要自定义行列内容，您需要打开一行或一列，然后根据您的目的更改内容。

添加新表格行

要添加新的Table Row ，您需要先单击ADD ITEM 。

之后，您将获得插入行的选项。 您必须选择Row而不是Column并将Content Type -> Blank设置为一行。 没有必要更改图像大小，因此保持默认值。

但是，您可以在列中添加三种类型的内容，例如Heading、Icon和Image 。

添加带标题的列

让我们向您展示如何在一行中添加一列。

首先，您只需单击“添加项目”按钮即可添加项目。 其次，选择Column（行/列）并设置Content Type–>Heading 。 最后，您可以写标题的标题。

写下描述

您可以在Title下写下描述。 首先，显示描述选项。 然后你会得到文本编辑器面板，你可以用自己的方式编写描述。

我们还添加了两列。 这次我们使用了Content Type–>Icon 。 这是当前的表格视图。

注意：请记住，每当您将内容添加到列中时，内容都会从右到左显示。

第 4 步：管理表格按钮

转到内容- > 表格按钮区域，然后您可以编写标题并插入一个链接到按钮。

自定义按钮

您可以添加自定义样式来装饰按钮。 首先激活自定义样式。 然后，您将获得添加新按钮样式的基本设置。

您将文本颜色、背景颜色和框阴影添加到按钮。 您还可以在Hover按钮上添加不同的样式。

第 5 步：表格设置

表格设置区域为您提供了根据您的设备设置表格宽度的选项。 在平板电脑和手机视图中，表格项目将是可滚动的。 这样，您将控制表格的响应能力。

第六步：风格对比表

Style 区域具有自定义Table Head、Table Row和Table Button所需的样式选项。

使用此小部件，您可以设计这种类型的 Elementor 比较表来并排比较您的产品。

产品比较表的最终输出

在设计完比较表的所有部分后，您将获得完美的外观，以吸引人的方式展示您的产品，包括功能、图像和其他元素。 下面是我们今天创建的表格 -

使用不同的样式选项来制作符合您品牌的设计。 您还可以查看比较表小部件的完整文档。

准备好在您的 WordPress 网站上创建比较表了吗？

交互式比较表可让您的用户在比较产品时获得更好的视图。 如果您按照上述步骤操作，使用 Elementor & Happy Addons 设计比较表不再困难。

在本指南中，我们展示了为什么需要使用 Happy Addons 的比较表小部件。 此外，我们还向您展示了如何在您的 WordPress 网站上创建比较表。

如果您对本博客仍有任何疑问，可以对我们发表评论。

我们要求您加入我们的时事通讯。 不要忘记连接我们的社交渠道 Facebook、Twitter 和 YouTube。