如何在 Divi 中设计漂亮的定价表

定价表通常是页面的主要 CTA。 这就是为什么正确设置它们的样式很重要的原因。 使用 Divi，您可以按照自己的想象进行多次轮换并创建定价表。 为了让您深思，我们创建了一个惊人的定价表，您可以将其用于您正在处理的任何类型的网站。 我们将指导您仅使用 Divi 的内置选项创建从 A 到 Z 的结果。

让我们开始吧！

预览

在我们深入学习本教程之前，让我们快速浏览一下不同屏幕尺寸下的结果。

桌面

移动的

免费下载图片

要了解本教程中使用的图像，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您很快就会成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

如何在 Divi 中设计漂亮的定价表

订阅我们的 YouTube 频道

让我们开始创作吧！

添加新部分

渐变背景

创建一个新页面并使用以下渐变背景添加常规部分：

• 颜色 1：#ffffff
• 颜色 2：#353272
• 起始位置：50%
• 结束位置：50%

间距

然后，转到该部分的间距设置并修改自定义边距和填充值。

• 下边距：50px（桌面），20px（平板和手机）
• 左边距：50px（桌面），20px（平板和手机）
• 右边距：50px（桌面），20px（平板和手机）
• 顶部填充：0px
• 底部填充：0px

添加新行

列结构

完成修改部分设置后，您可以继续使用以下列结构添加新行：

浆纱

在不添加任何模块的情况下，打开行设置并在设计选项卡中修改大小设置。

• 使这一行全宽：是
• 使用自定义装订线宽度：是
• 天沟宽度：1

间距

然后，转到间距设置并添加一些自定义填充值。

• 顶部填充：94px
• 底部填充：177px
• 左填充：150px（桌面），30px（平板电脑和手机）
• 右内边距：150 像素（桌面）、30 像素（平板电脑和手机）
• 第 1、2 和 3 列左填充：10px
• 第 1、2 和 3 列右填充：10px

将文本模块 #1 添加到第 1 列

添加内容

是时候开始添加模块了！ 我们正在使用各种模块自定义我们想要创建的定价表。 我们需要的第一个模块是文本模块。 在内容框中添加第一个成员资格类型的名称。

背景颜色

添加内容后，转到背景设置并添加白色背景颜色。

• 背景颜色：#ffffff

背景图片

切换到背景图像选项卡并上传“ divi-beautiful-pricing-table-background-pattern-1.png ”文件，您可以在本文开头共享的下载文件夹中找到该文件。

• 背景图片尺寸：封面
• 背景图片位置：顶部中心
• 背景图像重复：不重复

文字设置

接下来修改文本设置。

• 文字字体粗细：超粗
• 文字颜色：#ffffff
• 文字大小：80px
• 文字字母间距：-3px
• 文本行高：1em

间距

并添加一些自定义边距和填充值。

• 上边距：5vw（台式机），0vw（平板电脑和手机）
• 顶部填充：20px
• 底部填充：200px

边界

继续在左上角和右上角添加“20px”。

盒子阴影

最重要的是，给文本模块一个微妙的框阴影。

• 框阴影垂直位置：-20px
• 框阴影模糊强度：80px
• 框阴影传播强度：-10px
• 阴影颜色：rgba(0,0,0,0.15)

将按钮模块添加到第 1 列

添加副本

我们在第 1 列中需要的第二个模块是按钮模块。 添加一些选择副本。

按钮对齐

然后，转到对齐设置并将对齐更改为居中。

• 按钮对齐：居中

按钮设置

我们将继续在按钮设置中对按钮的外观进行一些更改。

• 为按钮使用自定义样式：是
• 按钮文字颜色：#ffffff
• 颜色 1：#6932ff
• 颜色 2：#30acf4
• 梯度方向：100deg

• 按钮边框宽度：0px
• 按钮字母间距：-2px
• 字体粗细：超粗

间距

接下来，向按钮添加一些填充以使其看起来不错，并应用负上边距以创建与列中的前一个模块的重叠。

• 上边距：-54px
• 顶部填充：10px
• 底部填充：10px
• 左填充：30px
• 右填充：30px

盒子阴影

最后但并非最不重要的是，添加一个微妙的框阴影。

• 框阴影模糊强度：80px
• 框阴影扩散强度：-14px
• 阴影颜色：rgba(0,0,0,0.3)

将文本模块 #2 添加到第 1 列

添加内容

我们需要的下一个模块是另一个带有会员类型价格的文本模块。

背景颜色

添加价格后，转到背景设置并应用白色背景色。

• 背景颜色：#ffffff

文字设置

接下来更改文本设置。

• 文字字体粗细：超粗
• 文字颜色：rgba(0,0,0,0.05)
• 文字大小：120px
• 文本行高：1em

间距

并在间距设置中应用一些自定义填充值。

• 顶部填充：100px
• 底部填充：100px
• 左填充：80px

边界

然后，转到边框设置并在左下角和右下角添加“30px”。

盒子阴影

最后但并非最不重要的是，给模块一个方框阴影。

• 框阴影水平位置：0px
• 框阴影垂直位置：2px
• 框阴影模糊强度：80px
• 框阴影传播强度：0px
• 阴影颜色：rgba(0,0,0,0.21)

将文本模块 #3 添加到第 1 列

添加内容

我们在第 1 列中需要的下一个也是最后一个模块是另一个文本模块。 将会员类型的价格添加到内容框中。

文字设置

接下来更改文本设置。

• 文字字体粗细：超粗
• 文字颜色：#000000
• 文字大小：50px
• 文本行高：1em

间距

并通过使用自定义间距值在此模块和前一个模块之间创建重叠。

• 上边距：-180px
• 下边距：180px（平板电脑和手机）
• 左填充：100px

克隆第 1 列中的所有模块两次并在剩余列中放置重复项

修改完第 1 列中的模块后，您可以继续克隆每个模块两次，并将重复项放置在剩余的两列中。

更改列中模块的内容

根据您在网站上共享的其他两种成员资格类型更改重复项的内容。

更改第 2 列中的定价表

更改文本模块 #1 的背景图像

我们还强调了中间定价表。 打开第 2 列中的第一个文本模块，将背景图像更改为可在下载文件夹中找到的“ divi-beautiful-pricing-table-background-pattern-2.png ”文件。

删除文本模块 #1 的上边距

为了强调这种成员资格类型，我们将删除间距设置中第一个文本模块的上边距。

更改按钮渐变背景

我们还将使用按钮模块的另一个渐变背景匹配新的背景图像。

• 颜色 1：#fb32ff
• 颜色 2：#ff304f
• 梯度方向：100deg

预览

现在我们已经完成了所有步骤，让我们最后看看不同屏幕尺寸的结果。

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何为下一个 Divi 项目设计漂亮的定价表。 我们已逐步指导您完成本教程，并仅使用 Divi 的内置选项就取得了惊人的成果！ 如果您有任何问题或建议，请务必在下面的评论部分留言。