WordPress divi主题

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

| 5月 15, 2022 | Divi主题使用教程 | 0 条评论

5分钟生成10篇英文软文article forge软件试用

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

google广告开户

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

让我们开始吧!

预览

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

定价计划

让我们开始创作吧!

订阅我们的 Youtube 频道

添加新部分

间距

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

  • 上边距:160px
  • 底部填充:160px

定价计划

添加第 1 行

立柱结构

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

WordPress divi主题

定价计划

添加文本模块

添加内容

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

定价计划

标题文字设置

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

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

定价计划

添加分频器模块

能见度

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

定价计划

颜色

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

定价计划

浆纱

在尺寸设置中更改模块的宽度。

fiverr建站WordPress程序员
  • 宽度:39%
  • 模块对齐:中心

定价计划

间距

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

定价计划

添加第 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>

定价计划

JasperAI 10000字免费额度试用

定价计划

状态

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

定价计划

背景颜色

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

  • 背景颜色:#ffffff

定价计划

WordPress备份工具updrafplus

图标设置

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

定价计划

切换设置

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

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

定价计划

标题文本设置

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

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

定价计划

正文文本设置

修改正文文本设置。

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

定价计划

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

完成第 1 列中的 Toggle Module 修改后,您可以继续克隆它两次,并将重复的内容放在剩余的两列中。

定价计划

更改副本

确保更改所有副本的副本,然后就完成了!

定价计划

预览

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

定价计划

最后的想法

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

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题