WordPress divi主题

使用 Divi 的悬停选项创造性地强调 CTA 的 3 种方法

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

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

每周,我们都会为您提供新的免费 Divi 布局包,您可以将其用于您的下一个项目。 对于其中一个布局包,我们还分享了一个用例,可帮助您将您的网站提升到一个新的水平。 本周,作为我们正在进行的 Divi 设计计划的一部分,我们将向您展示如何创造性地使用 Divi 的悬停选项来强调整个页面的 CTA。 我们正在使用 Divi 的洗衣服务布局包,我们将处理三个不同的示例,将您的号召性用语置于聚光灯下。

google广告开户

让我们开始吧!

预览

在深入学习本教程之前,让我们快速浏览一下我们将创建的所有三个示例:

强调行动

使用洗衣服务主页布局添加新页面

首先,首先向您的网站添加一个新页面并上传洗衣服务主页。 我们将创建的所有三个示例都将基于此布局。 一旦你掌握了这种方法,你就可以将这些示例应用到你正在处理的任何布局中。

强调行动

创建示例 #1:使用另一个元素的悬停将注意力重定向到 CTA

强调行动

克隆文本模块

让我们从第一个例子开始吧! 我们正在将现有的文本模块转变为悬停激励。 这种方法只会在桌面上看起来不错,这就是为什么我们要克隆初始模块以允许它出现在较小的屏幕尺寸上而没有悬停效果。

强调行动

能见度

文本模块 #1

继续隐藏平板电脑和手机上的第一个模块。

WordPress divi主题

强调行动

文本模块 #2

并隐藏桌面上的第二个模块。

强调行动

将悬停效果添加到桌面文本模块

添加标题 3 内容

我们只编辑第一个文本模块,它将出现在桌面上。 打开模块并将一些标题 3 内容添加到内容框中。

强调行动

悬停文本设置

然后,转到文本设置并通过在悬停时将 0px 添加到文本大小来“隐藏”模块的段落文本。

强调行动

悬停标题 2 文本设置

对悬停时的标题 2 文本设置执行相同操作。

强调行动

默认标题 3 文本设置

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

fiverr建站WordPress程序员
  • 标题 3 字体:Josefin Sans
  • 标题 3 字体粗细:半粗体
  • 标题 3 文字大小:0px

强调行动

悬停标题 3 文本设置

修改悬停时的文本大小。

  • 标题 3 文字大小:40px

强调行动

默认间距设置

接下来,转到间距设置并确保应用以下自定义填充值:

  • 上边距:80px
  • 底部填充:50px
  • 左填充:40px
  • 右内边距:40px

强调行动

独立站选品工具

悬停间距设置

在悬停时添加一些自定义边距。

  • 上边距:50px
  • 左边距:-53.5vw

强调行动

默认边框设置

我们还添加了一个没有边框的底部边框。

  • 底部边框宽度:0px
  • 底部边框颜色:#ff947f
  • 底部边框样式:虚线

强调行动

悬停边框设置

更改悬停时的边框宽度。

高质量外链购买

强调行动

默认框阴影设置

然后,添加一个盒子阴影。

  • 盒子阴影垂直位置:50px
  • 盒子阴影模糊强度:54px
  • 盒子阴影传播强度:-32px
  • 阴影颜色:rgba(255,255,255,0)

强调行动

悬停框阴影设置

并在悬停时更改框阴影颜色。

  • 阴影颜色:rgba(0,0,0,0.2)

强调行动

JasperAI 10000字免费额度试用

过渡

要创建平滑过渡,请在过渡设置中增加过渡持续时间。

  • 过渡时间:750ms

强调行动

创建示例 #2:在悬停时将文本模块转换为按钮

强调行动

添加新的文本模块

让我们继续下一个示例! 我们在悬停时将文本模块转换为按钮模块。 为此,首先将文本模块添加到页面上的以下位置:

强调行动

WordPress备份工具updrafplus

能见度

按键模块

我们将按钮模块保持在较小屏幕尺寸上的方式,因此请继续并仅在桌面上禁用它。

