如何使用 Divi 创建横向定价表

横向定价表是推广具有许多功能的产品的好方法。 而且，使用 Divi 的新五列布局，这非常容易做到。 然而，与任何具有五列或更多列的布局一样，挑战在于使布局具有响应性，以便在移动设备上看起来也不错。 在本教程中，我将向您展示如何创建在所有设备上看起来都很棒的水平定价表。 而且，我什至会向您展示复制横向定价表和使用“查找和替换”等新设计功能，只需单击几下即可快速更改每个表的配色方案是多么容易。

让我们开始吧。

抢先看

入门

对于本教程，您只需要 Divi。 我们将使用 Visual Builder。 由于我们将从头开始构建表，因此您需要创建一个新页面，部署可视化构建器，然后选择“从头开始构建布局”选项。

之后，您就可以开始了。 我们开始做吧！

为您的水平定价表设置五列行

首先，让我们为可视化构建器中已经等待我们的部分提供一个五列布局。

在我们开始添加任何模块之前，让我们更新部分设置以具有没有任何顶部或底部填充的自定义宽度。

宽度：1200px
截面对齐：居中
自定义填充：0px 顶部，0px 底部

然后转到行设置以快速为您的行以及三个中间列提供背景颜色，如下所示：

背景颜色：#00cbc9
第 2 列背景颜色：#00cbc9
第 3 列背景颜色：#eeeeee
第 4 列背景颜色：#eeeeee

然后按如下方式更新尺寸：

将此行设为全宽：是
天沟宽度：1
均衡柱高：是

我们将需要稍微回到行设置来更新间距，但现在让我们开始为我们的每一列添加内容。

用内容模块填充列

产品名称

在第一列中，在内容框中（在文本选项卡下）添加具有以下标题的文本模块：

<h2>Starter</h2>

这将作为您所展示的计划或产品的标题的位置。 在此示例中，这将是某种“入门”计划。

然后更新以下设计设置：

标题 2 字体样式：TT
标题 2 文本颜色：#ffffff
标题 2 文字大小：38px
自定义填充（桌面）：顶部 90%，底部 90%，左侧 10%
自定义填充（平板电脑）：顶部 30%，底部 30%

为特征类别标题添加模糊

在第二列中，添加一个模糊模块。 然后删除内容框中的填充文本并保留标题文本。 然后选择使用图标而不是图像并使用您选择的一个更新图标。

跳转到设计选项卡并更新其余设置，如下所示：

图标颜色：#00cbc9
图像/图标放置：左
标题文字大小：16px
自定义填充：2vw 底部
底行边框宽度：4px
底部边框颜色：#cccccc

由于此简介设计将用作第 2、3 和 4 列中的要素类别标题，因此您可以复制简介模块并将其粘贴到第二和第三列中。

我意识到间距现在看起来不太好。 您可能会想在模块级别添加一些间距，但是对于这种设计，我发现在列级别（在行设置下）进行间距调整更容易。 我们稍后会谈到这一点。

为功能描述列表添加文本模块

Next 在第二列的模糊下添加一个文本模块。 然后在内容框中添加下表html代码：

• 功能描述在这里。
• 功能描述在这里。
• 功能描述在这里。
• 功能描述在这里。

无序列表样式类型：方形
无序列表项缩进：4px
自定义填充：顶部 20 像素，底部 20 像素，左 5%，右 5%

现在就像我们为宣传语所做的那样，继续复制文本模块并将其粘贴到第 3 列和第 4 列的每个宣传语模块下。

将价格和按钮添加到最后一列

在最后一列（第五列）中，我将使用定价表模块来设计带有美元符号的定价文本。 这就是我们真正需要的定价表模块的全部内容，所以我将剔除其余的内容和设计元素，留下定价文本和美元符号。 我可以使用定价表模块中包含的按钮，但是在平板电脑上做一些响应式魔法有点困难（稍后你会明白我的意思）。 所以我也将使用按钮模块。

继续将定价表模块添加到第五列。 通过单击其中之一右侧的垃圾桶图标，删除默认包含的两个表之一。

然后通过添加完全透明的颜色代码摆脱背景颜色。

背景颜色：rgba(255,255,255,0)

然后更新以下内容：

表头背景颜色：rgba(255,255,255,0)
货币和频率文本颜色：#ffffff
货币和频率文本大小：30px
价格文字颜色：#ffffff
边框宽度：0px
自定义保证金（平板电脑）：-100% 正确
自定义保证金（智能手机）：0% 正确
自定义填充：顶部 0px，底部 10px，左侧 0px，右侧 0px

现在通过单击单个表显示菜单左侧的齿轮图标转到单个表设置。

现在删除标题、副标题和内容的默认内容。 这将只留下货币和价格文本。

现在我知道你此时在想什么。 如何处理价格文本下的边界线？ 嗯，有一小段自定义 css。 转到高级选项卡并将以下 CSS 添加到 Pricing Top 输入框：

定价最高：

border: none;

现在，这就是您如何成功地为定价文本和货币符号消化定价表！

