如何使用 Divi 更改悬停时的渐变背景

创建网站就是要确保每个细节都是正确的。 注意设计中的小细节将迅速增加并提升您网站的质量。 使用 Divi 的新悬停选项，您可以毫不费力地在您的网站上添加小的交互。 悬停选项适用于几乎所有设计设置。 例如，您可以在悬停时间接更改渐变背景以创建漂亮的过渡。 这正是我们将在这篇博文中向您展示的内容。 除了实现渐变过渡之外，我们还将从头开始创建一个令人惊叹的设计示例，您可以自由地将其用于您构建的任何类型的网站。

让我们开始吧！

预览

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

静止的

徘徊

免费下载插图

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

下载文件

免费下载

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

下载

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

让我们开始创作吧！

订阅我们的 YouTube 频道

添加第 1 节

间距

您需要做的第一件事是创建一个新页面或打开一个现有页面并向其中添加一个新的常规部分。 打开设置并添加一些自定义的顶部和底部边距。

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

添加第 1 行

列结构

继续使用以下列结构添加新行：

第 1 列默认背景颜色

尚未添加任何模块，打开行设置并将以下默认背景颜色添加到第 1 列：

• 背景颜色：#e7ffa0

第 1 列悬停背景颜色

在悬停时更改此背景颜色。

• 背景颜色：#00020c

第 1 列渐变背景

也向第 1 列添加渐变背景色。 您会注意到我们使用了一种完全透明的颜色。 这种颜色将允许背景颜色显示出来，然后在悬停时改变。

• 颜色 1：rgba(255,255,255,0)
• 颜色 2：RGBA(16,0,201,0.8)
• 第 1 列渐变类型：线性
• 第 1 列梯度方向：50 度
• 第 1 列起始位置：20%

第 2 列背景颜色

还要添加第 2 列的背景颜色。

• 第 2 列背景颜色：#ffffff

浆纱

然后，转到设计选项卡并更改大小设置。

• 使用自定义宽度：是
• 单位：PX
• 自定义宽度：2000px
• 使用自定义装订线宽度：是
• 天沟宽度：1

间距

继续在间距设置中添加一些自定义填充值。

• 顶部填充：0px
• 底部填充：0px
• 第 2 列顶部填充：6vw（桌面），120px（平板电脑和手机）
• 第 2 列底部填充：6vw（桌面），120px（平板电脑和手机）
• 第 2 列左填充：5vw（桌面）、80px（平板电脑）、50px（手机）
• 第 2 列右内边距：5vw（桌面）、80px（平板电脑）、50px（手机）

盒子阴影

并给该行一个微妙的框阴影。

• 框阴影模糊强度：100px
• 框阴影传播强度：-10px

过渡

最后但并非最不重要的一点是，我们将通过增加高级选项卡中的过渡持续时间来创建平滑的渐变背景过渡。

• 转换持续时间：1100ms

将图像模块添加到第 1 列

上传图片

是时候开始添加模块了！ 将图像模块添加到第一列并上传“ divi-gradient-background-on-hover-illustration-1.png ”文件，您可以在本文开头下载的压缩文件夹中找到该文件。

渐变背景

转到此图像模块的背景设置并添加渐变背景。 我们再次使用一种完全透明的颜色来允许其他颜色显示出来。

• 颜色 1：RGBA(50,217,255,0.66)
• 颜色 2：rgba(255,255,255,0)
• 渐变类型：径向
• 径向：顶部
• 结束位置：57%

间距

然后，向模块添加一些自定义顶部填充。

• 顶部填充：14vw

将标题文本模块添加到第 2 列

添加内容

进入第二列！ 我们需要的第一个模块是标题文本模块。 继续并添加一些选择的标题内容。

标题文字设置

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

• 标题字体：Abril Fatface
• 标题文字颜色：#000000
• 标题文字大小：4vw（桌面）、60px（平板电脑）、40px（手机）

将描述文本模块添加到第 2 列

添加内容

我们需要的第二个模块是另一个文本模块。 添加一些选择的内容。

文字设置

然后，转到文本设置并更改文本方向。

• 文本方向：对齐

浆纱

调整大小设置中的宽度。

• 宽度：73%（桌面），100%（平板电脑和手机）

