如何使用一些简单的悬停效果在 Divi 中创建引人注目的 CTA

微妙的交互和悬停效果对于创建引人注目的 CTA（号召性用语）非常有用。 诀窍是使用使您的 CTA 更具吸引力和直观性的效果，以便用户更有可能采取行动。 由于大多数 CTA 的最终目标是单击链接或按钮，因此优化 CTA 的方式很重要，可以将这些可点击的项目放在首位。

在本教程中，我将向您展示如何使用 Divi 使用多个悬停效果来优化 CTA 的可见性。 我将向您展示如何在悬停时添加部分分隔线背景来展示您的 CTA，以获得更好的对比度和可读性。 我将向您展示如何在悬停时放大 CTA 并将其移动到页面中心，使其成为主要焦点。 这些悬停效果将有助于使任何号召性用语脱颖而出，并有望改善用户体验。

让我们开始吧。

抢先看

这是我们将在本教程中构建的引人注目的 CTA 悬停效果一瞥。

免费下载引人注目的 CTA 悬停效果布局

要亲身体验本教程中的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

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

下载

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

订阅我们的 YouTube 频道

要将布局导入您的页面，只需提取 zip 文件并将 json 文件拖到 Divi Builder 中。

让我们进入教程好吗？

你需要什么开始

要开始，您将需要以下内容：

1. 已安装并激活 Divi 主题
2. 在前端从头开始构建的新页面（可视化构建器）
3. 要在设计构建中使用的背景图像。 我将在本教程中使用 Veterinarian Layout Pack 中的一个。

之后，您将有一个空白画布开始在 Divi 中进行设计。

在 Divi 中实现引人注目的 CTA 悬停效果

对于此设计示例，我们将从左对齐或右对齐的号召性用语模块开始。 然后我们将模块带到页面的中心并在悬停在行上时缩放（或放大）它。 为了使号召性用语在行悬停状态下更加突出，我们将通过添加将在模块后面关闭以获得更好对比度的部分分隔符来进行分阶段。

这是如何做到的。

创建部分和行

首先，创建一个具有一列行的常规部分。

在添加模块之前，打开部分设置并更新以下内容：

在右侧添加具有图像焦点的背景图像，以便在左侧添加我们的模块时它仍然可见。

• 最大宽度：1080px
• 截面对齐：居中

现在处理这个部分。 稍后我们将返回到部分设置以添加部分分隔符悬停效果。

接下来，打开行设置并更新以下内容：

• 宽度：100%
• 最大宽度：100%
• 填充：顶部 5%，底部 5%，右侧 35%

正确的填充是此设计的关键，因为它将内容推向左侧。 我们稍后会回来添加我们的悬停选项，以便稍后将行的内容移回中心。

添加号召性用语模块

现在我们已准备好构建号召性用语模块，这将是我们引人注目的 CTA 的主要焦点。

继续将号召性用语模块添加到一列行。

然后更新号召性用语模块设置，如下所示：

内容

• 标题：首次访问折扣
• 按钮：预约
• 按钮链接网址：#

设计

• 背景颜色：#ffffff
• 文字颜色：深色
• 标题字体：Nunito
• 标题字体粗细：粗体
• 标题文字大小：36px

• 按钮文字颜色：#ffffff
• 按钮背景颜色：#154c87
• 按钮边框宽度：0px
• 最大宽度：500px
• 模块对齐：居中
• 圆角：10px

这种设计的一个关键特点是最大宽度为 500 像素。 这将确保当我们稍后在悬停时调整行的正确填充时，模块的宽度不会改变。

• 盒子阴影：见截图
• 框阴影垂直位置：30px
• 框阴影模糊强度：100px
• 框阴影传播强度：-30px

将鼠标悬停在该行上时缩放和居中号召性用语

现在我们准备开始添加引人注目的 CTA 悬停效果。 在这一点上，当鼠标悬停在行上时，我们想要完成两件事。 首先，我们要将 CTA 移到中心。 然后我们想要增加模块的比例（使其更大）以使其更加可见。

为此，请打开行设置并更新以下内容：

• 填充（悬停）：0% 正确

然后调整移动显示的填充：

• 填充（平板电脑）：0% 正确
• 填充（电话）：左 5%，右 5%

要放大 CTA，请将以下转换属性添加到悬停时的行：

• 变换比例（悬停）：110%

即使将变换比例属性应用于行，这也间接应用于行内的所有子元素，包括模块。 因此，当悬停在行上时，模块将缩放到 110%。

使用分区分隔符在悬停时上演 CTA

最后，当鼠标悬停在部分/行上时，我们准备添加部分分隔线来暂存 cta。 这里的关键是确保部分和行具有相同的高度和宽度，以便用户将同时悬停在部分和行上而没有任何间隙。 所以，我们需要去掉任何部分的填充。 然后我们需要创建一个顶部和底部部分分隔线，当悬停在该部分上时，它的高度会增加。

这是该怎么做。

打开部分设置并更新以下内容：

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

• 顶部分隔线样式（桌面）：见截图
• 顶部分隔线样式（平板电脑和手机）：无
• 顶部分隔线颜色：rgba(21,76,135,0.61)
• 顶部分隔线高度（默认）：0%
• 顶部分隔线高度（悬停）：120%
• 顶部分隔线翻转：水平

• 底部分隔线样式（桌面）：见截图
• 底部分隔线样式（平板电脑和手机）：无
• 底部分隔线颜色：rgba(21,76,135,0.61)
• 底部分隔线高度（默认）：0%
• 底部分隔线高度（悬停）：120%
• 底部分隔线翻转：水平

为确保分隔线不会显示在部分之外，请将垂直和水平溢出选项更新为隐藏。

• 水平溢出：隐藏
• 垂直溢出：隐藏

现在让我们看看最终的结果。

最后结果

这是平板电脑和手机上的设计。

改变 CTA 的位置

如果您想在悬停状态之前更改号召性用语模块的初始位置，您可以轻松更新行间距。

从右侧

假设您希望模块在悬停之前从右侧开始。 只需按如下方式更新行设置：

• 填充：左 35%
• 填充（悬停）：0% 左

您将需要更新图像以具有左焦点。 之后，这是结果。

从底部

或者，如果需要，您可以从行的底部弹出 CTA。 为此，您需要为该部分添加一个固定高度，然后用一些顶部填充将模块放下。

打开部分设置并为该部分设置最大高度并将溢出设置为隐藏。

• 最大高度（桌面）：415px
• 水平溢出：隐藏
• 垂直溢出：隐藏

然后打开行设置并更新填充以将模块部分推出该部分下方的视图。 然后在悬停时取出顶部填充物以将其恢复。

• 填充（桌面）：顶部 25%，底部 5%
• 填充（悬停）：5% 顶部

这是结果……

最后的想法

Divi 使将各种悬停效果添加到您的网页设计中变得轻松有趣。 最好的悬停效果是那些有目的的并且实际上可以改善用户体验的效果。 这篇文章中介绍的几个简单的悬停效果应该有助于创建一些引人注目的 CTA，它们看起来很棒，改善用户体验，并有望带来更多的转化。

有关更多想法，请查看我们关于使用悬停选项在 Divi 中强调 CTA 的 3 种方式的帖子以及我们关于创建滑入 CTA 的帖子。

我期待在评论中收到您的来信。

干杯!