如何创造性地使用 Divi 的切换模块来展示定价计划

在您的网站上展示定价计划时，您可以轮流创建绝对令人惊叹和有吸引力的定价页面或部分。 使用 Divi 构建网站时，您很可能会选择定价表模块。 该模块允许您快速添加定价表并根据需要对其进行样式设置。 但是，如果您想向页面的这一特定部分添加更多交互，您还可以使用切换模块在点击时显示定价计划。 这是通过保持其状态打开并关闭其他两个来突出特定定价计划的好方法。

在本教程中，我们将逐步向您展示如何使用 Divi 的切换模块创建华丽的切换定价表设计。 一旦你掌握了方法，你就可以为你建立的任何类型的网站创建各种切换定价计划。

让我们开始吧！

预览

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

让我们开始创作吧！

订阅我们的 YouTube 频道

添加新部分

间距

使用 Divi 的 Visual Builder 创建一个新页面或打开一个现有页面。 向页面添加一个新部分，打开部分设置并添加一些自定义顶部和底部填充以在该部分的顶部和底部创建一些空间。

• 顶部填充：160px
• 底部填充：160px

添加第 1 行

列结构

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

添加文本模块

添加内容

无需对行进行更改，因此请立即添加文本模块。 在模块的内容框中输入一些选择的 H2 内容。

标题文字设置

继续转到设计选项卡并更改标题文本设置。

• 标题 2 字体：Didact Gothic
• 标题 2 字体粗细：常规
• 标题 2 文本对齐：居中
• 标题 2 文本颜色：#000000
• 标题 2 文字大小：40px
• 标题 2 字母间距：-1px

添加分频器模块

能见度

在您在前面的步骤中添加和修改的文本模块正下方添加一个分隔模块。 确保启用了分隔器模块的“显示分隔器”选项。

• 显示分隔线：是

颜色

继续转到设计选项卡并更改分隔线颜色。

• 颜色：#000000

浆纱

在大小设置中更改模块的宽度。

• 宽度：39%
• 模块对齐：居中

间距

添加一些自定义底部边距。

• 下边距：50px

添加第 2 行

列结构

我们完成了第一行及其模块的修改。 是时候使用以下列结构添加新行了：

第 1 列渐变背景

尚未添加任何模块，打开行设置并向第 1 列添加渐变背景。

• 颜色 1：#00fff2
• 颜色 2：rgba(255,255,255,0)
• 第 1 列渐变类型：径向
• 第 1 列径向：右下角
• 第 1 列起始位置：30%
• 第 1 列结束位置：30%

第 2 列渐变背景

对第二列也做同样的事情。

• 颜色 1：#fce96f
• 颜色 2：rgba(255,255,255,0)
• 第 2 列渐变类型：径向
• 第 2 列径向：右上
• 第 2 列起始位置：40%
• 第 2 列结束位置：40%

第 3 列渐变背景

同样，使用以下设置向第三列添加渐变背景：

• 颜色 1：#a659ff
• 颜色 2：rgba(255,255,255,0)
• 第 3 列渐变类型：径向
• 第 3 列径向：底部
• 第 3 列起始位置：30%
• 第 2 列结束位置：30%

浆纱

完成添加渐变背景后，转到设计选项卡并更改大小设置。

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

将切换模块添加到第 1 列

添加内容

是时候开始创建不同的定价计划了！ 将新的切换模块添加到第一列并输入标题。 为了设置内容框中不同元素的样式，我们使用了一些额外的 HTML 标签。 继续复制以下几行并将它们添加到内容框的文本选项卡中：

<p>&nbsp;</p>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>
<p>&nbsp;</p>
<p><span><span style="font-size: 50px; font-weight: bold;">$30</span>/mo</span></p>
<p>&nbsp;</p>
<p><a href="#" style="font-weight: bold; color: #ffffff; background-color: #000000; padding: 15px 40px 15px 40px;">Buy now</a></p>
<p>&nbsp;</p>

状态

您可以选择是否要打开或关闭切换模块的状态。 为了能够看到您在本教程的其余部分所做的所有更改，我建议保持状态“打开”，直到您完成修改所有不同的设计设置。

背景颜色

继续转到切换模块的背景设置并添加白色背景色。

• 背景颜色：#ffffff

图标设置

接下来在设计选项卡中更改图标颜色。

• 图标颜色：#000000

切换设置

并在切换设置中修改打开切换背景颜色。

• 打开切换背景颜色：rgba(255,255,255,0)

标题文字设置

然后，对标题文本设置进行一些更改。

• 标题字体：Didact Gothic
• 标题字体粗细：粗体
• 标题文字颜色：#000000
• 标题文字大小：3.5vw（桌面）、60px（平板电脑）、40px（手机）

正文设置

还要修改正文设置。

• 正文字体：Didact Gothic
• 正文对齐方式：左
• 正文颜色：#000000
• 正文大小：18px
• 车身线高：1.5em

克隆切换模块两次并放置在剩余的两列中

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

更改副本

确保您更改了重复项的所有副本，然后就大功告成了！

预览

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

最后的想法

在本教程中，我们向您展示了使用 Divi 的切换模块在您的网站上展示定价计划的创造性方法。 这是与访客互动并提升您的设计风格的好方法。 通过保持打开一个选项而关闭其他两个选项，可以更轻松地突出显示您部分中的特定定价计划。 您可以将这种方法用于您正在构建的任何类型的网站。 如果您有任何问题或建议，请务必在下方评论区留言！