使用 Divi 将列转换为定价计划
已发表: 2019-08-01Divi 的新色谱柱选项为我们的工作流程带来了大量新的设计可能性。 它们有助于将多个模块联合起来，而无需接触任何单行 CSS 代码。 在这篇文章中，我们将仅使用 Divi 的内置选项将列转换为定价计划。 我们还将使用列悬停变换选项来实现一些令人惊叹的悬停效果。 您也可以免费下载 JSON！
让我们开始吧。
预览
在我们深入学习教程之前，让我们快速浏览一下不同屏幕尺寸的结果。
桌面
移动的
免费下载列定价计划布局
要了解免费的列定价计划布局，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
免费下载
加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。
您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！
让我们开始重建吧！
订阅我们的 YouTube 频道
添加新部分
渐变背景
将新的常规部分添加到您正在处理的页面并打开部分设置。 转到背景设置并添加线性渐变背景：
- 颜色 1：#ededed
- 颜色 2：#ffffff
- 起始位置：30%
- 结束位置：30%
间距
我们还在该部分添加了一些顶部和底部填充。
- 顶部填充：200px
- 底部填充：200px
添加新行
列结构
继续使用以下列结构向该部分添加新行：
浆纱
尚未添加任何模块，打开行设置，转到高级选项卡并相应地更改大小设置：
- 使用自定义装订线宽度：是
- 天沟宽度：1
- 宽度：80%（桌面和平板电脑），90%（手机）
- 最大宽度：1400 像素（桌面）、90%（平板电脑）、100%（手机）
第 1 列设置
我们还需要修改列设置，从第一个开始。 打开第 1 列设置。
渐变背景
将以下渐变背景应用于第 1 列：
- 颜色 1：#f7f7f7
- 颜色 2：#ffffff
- 渐变类型：径向
- 径向：底部
- 起始位置：31%
- 结束位置：31%
边界
还将“20px”边框半径添加到列中。
盒子阴影
为了在页面上创建一些深度，我们还将添加一个微妙的框阴影。
- 框阴影模糊强度：80px
- 阴影颜色：rgba(0,0,0,0.11)
默认变换比例
正如您在这篇文章的预览中所注意到的，这些列略有变化。 转到变换设置并确保变换比例选项在其默认状态下保持“100%”。
- 底部：100%
- 正确：100%
悬停变换比例
在悬停时修改变换比例值。
- 底部：120%
- 正确：120%
默认转换
我们还使用转换翻译设置将桌面上的列稍微推到右侧。 添加以下输入：
- 底部：34px（桌面），0px（平板和手机）
- 右：0px
悬停变换翻译
在悬停时使变换转换值恢复正常。
- 底部：0px
- 右：0px
默认变换旋转
移至变换旋转设置并在左侧添加以下值：
- 左：352deg（桌面），0deg（平板电脑和手机）
悬停变换旋转
在悬停时将值恢复为“0deg”。
- 左：0度
溢出
在这篇文章的后面，我们将在列的底部添加一个按钮。 该按钮将与列的底部边框重叠。 为了使这成为可能，我们需要使列的溢出可见。
- 水平溢出：可见
- 垂直溢出：可见
默认 Z 索引
接下来更改不同屏幕尺寸的列的 z 索引。 这将帮助我们保持堆叠有序。
- Z 索引：9（台式机）、11（平板电脑和手机）
悬停 Z 索引
在悬停时，我们希望该列出现在其他列之上。 为了实现这一点，我们将增加悬停时的 z 索引。
- Z指数：11
过渡
我们还通过增加过渡设置中的过渡持续时间来创建平滑过渡。
- 转换持续时间：500ms
第 2 列设置
进入第二列！ 继续并打开列设置。
渐变背景
应用以下渐变背景设置：
- 颜色 1：#fff200
- 颜色 2：#ffffff
- 渐变类型：径向
- 径向：底部
- 起始位置：31%
- 结束位置：31%
边界
接下来添加边框半径的“20px”。
盒子阴影
伴随着一个微妙的盒子阴影。
- 框阴影模糊强度：50px
- 阴影颜色：rgba(0,0,0,0.14)
默认变换比例
第二列是我们的特色定价计划。 为了确保这不会被忽视，我们将在变换比例设置中增加列的大小。
- 底部：112%（台式机）、100%（平板电脑和手机）
- 右：112%（桌面）、100%（平板电脑和手机）
悬停变换比例
在悬停时修改变换比例值。
- 底部：120%
- 正确：120%
溢出
接下来更改水平和垂直溢出。
- 水平溢出：可见
- 垂直溢出：可见
默认 Z 索引
然后，转到可见性设置并增加列的 z 索引。
- Z指数：10
悬停 Z 索引
修改悬停时的 z 索引。
- Z指数：12
过渡
并在过渡设置中增加过渡持续时间。
- 转换持续时间：500ms
第 3 列设置
进入第三列也是最后一列！ 打开列设置。
渐变背景
转到背景设置并添加以下渐变背景：
- 颜色 1：#f7f7f7
- 颜色 2：#ffffff
- 渐变类型：径向
- 径向：底部
- 起始位置：31%
- 结束位置：31%
边界
接下来添加“20px”边框半径。
盒子阴影
伴随着微妙的盒子阴影。
- 框阴影模糊强度：80px
- 阴影颜色：rgba(0,0,0,0.11)
默认变换比例
是时候改造列了！ 确保默认变换比例值保持“100%”。
- 底部：100%
- 正确：100%
悬停变换比例
在悬停时修改这些值。
- 底部：120%
- 正确：120%
默认转换
我们还通过应用一些自定义转换转换值将列推到桌面左侧。
- 底部：-34px（桌面），0px（平板和手机）
- 右：0px
悬停变换翻译
在悬停时将值恢复为“0px”。
- 底部：0px
- 右：0px
默认变换旋转
继续旋转处于默认状态的列。
- 左：8deg（桌面），0deg（平板电脑和手机）
悬停变换旋转
在悬停时将左变换旋转值更改回“0px”。
- 左：0度
溢出
确保接下来可以看到溢出。
- 水平溢出：可见
- 垂直溢出：可见
默认 Z 索引
然后，转到可见性设置并确保默认 z 索引为 9。
- Z指数：9
悬停 Z 索引
在悬停时修改 z 索引。
- Z指数：11
过渡
并在过渡设置中增加过渡持续时间。
- 转换持续时间：500ms
将 Blurb 模块添加到第 1 列
添加标题
是时候开始向第一列添加模块了！ 添加一个新的 Blurb 模块并插入一个标题。
选择图标
接下来选择一个图标。
图标设置
转到设计选项卡并相应地更改图标设置：
- 图标颜色：#000000
- 图标位置：顶部
- 使用图标字体大小：是
- 图标字体大小：50px
标题设置
接下来更改标题文本设置。
- 标题字体: Poppins
- 标题文本对齐：居中
- 标题文字颜色：#000000
- 标题文字大小：27px
间距
并添加一些上边距。
- 上边距：80px
将分频器模块添加到第 1 列
能见度
到第二个模块，这是一个分隔模块。 确保启用了“显示分隔线”选项。
- 显示分隔线：是
线
移至设计选项卡并将分隔线颜色更改为黑色。
- 线条颜色：#000000
浆纱
还要修改大小设置。
- 分隔线重量：6px
- 宽度：14%
- 模块对齐：居中
- 高度：0px
间距
最后，添加一些上边距。
- 上边距：50px
将文本模块 #1 添加到第 1 列
添加内容
继续在分隔器模块正下方添加一个文本模块并插入您选择的一些内容。
文字设置
转到设计选项卡并相应地更改文本设置：
- 文字字体： Poppins
- 文字字体粗细：轻
- 文本对齐：居中
- 文字颜色：#4f4f4f
- 文本行高：2.3em
间距
添加一些自定义边距和填充值。
- 上边距：50px
- 顶部填充：10px
- 底部填充：10px
将文本模块 #2 添加到第 1 列
添加内容
在上一个文本模块的正下方，我们需要另一个文本模块。 输入您选择的一些内容。
文字设置
转到设计选项卡并相应地更改文本设置：
- 文字字体： Poppins
- 文字字体粗细：重
- 文本对齐：居中
- 文字颜色：#000000
- 文字大小：47px
- 文本行高：1em
间距
添加一些自定义的顶部和底部边距。
- 上边距：50px
- 下边距：80px
将按钮模块添加到第 1 列
添加副本
我们在第 1 列中需要的下一个也是最后一个模块是按钮模块。 输入您选择的一些副本。
结盟
转到设计选项卡并将按钮对齐更改为居中。
- 按钮对齐：居中
按钮设置
样式按钮。
- 为按钮使用自定义样式：是
- 按钮文字大小：17px
- 按钮文字颜色：#000000
- 按钮背景颜色：#FFFFFF
- 按钮边框宽度：0px
- 按钮边框半径：100px
- 按钮字体： Poppins
- 按钮字体粗细：粗体
间距
我们还将添加一些自定义边距和填充值。
- 上边距：50px
- 下边距：-40px
- 顶部填充：23px
- 底部填充：23px
- 左填充：70px
- 右填充：70px
盒子阴影
我们将通过给按钮模块一个微妙的框阴影来结束它。
- 框阴影模糊强度：50px
- 阴影颜色：rgba(0,0,0,0.3)
克隆所有模块两次并在剩余列中放置重复项
完成第 1 列中的所有模块后，您可以克隆它们两次并将重复项放置在该行的其余两列中。
更改模糊图标和标题
确保更改每个副本的简介图标和标题。
更改文本模块内容
随着文本模块的内容。
更改按钮 #2
最后但并非最不重要的一点是，打开第 2 列中的按钮并更改按钮设置。 一旦你完成了这一步，你就完成了！
- 按钮文字颜色：#FFFFFF
- 按钮背景颜色：#8300E9
预览
现在我们已经完成了所有步骤，让我们最后看看不同屏幕尺寸的结果。
桌面
移动的
最后的想法
在这篇文章中，我们向您展示了如何使用 Divi 的新列选项将列转换为定价计划。 您可以自定义定价计划，而无需接触任何一行 CSS 代码！ 本教程仅展示新的列选项如何帮助您将不同的模块结合到一个漂亮的设计中。 如果您有任何问题或建议，请随时在下面的评论部分留下它们！
如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品，请确保订阅我们的电子邮件时事通讯和 YouTube 频道，这样您将永远是第一批了解此免费内容并从中受益的人之一。