WordPress divi主题

如何更改悬停内容以在 Divi 中创建独特的 CTA(3 种方式)

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

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

Divi 的内置悬停选项可以轻松更改悬停时任何模块的内容。 我们可以在悬停时更改背景图像、颜色甚至文本。 这为以创造性的方式吸引用户的注意力并促进那些号召性用语以实现更好的转化打开了大门。

google广告开户

今天,我们将向您展示如何在 Divi 中更改悬停内容以获得一些独特的号召性用语。 我们将展示在悬停时更改按钮文本(和图标)的巧妙方法。 我们将展示如何在悬停时优雅地更改号召性用语模块中的标题和按钮文本。 而且,我们甚至会添加一些自定义 CSS 来添加一些独特的过渡效果(例如切换和翻转按钮图标)。

看看这个!

抢先看

以下是我们今天将要创建的三种设计的快速浏览。

#1 如何更改悬停按钮的内容

悬停时divi更改内容

#2 如何更改文本模块的背景和正文内容

悬停时divi更改内容

#3 如何使用号召性用语模块更改多个元素的悬停内容

悬停时divi更改内容

免费下载布局

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

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

让我们来看看教程好吗?

WordPress divi主题

你需要什么开始

要开始,您需要执行以下操作:

  1. 如果您还没有,请安装并激活已安装的 Divi 主题(如果不使用 Divi 主题,则安装并激活 Divi Builder 插件)。
  2. 在 WordPress 中创建一个新页面,并使用 Divi Builder 在前端(可视化构建器)编辑页面。
  3. 将 Cake Maker Landing Page 预制布局加载到页面。 我们将在我们的设计中使用这种布局。 当提示部署 Divi Builder 时,您可以通过选择“选择预制布局”来加载布局。 或者您可以从 Divi Builder 的设置菜单中选择“从库中加载”加号图标。 有关如何将预制布局加载到页面的更多信息,请观看我们的视频。

悬停时divi更改内容

之后,您就可以开始在 Divi 中进行设计了。

#1 如何更改悬停按钮的内容

将 Cake Maker Landing Page 预制布局加载到页面后,在页面顶部的标题中找到主按钮 CTA,然后打开按钮模块设计设置。

悬停时divi更改内容

在悬停时更改按钮文本

在内容选项卡下,更新按钮文本如下:

按钮文字:“立即购买”

悬停时divi更改内容

然后为按钮文本部署悬停选项,并在悬停选项卡下输入替换按钮文本,如下所示:

fiverr建站WordPress程序员

按钮文本(悬停):“Let’s Go”

悬停时divi更改内容

悬停按钮文本下的文本将在悬停在按钮上时替换默认按钮文本。

悬停时divi更改内容

按钮宽度

但是按钮是 inline-block 因此按钮/链接的宽度将根据按钮包含的内容量(字母或空格)而变化。 这不适用于这种悬停效果,因为使用较小的替换文本,按钮的宽度会变小,并且在悬停在按钮边缘时会产生跳跃或故障。 为了解决这个问题,我们需要给按钮设置一个宽度。 这很容易通过一个 CSS 片段实现。 将以下 CSS 添加到按钮模块的主元素。

独立站选品工具
width: 200px;

悬停时divi更改内容

这是结果。

悬停时divi更改内容

其他更改和悬停效果

除了更改悬停时的内容外,我们还可以为按钮添加不同的悬停效果组合。

现在按钮图标是在悬停时部署的右箭头。 这非常适合悬停按钮文本“Let’s Go”。

高质量外链购买

在悬停时翻转按钮图标

但是您也可以为按钮图标添加一个不错的翻转悬停效果。 为此,首先通过更新以下内容使图标始终出现(不仅仅是悬停):

仅在悬停按钮上显示图标:否

悬停时divi更改内容

然后在按钮模块中添加一个 CSS 类,如下所示:

CSS 类:翻转按钮图标

JasperAI 10000字免费额度试用

悬停时divi更改内容

然后打开页面设置并添加以下自定义 CSS。

.flip-button-icon:after {
  transition: transform 500ms;
}
.flip-button-icon:hover:after {
  transform: rotateX(360deg);
}

悬停时divi更改内容

这是结果。

悬停时divi更改内容

WordPress备份工具updrafplus

更改悬停时的按钮图标

您还可以完全更改悬停时的按钮图标。 您真正需要的只是一小段 CSS 来替换图标所在的 :after 伪元素的内容。

在我们添加css之前,首先让我们选择一个不同的按钮图标来显示,然后我们可以用CSS把它改成右箭头。

使用购物车图标更新按钮图标,因为我们的 CTA 是“立即显示”。

悬停时divi更改内容

然后转到高级选项卡并使用 180 度旋转而不是 360 度更新当前 CSS 变换属性。 并为显示左箭头(“\23”)的内容添加新的 unicode。

新代码段将如下所示:


.flip-button-icon:hover:after {
  transform: rotateY(180deg);
  content: "\23"; 
}

由于我们也会将图标旋转 180 度,当鼠标悬停在按钮上时,这将显示一个右箭头来代替购物车图标。

最后结果

这是最终的结果。

悬停时divi更改内容

#2 如何更改文本模块的背景和正文内容

对于下一个设计,将页面布局向下移动到“我的服务”部分。 使用两个文本模块打开顶行的行设置。

悬停时divi更改内容

更新列设置