间距

最后，向模块添加一些自定义的顶部和底部边距以创建空白。

• 上边距：2.5vw（桌面），50px（平板电脑和手机）
• 下边距：2.5vw（桌面），50px（平板和手机）

将按钮模块添加到第 2 列

添加副本

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

按钮设置

接下来修改按钮设置。

• 为按钮使用自定义样式：是
• 按钮文字大小：1.2vw（桌面），14px（平板电脑和手机）
• 按钮文字颜色：#ffffff
• 渐变色 1：#9ea6ff
• 渐变色 2：rgba(16,0,201,0.8)
• 梯度方向：78度
• 按钮边框宽度：0px
• 按钮边框半径：30px
• 按钮字母间距：-1px
• 字体粗细：超粗
• 字体样式：大写

间距

添加一些自定义填充值。

• 顶部填充：10px
• 底部填充：10px
• 左填充：40px
• 右填充：40px

盒子阴影

并在按钮上应用一个微妙的框阴影。

• 框阴影模糊强度：40px

添加第 2 节

间距

现在我们已经完成了第一部分，我们将进入下一部分。 使用以下自定义填充值添加新的常规部分：

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

添加第 2 行

列结构

继续使用以下列结构向该部分添加新行：

第 1 列背景颜色

尚未添加任何模块，打开行设置并将以下背景颜色添加到第 1 列：

• 第 1 列背景颜色：#ffffff

第 2 列默认背景颜色

将以下背景颜色添加到第 2 列。

• 第 2 列背景颜色：#ffffff

第 2 列悬停背景颜色

并在悬停时更改此背景颜色。

• 第 2 列背景颜色：#3d02ff

第 2 列渐变背景

也向列添加渐变背景。

• 颜色 1：rgba(255,255,255,0)
• 颜色 2：#ff7700
• 第 2 列起始位置：20%

浆纱

然后，转到大小设置并进行一些更改。

• 使用自定义宽度：是
• 单位：PX
• 自定义宽度：2000px
• 使用自定义装订线宽度：是
• 天沟宽度：1

间距

继续在间距设置中添加自定义填充值。

• 顶部填充：0px
• 底部填充：0px
• 第 1 列顶部填充：6vw（桌面），120px（平板电脑和手机）
• 第 1 列底部填充：6vw（桌面），120px（平板电脑和手机）
• 第 1 列左填充：5vw（桌面）、80px（平板电脑）、50px（手机）
• 第 1 列右内边距：5vw（桌面）、80px（平板电脑）、50px（手机）

盒子阴影

并为这一行添加一个微妙的框阴影。

• 框阴影模糊强度：100px
• 框阴影传播强度：-10px

过渡

最后但并非最不重要的一点是，通过增加高级选项卡中的过渡持续时间来创建平滑过渡。

• 转换持续时间：1100ms

第 1 行的重复文本模块和按钮模块

由于我们已经拥有上一节中需要的所有模块，因此我们将通过克隆它们来节省时间。

在第 2 行的第 1 列中放置重复项

并将重复项放在新行的第一列中。

更改内容

确保更改模块的内容。

更改按钮渐变背景

更改按钮渐变背景。

• 颜色 1：#ff653f
• 颜色 2：#0066ff
• 梯度方向：39度

第 2 行的克隆图像模块

克隆您也可以在前一行的第一列中找到的图像模块。

在第 2 行的第 2 列中放置重复项

并将副本放在新行的第二列中。

更改图像

将图像更改为“ divi-gradient-background-on-hover-illustration-2.png ”文件，您可以在本文开头下载的压缩文件夹中找到该文件。

更改渐变背景

最后但并非最不重要的是，更改图像模块的渐变背景。

• 颜色 1：RGBA(0,2,12,0.66)
• 颜色 2：rgba(255,255,255,0)
• 结束位置：57%

预览

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

静止的

徘徊

最后的想法

在这篇文章中，我们向您展示了如何使用 Divi 更改悬停时的渐变背景。 我们还使用这种方法从头开始创建了一个令人惊叹的设计示例。 您可以自由地将设计和插图用于您正在构建的任何类型的网站。 如果您有任何问题或建议，请务必在下方评论区留言！