强调行动

文本模块

对刚刚添加的文本模块执行相同的操作,但将其隐藏在平板电脑和手机上。

强调行动

将悬停效果添加到桌面文本模块

添加内容

现在,打开文本模块并添加一些 H3 副本和链接副本。

强调行动

默认背景颜色

继续向模块添加完全透明的背景颜色。

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

强调行动

悬停背景颜色

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

  • 背景颜色:#ffffff

强调行动

默认文本设置

然后,转到文本设置并更改模块的文本方向。

强调行动

默认链接文本设置

接下来对链接文本的外观进行一些更改。

  • 链接字体:Roboto
  • 链接字体粗细:粗体
  • 链接字体样式:大写
  • 链接文字颜色:#ff947f
  • 链接文字大小:0px
  • 链接字母间距:2px

强调行动

悬停链接文本设置

并在悬停时为链接文本大小添加另一个值。

强调行动

默认标题 3 文本设置

我们还需要更改 H3 文本设置。

  • 标题 3 字体粗细:半粗体
  • 标题 3 字体样式:斜体和下划线
  • 标题 3 下划线颜色:#ffc882
  • 标题 3 下划线样式:虚线
  • 标题 3 文本对齐:居中
  • 标题 3 文本颜色:#ffffff
  • 标题 3 文字大小:37px

强调行动

悬停标题 3 文本设置

我们正在更改悬停时的 H3 文本大小,以便在您悬停模块后将其隐藏。

强调行动

默认尺寸

接下来,在尺寸设置中更改宽度。 确保默认情况下,宽度保持为“100%”。

强调行动

悬停大小

要创建按钮效果,我们将减小悬停时的宽度。

  • 宽度:23%
  • 模块对齐:中心

强调行动

间距

我们还需要一些额外的填充来创建一个干净的按钮。

  • 上边距:5px
  • 底部填充:15px

强调行动

悬停边框

我们将在悬停时为每个角添加“30px”的圆角。

强调行动

过渡

最后,我们将通过使用以下过渡持续时间来确保平滑过渡:

  • 过渡时间:700ms

强调行动

创建示例 #3:在悬停时扩大电子邮件选项

强调行动

克隆电子邮件选项模块

继续下一个也是最后一个示例! 当有人将电子邮件选项模块悬停在桌面上时,该模块的大小会增加,并使访问者更容易加入您的时事通讯。 同样,我们只是让这个悬停效果出现在桌面上。 这就是我们从克隆模块开始的原因。

强调行动

能见度

电子邮件选项模块 #1

打开第一个电子邮件优化模块的可见性设置并将其隐藏在桌面上。

强调行动

电子邮件选项模块 #2

对第二个模块执行相同操作,但将其隐藏在较小的屏幕尺寸上。 这是我们将使用的模块。

强调行动

将悬停效果添加到桌面电子邮件选项模块

添加内容

在第二个电子邮件选择模块的内容框中添加一些额外的内容。

强调行动

悬停标题文本设置

增加悬停时标题文本的文本大小。

强调行动

默认正文文本设置

接下来,更改正文文本大小。

强调行动

悬停正文文本设置

并在悬停时添加不同的文本大小。

强调行动

悬停间距设置

最后但同样重要的是,我们将通过在悬停时添加不同的自定义边距和填充值来增加电子邮件选择模块的大小。

  • 最高边距:-25vw
  • 左边距:-50vw
  • 顶部填充:17vw
  • 底部填充:17vw
  • 左填充:12%
  • 右填充:12%

强调行动

预览

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

强调行动

最后的想法

在这个用例帖子中,我们向您展示了如何使用 Divi 的悬停选项和洗衣服务布局包创造性地将 CTA 置于聚光灯下。 我们处理了三个不同的示例,希望能激发您的想象力并帮助您将您的网站提升到一个新的水平。 如果您有任何问题或建议,请务必在下面的评论部分发表评论!

Snipergraphics / shutterstock.com 的特色图片

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题