WordPress divi主题

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

by | May 11, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

微妙的交互和悬停效果可用于创建引人注目的 CTA(号召性用语)。 诀窍是使用使您的 CTA 更具吸引力和直观的效果,以便用户更有可能采取行动。 由于大多数 CTA 的最终目标是点击链接或按钮,因此优化 CTA 以将这些可点击的项目置于最前沿是很重要的。

google广告开户

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

让我们开始吧。

抢先看

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

divi 醒目的 cta 悬停效果

divi 醒目的 cta 悬停效果

divi 醒目的 cta 悬停效果

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

要掌握本教程中的设计,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

订阅我们的 Youtube 频道

WordPress divi主题

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

让我们来看看教程好吗?

你需要什么开始

要开始,您将需要以下内容:

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

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

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

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

这是如何做到的。

创建节和行

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

divi 醒目的 cta 悬停效果

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

添加一个背景图像,将图像的焦点放在右侧,以便在左侧添加我们的模块时它仍然可见。

fiverr建站WordPress程序员

divi 醒目的 cta 悬停效果

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

divi 醒目的 cta 悬停效果

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

接下来,打开行设置并更新以下内容:

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

divi 醒目的 cta 悬停效果

独立站选品工具

右边的填充是这个设计的关键,因为它将内容推到左边。 我们稍后会回来添加悬停选项,以便稍后将行的内容移回中心。

添加号召性用语模块

现在我们准备构建行动呼吁模块,这将是我们引人注目的 CTA 的主要焦点。

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

divi 醒目的 cta 悬停效果

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

高质量外链购买

内容

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

divi 醒目的 cta 悬停效果

设计

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

divi 醒目的 cta 悬停效果

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

divi 醒目的 cta 悬停效果

JasperAI 10000字免费额度试用

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

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

divi 醒目的 cta 悬停效果

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

现在我们准备开始添加引人注目的 CTA 悬停效果。 此时,我们希望在将鼠标悬停在行上时完成两件事。 首先,我们要将 CTA 移到中心。 然后我们想要增加模块的规模(使其更大)以使其更加可见。

为此,请打开行设置并更新以下内容:

  • 填充(悬停):0% 正确

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

WordPress备份工具updrafplus
  • 填充(平板电脑):0% 对
  • 填充(电话):左侧 5%,右侧 5%

divi 醒目的 cta 悬停效果

要放大 CTA,请将以下变换属性添加到悬停时的行:

  • 变换比例(悬停):110%

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

divi 醒目的 cta 悬停效果

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

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

这是该怎么做。

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

内边距:0px 顶部,0px 底部

divi 醒目的 cta 悬停效果

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

divi 醒目的 cta 悬停效果

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

divi 醒目的 cta 悬停效果

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

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

divi 醒目的 cta 悬停效果

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

最后结果

divi 醒目的 cta 悬停效果

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

divi 醒目的 cta 悬停效果

divi 醒目的 cta 悬停效果

更改 CTA 的位置

如果您想在悬停状态之前更改 Call to Action Module 的初始位置,您可以轻松更新行间距。

从右侧

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

  • 填充:左侧 35%
  • 填充(悬停):0% 左

divi 醒目的 cta 悬停效果

您将需要更新图像以具有左焦点。 之后,结果如下。

divi 醒目的 cta 悬停效果

从底部

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

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

  • 最大高度(桌面):415px
  • 水平溢出:隐藏
  • 垂直溢出:隐藏

divi 醒目的 cta 悬停效果

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

  • 填充(桌面):顶部 25%,底部 5%
  • 填充(悬停):顶部 5%

divi 醒目的 cta 悬停效果

这是结果……

divi 醒目的 cta 悬停效果

最后的想法

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

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

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

干杯!