使用 Divi 的悬停选项创建动画标题

每周，我们都会为您提供新的免费 Divi 布局包，您可以将其用于下一个项目。 对于其中一个布局包，我们还分享了一个用例，可帮助您将网站提升到一个新的水平。 本周，作为我们正在进行的 Divi 设计计划的一部分，我们将向您展示如何使用 Divi 的悬停选项和驾驶学校布局包创建动画标题。 这是将副本的不同部分置于聚光灯下并触发操作的好方法。

让我们开始吧！

预览

在我们深入学习本教程之前，让我们快速浏览一下结果。

上传司机学校登陆页面

为了创建本教程，我们将使用 Driver School Layout Pack 的登录页面。 因此，继续添加一个新页面，启用 Visual Builder 并从您的预制布局中选择登录页面。

创建动画标题 #1

更改部分渐变背景

让我们开始构建第一个示例！ 我们将这个动画标题添加到我们页面的英雄部分。 但在我们到达那里之前，打开英雄部分的设置并更改渐变背景叠加颜色。

• 颜色 1：RGBA(0,0,0,0.94)
• 颜色 2：RGBA(12,12,12,0.63)

删除英雄部分的最后两行

继续删除该部分中的最后两行。

更改分隔线对齐方式

我们保留仍然存在的那一行。 我们唯一需要改变的是 Divider Module 的模块对齐方式。

• 模块对齐：居中

添加新行

列结构

在上一行的正下方，使用以下列结构添加新行：

间距

删除下一行的默认自定义填充。

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

将文本模块添加到列

添加内容

我们唯一需要的模块是文本模块。 我们使用两种不同的文本类型：标题和段落链接。 继续添加您选择的副本，并通过在每个句子的中间按 shift + enter 确保副本出现在两行中。

默认背景颜色

然后，转到背景设置并将默认背景颜色添加到文本模块。

• 背景颜色：rgba(255,255,255,0)

悬停背景颜色

更改悬停时的背景颜色。

• 背景颜色：#ffa53b

默认文本设置

接下来，在整体文本设置中更改文本方向。

• 文字方向：居中

默认链接文本设置

切换到链接选项卡并对链接副本的外观进行一些更改。

• 链接字体粗细：超粗
• 链接字体样式：斜体、大写、下划线
• 链接下划线颜色：rgba(255,255,255,0.3)
• 链接文字大小：0px
• 链接线高：0em

悬停链接设置

接下来在悬停时进行一些更改。

• 链接文字大小：40px
• 链接线高：1.8em

默认标题文本设置

也对标题文本设置进行一些更改。

• 标题字体粗细：超粗
• 标题字体样式：大写
• 标题文字颜色：#ffffff
• 标题文字大小：70 像素（桌面）、40 像素（平板电脑）、30 像素（手机）
• 标题线高度：1.4em

悬停标题文本设置

在悬停时进行一些小调整。

• 标题文字颜色：rgba(255,255,255,0)
• 标题文字大小：0px

默认间距

继续转到间距设置并添加一些自定义填充值。

• 顶部填充：40px
• 底部填充：0px
• 左填充：20px
• 右填充：20px

悬停间距

自定义填充值在悬停时略有不同。

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

边界

我们也在使用边框。

• 边框宽度：10px
• 边框颜色：#ffa53b

过渡

并通过更改高级选项卡中的过渡持续时间来添加快速过渡。

• 转换持续时间：0ms

创建动画标题 #2

添加新部分

背景颜色

继续下一个例子！ 在英雄部分正下方添加一个新部分并添加背景颜色。

• 背景颜色：#efefef

间距

然后，转到间距设置并使用不同的边距和填充值。

• 下边距：100px
• 右边距：200px（桌面）、100px（平板）、50px（手机）
• 顶部填充：54px
• 底部填充：54px

盒子阴影

为了将此部分与布局包相匹配，我们还添加了一个微妙的框阴影。

• 框阴影水平位置：30px
• 框阴影垂直位置：30px
• 框阴影传播强度：-10px
• 阴影颜色：#ffa53b

添加新行

列结构

我们要添加到此部分的行需要以下列结构：

添加文本模块

添加内容

再次使用标题和段落链接添加您选择的内容。 我们还使用了一个列表来帮助访问者轻松浏览网站的不同部分。

默认链接文本设置

转到链接文本设置并对链接副本的外观进行一些更改。

• 链接字体样式：下划线
• 链接文字颜色：#000000
• 链接文字大小：0px（桌面）、20px（平板电脑）、13px（手机）
• 链接行高：0px（桌面），1.8em（平板和手机）

悬停链接文本设置

对悬停进行一些小的调整。

• 链接文字大小：30px
• 链接线高：2.8em

默认标题文本设置

您选择的标题也需要修改。

• 标题 2 字体粗细：超粗体
• 标题 2 字体样式：大写
• 标题 2 文字大小：30 像素（桌面和平板电脑），20 像素（手机）
• 标题 2 字母间距：1px

悬停标题文本设置

悬停时更改文本大小。

• 标题 2 文字大小：0px

默认间距

继续转到间距设置并添加一些自定义边距和填充值。

• 左边距：0px（桌面、平板和手机）
• 顶部填充：40px
• 左填充：50px

悬停间距

在悬停时更改左边距。

• 左边距：200px

默认边框

接下来，向文本模块添加左边框。

• 左边框宽度：5px
• 左边框颜色：#ffa53b

悬停边框

移除悬停时的所有边框宽度。

• 左边框宽度：0px

过渡

最后但并非最不重要的一点是，通过使用稍长的过渡持续时间来创建平滑过渡。

• 转换持续时间：500ms

预览

现在我们已经完成了所有步骤，让我们最后看看最终结果。

最后的想法

在此用例帖子中，我们向您展示了如何仅使用 Divi 的内置选项在悬停时创建动画标题。 这是将副本的特定部分置于聚光灯下并以创造性方式触发访问者操作的好方法。 如果您有任何问题，请务必在下面的评论部分留言！