对于按钮，在定价表模块下添加一个按钮模块并更新以下内容：

按钮对齐：居中
文字颜色：浅
自定义保证金（平板电脑）：-100% 正确
自定义保证金（智能手机）：0% 正确

自定义边距将与我们添加到定价表模块的边距相匹配，以便在平板电脑上获得全角模块。 由于平板电脑上的五列布局会将第五列放在两列布局的左侧，将模块向右拉 -100% 将强制模块达到行的全宽。

添加箭头设计和响应列间距

通过分层渐变添加箭头

为了在第一列中创建箭头设计效果，我们将分层两个渐变背景。 第一个渐变背景将在列级别添加。 我们稍后将在模块级别添加下一个。

要添加渐变背景，请转到行设置并添加以下内容：

第 1 列渐变背景左颜色：rgba(255,255,255,0)
第 1 列渐变背景右颜色：#eeeeee（这应该与第 2 列的背景颜色匹配）
梯度方向：-245deg
起始位置：75%
结束位置：0%

保存设置并跳转到第一列中的文本模块设置。 这是我们将添加第二层背景渐变以完成箭头的地方。 更新以下内容：

第 1 列渐变背景左颜色：#eeeeee
第 1 列渐变背景右颜色：rgba(255,255,255,0)
梯度方向：245度
起始位置：25%
结束位置：0%

请注意，这些值彼此相等。 比如色阶变了，245deg从负变正，75%现在是25%（差值）。 这就是如何使箭头点的两侧完全对称。

行和列的间距

回到行设置，让我们通过更新以下内容来调整行和列的间距：

自定义填充：0px 顶部，0px 底部，0px 左，0px 右
自定义 2 填充：顶部 5%，底部 5%，左侧 2%，右侧 2%
自定义 3 填充：顶部 5%，底部 5%，左侧 2%，右侧 2%
自定义 4 填充：顶部 5%，底部 5%，左侧 2%，右侧 2%
自定义 5 填充：顶部 10%，底部 10%

您可能想知道为什么我不只使用 2 个装订线宽度并完成它。 嗯，那是因为我想尽可能地最大化包含文本的列中的空间，以提高所有设备上的可读性。 我们可以节省的每一点空间都很重要。 这就是为什么列之间的边距是用左右填充百分比创建的。

为新表格和配色方案复制表格

显然，您需要多个横向定价表供用户比较。 要创建第二个定价表，请复制包含您创建的第一个表的整个部分。

然后打开行设置并将鼠标悬停在背景颜色上，然后单击查找和替换。

在“内”下选择“本节”。
在“替换宽度”下，添加颜色：#f84f51
然后选中该框以替换该部分中找到的所有值（不仅仅是背景颜色）。

然后单击替换并观看神奇的发生。 这是一种使用新颜色更改先前颜色的所有实例的快速简便方法。

不要忘记在退出之前保存行设置以保存更改。

现在您有一个带有新配色方案的新表。

再次重复此过程以添加另一个带有颜色的表：#bdc958

制作特色表

为了使您的一张桌子看起来有特色并突出一点，您可以在放置桌子的部分添加一个框阴影，并将用于列背景和渐变的灰色更改为漂亮的白色。

为此，请转到第二部分（中间部分）的部分设置并更新以下内容：

盒子阴影：见截图
框阴影垂直位置：0px
框阴影模糊强度：80px

要替换灰色背景色，请转到行设置并找到第 2 列的背景色 (#eeeeee)。 右键单击它，然后单击“查找和替换”。 更新内容如下：

在“内”下选择“本节”。
在“替换宽度”下，添加颜色：#ffffff
然后选中该框以替换该部分中找到的所有值（不仅仅是背景颜色）。
然后点击“替换”。

使用查找和替换来测试字体

如果您想在整个表格中使用不同的字体，您可以使用“查找和替换”功能轻松测试不同的字体。 我特意为所有模块保留了默认字体，以使这个过程顺利进行。 要更改整个表格页面的字体，您需要做的就是在任何表格部分的第一列中打开文本模块的设置（它实际上可以是使用页面上默认字体的任何模块）。 然后右键单击正在使用的标题 2 字体并选择“查找和替换”。 然后更新以下内容：

在“内”下保留“此页面”。
在“替换宽度”下，选择一种字体（我使用的是 Roboto Condensed）。
然后选中该框以替换该部分中找到的所有值（或者您无法选中它以替换所有 h2 字体）。
然后点击“替换”。

现在整个页面的所有字体都已更改。

就是这样！ 现在横向定价表已经完成。

让我们来看看结果。

平板电脑和智能手机上的五列调整效果也很好。

最后的想法

Divi 的五列布局，以及 Visual Builder 中强大的设计功能，让您可以制作一些漂亮的水平定价表。 使用“查找和替换”在整个过程中调整颜色和字体可以节省大量时间，进一步改进设计过程。 我希望您发现本教程既有信息又有启发性。

我期待在评论中收到您的来信。

干杯!