在行设置下,打开第 1 列的设置并将悬停时的背景图像添加到列。

悬停时divi更改内容

这将替换默认情况下存在的白色背景。

此外,还可以在悬停时在背景图像上方添加渐变。

背景渐变左颜色:rgba(255,255,255,0)
背景渐变右颜色:rgba(46,41,142,0.75)
起始位置:30%
在背景图像上方放置渐变:是

悬停时divi更改内容

这将提供一个很好的叠加层,使悬停时的替换文本更具可读性。

之后,通过将列恢复为默认设置来取出列的自定义填充。

悬停时divi更改内容

自定义第 1 列中的文本模块

更新列后,保存设置并打开第 1 列中文本模块的文本模块设置。然后使用以下内容更新悬停时的文本模块正文内容:

<h3>Custom Cakes</h3>
<a href="#">Order Now</a>

这是添加带有悬停链接的号召性用语的好方法。

接下来,更新背景如下:

背景颜色:#ffffff;
背景颜色(悬停):rgba(255,255,255,0);

这添加了一个很好的过渡元素,以逐渐显示列中的背景图像。

接下来更新以下设计设置:

高度:260 像素

悬停时divi更改内容

内边距:顶部 30 像素,左侧 30 像素,右侧 30 像素
填充(悬停):90px 顶部

悬停时divi更改内容

这将创建一个很好的过渡效果,当将鼠标悬停在文本模块上时会逐渐降低文本。

接下来,将文本颜色更新为白色,如下所示:

链接文本颜色:#ffffff
标题 3 文本颜色(悬停):#ffffff

悬停时divi更改内容

要减慢悬停效果的过渡,请按如下方式更新过渡持续时间:

转换持续时间:500ms

悬停时divi更改内容

最后结果

现在查看最终结果。

悬停时divi更改内容

#3 如何使用号召性用语模块更改多个元素的悬停内容

对于下一个设计,我们将使用一个调用操作模块,该模块在悬停时更改多个内容元素。 为此,请沿着页面向下进入“热门收藏”部分。

悬停时divi更改内容

添加新的号召性用语模块

然后在专业部分顶行的“立即购买”按钮下添加一个新的号召性用语模块。

悬停时divi更改内容

在悬停时使用更改内容更新 CTA

接下来,更新号召性用语内容,如下所示:

作品名称:《特别优惠》
标题(悬停):“10% 折扣”
按钮文字:“立即购买”
按钮文本(悬停):“Get Deal”
身体:“定制纸杯蛋糕”
按钮链接地址:#

悬停时divi更改内容

悬停时divi更改内容

暂时保存设置。

复制和粘贴布局按钮样式

我们将开始为 CTA 设计按钮。 为此,请打开预制布局随附的 CTA 模块上方按钮模块的按钮设置。 然后单击按钮选项组上的三点图标并选择“复制按钮样式”。

悬停时divi更改内容

然后打开我们正在设计的号召性用语模块上的其他选项菜单,然后选择“粘贴按钮样式”。

悬停时divi更改内容

然后打开号召性用语模块设置并更新按钮填充:

按钮填充:顶部 15 像素,底部 15 像素,左侧 40 像素,右侧 40 像素
悬停时divi更改内容

更新文本样式

之后,更新标题和正文设计。

标题标题级别:H4
标题字体:Pacifico
标题文字大小:9vw
标题行高:1.3em
正文字体:Open Sans
正文字体粗细:粗体
正文大小:18px
正文字母间距:1px

悬停时divi更改内容

最终设置

接下来,更新填充。

内边距:左 0 像素,右 0 像素

然后给模块一个自定义的 CSS 类。

CSS 类:fade-cta-title

通过将以下自定义 CSS 添加到 Promo Button CSS 输入框中,使 cta 按钮全宽。

并更新过渡持续时间。

转换持续时间:800ms

悬停时divi更改内容

最后,更新背景颜色,使其默认透明并在悬停时更改颜色。

背景颜色:无(删除)
背景颜色(悬停):rgba(247,78,72,0.86)

悬停时divi更改内容

接下来,删除 Call to Action 模块上方行中的两个模块,以便它替换布局中的原始 cta。

到目前为止的结果

这是迄今为止的结果。 请注意将鼠标悬停在号召性用语模块上时标题文本和按钮文本如何变化。

悬停时divi更改内容

用动画软化内容变化

如果我们想在 CTA 中软化大标题的过渡,我们可以用 CSS 添加一个简单的动画。 由于我们已经在模块中添加了 CSS 类,我们需要做的就是打开页面设置模式并添加以下自定义 CSS:


.fade-cta-title:hover .et_pb_module_header {
  animation-name: fadeinout;
  animation-duration: 800ms;
}

@keyframes fadeinout {
  from {opacity: 0;}
  to {opacity: 1;}
}


悬停时divi更改内容

最后结果

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

悬停时divi更改内容

它在移动设备上。

悬停时divi更改内容

最后的想法

在本教程中,我们展示了 3 个示例,说明如何在 Divi 中有效更改悬停内容。 内容的内置悬停选项确实使这个过程变得简单。 通过一些 CSS 片段,您可以添加一些独特的过渡来使设计与众不同。 希望这将使您能够在自己的网站上提高号召性用语,以提高转化率和参与度。

想要更多? 我们有很多很棒的帖子可以帮助您的 CTA 更上一层楼。

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

干杯!

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