最近，Divi 中添加了一些额外的悬停选项——允许您创建更酷的效果，而无需接触任何一行代码。 例如，您现在可以创建令人惊叹的渐变背景悬停过渡。 通过组合列、行和截面渐变，您可以实现独特的设计。 在本教程中，我们将向您展示如何做到这一点。 我们将通过一些一般步骤开始。 完成后，我们将分别关注三个设计示例。 您还可以免费下载 JSON 文件！
让我们开始吧。
预览
在深入学习本教程之前，让我们快速浏览一下我们将在本教程中重新创建的三个不同示例。
示例 #1
示例 #2
示例#3
免费下载英雄章节
订阅我们的 Youtube 频道
要掌握这些免费的英雄部分，您首先需要使用下面的按钮下载它们。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者，您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
一般步骤
添加新部分
间距
让我们从一些一般步骤开始。 向您正在处理的页面添加一个新部分并删除所有默认填充。 稍后，移除所有顶部和底部填充将帮助我们组合列、行和部分渐变背景。
- 顶部填充：0px
- 底部填充：0px
添加新行
立柱结构
继续使用以下列结构添加新行：
浆纱
在不添加任何模块的情况下，打开行设置并允许行占据部分容器的整个宽度。
- 宽度：100%
- 最大宽度：100%
间距
继续进行间距设置并删除所有默认的顶部和底部填充。
- 顶部填充：0px
- 底部填充：0px
将文本模块 #1 添加到列
添加H1内容
让我们开始添加模块！ 我们需要的第一个是带有一些 H1 内容的文本模块。
H1 文字设置
转到设计选项卡并相应地更改 H1 文本设置：
- 标题字体：蒙特塞拉特
- 标题文本对齐：居中
- 标题文字颜色：#000000
- 标题文字大小：3vw（桌面）、6vw（平板电脑和手机）
- 标题字母间距：0.7vw
浆纱
接下来打开尺寸设置并更改宽度以及模块对齐方式。
- 宽度：48%（桌面）、60%（平板电脑和手机）
- 模块对齐：中心
间距
通过添加一些上边距来完成模块的设计。
将分隔模块添加到列
能见度
进入下一个模块！ 添加一个分频器模块并确保启用了“显示分频器”选项。
线
接下来更改线条颜色。
浆纱
继续调整大小设置并应用以下设置：
- 分压器重量：0.1vw
- 宽度：10%（台式机）、16%（平板电脑）、25%（手机）
- 模块对齐：中心
间距
在不同的屏幕尺寸上添加一些自定义填充值。
- 顶部填充：2vw（桌面）、4vw（平板电脑）、6vw（手机）
- 底部填充：2vw（桌面）、4vw（平板电脑）、6vw（手机）
将文本模块 #2 添加到列
添加内容
进入下一个模块，这是另一个文本模块。 添加您选择的一些段落内容。
文字设置
转到设计选项卡并相应地更改文本设置：
- 文字字体：Open Sans
- 文本对齐：对齐
- 文字行高：2.3em
浆纱
接下来在尺寸设置中修改宽度和模块对齐方式：
- 宽度：30%（台式机）、54%（平板电脑）、70%（手机）
- 模块对齐：中心
将按钮模块添加到列
添加副本
我们在列中需要的下一个也是最后一个模块是按钮模块。 添加一些您选择的副本。
结盟
转到设计选项卡并更改按钮对齐方式。
按钮设置
修改按钮设置。
- 为按钮使用自定义样式：是
- 按钮文字大小：0.8vw（桌面）、2vw（平板电脑）、2.8vw（手机）
- 按钮文字颜色：#000000
- 按钮边框宽度：1px
- 按钮边框半径：1px
- 按钮字体：蒙特塞拉特
间距
并在不同的屏幕尺寸上添加一些自定义间距值。
- 最高利润：2vw（桌面），8vw（平板电脑和手机）
- 底边距：10vw
- 顶部填充：1vw（桌面）、2vw（平板电脑）、3vw（手机）
- 底部填充：1vw（桌面）、2vw（平板电脑）、3vw（手机）
- 左填充：3vw（桌面）、6vw（平板电脑）、8vw（手机）
- 右填充：3vw（桌面）、6vw（平板电脑）、8vw（手机）
克隆部分两次
完成该部分后，您可以克隆它两次； 每个示例一个。
重新创建渐变背景悬停过渡 #1
部分
默认渐变背景
让我们开始创建第一个悬停过渡！ 打开部分设置并添加以下默认渐变背景：
- 颜色 1：#d1d1ff
- 颜色 2：#f7f7f7
- 渐变方向：90度
- 起始位置：50%
- 结束位置：50%
悬停渐变背景
修改悬停时的渐变背景。
- 颜色 1：#f7f7f7
- 颜色 2：#ffc1c7
- 渐变方向：90度
- 起始位置：50%
- 结束位置：50%
排
默认渐变背景
接下来打开行设置并应用以下默认渐变背景设置：
- 颜色1：#7032ff
- 颜色 2：rgba(255,255,255,0)
- 渐变方向：90度
- 起始位置：10%
- 结束位置：10%
悬停渐变背景
修改悬停时的渐变背景。
- 颜色1：rgba(255,255,255,0)
- 颜色 2：#ff324a
- 渐变方向：90度
- 起始位置：90%
- 结束位置：90%
重新创建渐变背景悬停过渡 #2
部分
默认渐变背景
继续第二个例子！ 打开部分设置并添加以下渐变背景：
- 颜色 1：#f7f7f7
- 颜色 2：#eceaff
- 渐变方向：156度
- 起始位置：50%
- 结束位置：50%
悬停渐变背景
在悬停时添加不同的渐变背景：
- 颜色 1：#ffeaec
- 颜色 2：#f7f7f7
- 渐变方向：204度
- 起始位置：50%
- 结束位置：50%
排
默认渐变背景
接下来打开行设置并应用以下渐变背景设置：
- 颜色 1：#a932ff
- 颜色 2：rgba(255,255,255,0)
- 渐变类型：径向
- 径向：左下
- 起始位置：14%
- 结束位置：14%
悬停渐变背景
相应地更改悬停时的行渐变背景：
- 颜色1：#ff324a
- 颜色 2：rgba(255,255,255,0)
- 渐变类型：径向
- 径向：左上
- 起始位置：14%
- 结束位置：14%
柱子
默认渐变背景
转到列设置并添加以下渐变背景：
- 颜色 1：#a932ff
- 颜色 2：rgba(255,255,255,0)
- 渐变类型：径向
- 径向：右上
- 起始位置：14%
- 结束位置：14%
悬停渐变背景
修改悬停时的列渐变背景：
- 颜色1：#ff324a
- 颜色 2：rgba(255,255,255,0)
- 渐变类型：径向
- 径向：右下
- 起始位置：14%
- 结束位置：14%
重新创建渐变背景悬停过渡 #3
部分
默认渐变背景
继续下一个也是最后一个示例！ 打开部分设置并应用以下渐变背景：
- 颜色1：#ffc1c7
- 颜色2：#ffffff
- 渐变类型：径向
- 径向：顶部
- 起始位置：45%
- 结束位置：45%
悬停渐变背景
修改悬停时的部分渐变背景。
- 颜色1：#ffc1c7
- 颜色2：#ffffff
- 渐变类型：径向
- 径向：左
- 起始位置：20%
- 结束位置：20%
排
默认渐变背景
接下来打开行设置并添加以下渐变背景：
- 颜色 1：#d3dfff
- 颜色 2：rgba(255,255,255,0)
- 渐变类型：径向
- 径向：底部
- 起始位置：45%
- 结束位置：45%
悬停渐变背景
相应地修改渐变背景：
- 颜色 1：#d3dfff
- 颜色 2：rgba(255,255,255,0)
- 渐变类型：径向
- 径向：右
- 起始位置：20%
- 结束位置：20%
柱子
默认渐变背景
最后但同样重要的是，添加一个列渐变背景，你就完成了！
- 颜色 1：#f7f7f7
- 颜色 2：rgba(255,255,255,0)
- 渐变类型：径向
- 径向：中心
- 起始位置：41%
- 结束位置：41%
预览
现在我们已经完成了所有步骤，让我们最后看看我们在本教程中重新创建的所有三个示例的结果！
示例 #1
示例 #2
示例#3
最后的想法
在这篇文章中，我们向您展示了如何创造性地使用 Divi 的附加渐变背景悬停选项，仅使用 Divi 的内置选项创建漂亮的悬停过渡。 我们从一些一般步骤开始，然后重新创建三个示例中的每一个。 如果您有任何问题或建议，请务必在下面的评论部分发表评论！
如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品，请确保订阅我们的电子邮件通讯和 YouTube 频道，这样您将永远是第一批了解并从这些免费内容中受益的人之一。
