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

已发表: 2019-09-04

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

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

一探究竟！

抢先看

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

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

div 在悬停时更改内容

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

div 在悬停时更改内容

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

div 在悬停时更改内容

免费下载布局

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

下载文件

免费下载

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

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

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

让我们进入教程好吗？

你需要什么开始

首先，您需要执行以下操作：

如果您还没有，请安装并激活已安装的 Divi 主题（如果不使用 Divi 主题，请安装并激活 Divi Builder 插件）。
在WordPress中新建一个页面，在前端使用Divi Builder编辑页面（visual builder）。
将 Cake Maker 登陆页面预制布局加载到页面上。我们将在我们的设计中使用这种布局。在部署 Divi Builder 时，您可以通过选择“选择预制布局”来加载布局。或者，您可以从 Divi Builder 的设置菜单中选择“从库加载”加号图标。有关如何将预制布局加载到您的页面的更多信息，请观看我们的视频。

div 在悬停时更改内容

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

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

将 Cake Maker 登陆页面预制布局加载到页面后，在页面顶部找到主按钮 CTA 并打开按钮模块设计设置。

div 在悬停时更改内容

更改悬停按钮文本

在内容选项卡下，按如下方式更新按钮文本：

按钮文字：“立即购买”

div 在悬停时更改内容

然后部署按钮文本的悬停选项，在悬停选项卡下输入替换按钮文本，如下所示：

按钮文本（悬停）：“我们走吧”

div 在悬停时更改内容

当鼠标悬停在按钮上时，悬停按钮文本下方的文本将替换默认按钮文本。

div 在悬停时更改内容

按钮宽度

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

width: 200px;

div 在悬停时更改内容

这是结果。

div 在悬停时更改内容

其他更改和悬停效果

除了更改悬停时的内容外，我们还可以使用不同的悬停效果组合来为按钮增添趣味。

现在按钮图标是一个在悬停时部署的向右箭头。这与悬停按钮文本“Let's Go”配合得非常好。

在悬停时翻转按钮图标

但是您也可以为按钮图标添加漂亮的翻转悬停效果。为此，首先通过更新以下内容使图标始终显示（不仅仅是悬停）：

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

div 在悬停时更改内容

然后在按钮模块中添加一个 CSS Class，如下所示：

CSS 类：flip-button-icon

div 在悬停时更改内容

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

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

div 在悬停时更改内容

这是结果。

div 在悬停时更改内容

更改悬停按钮图标

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

在我们添加 css 之前，首先让我们选择一个不同的按钮图标来初始显示，然后我们可以用 CSS 将其更改为向右箭头。

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

div 在悬停时更改内容

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

新代码段将如下所示：

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

由于我们还将图标旋转 180 度，因此当鼠标悬停在按钮上时，这将显示一个向右箭头作为购物车图标的替代。

最后结果

这是最终的结果。

div 在悬停时更改内容

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

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

div 在悬停时更改内容

更新列设置

在行设置下，打开第 1 列的设置并在悬停时向该列添加背景图像。

div 在悬停时更改内容

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

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

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

div 在悬停时更改内容

这将提供一个很好的覆盖，使悬停时的替换文本更具可读性。

之后，通过将列恢复为默认设置来删除列的自定义填充。

div 在悬停时更改内容

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

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

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

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

接下来，更新背景如下：

背景颜色：#ffffff；
背景颜色（悬停）：rgba(255,255,255,0)；

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

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

高度：260px

div 在悬停时更改内容

填充：顶部 30 像素，左侧 30 像素，右侧 30 像素
填充（悬停）：90px 顶部

div 在悬停时更改内容

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

接下来，将文本颜色更新为白色，如下所示：

链接文字颜色：#ffffff
标题 3 文本颜色（悬停）：#ffffff

div 在悬停时更改内容

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

转换持续时间：500ms

div 在悬停时更改内容

最后结果

现在看看最终的结果。

div 在悬停时更改内容

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

对于下一个设计，我们将使用一个号召性用语模块，该模块在悬停时更改多个内容元素。为此，请沿着页面向下进入“流行收藏”部分。

div 在悬停时更改内容

添加新的号召性用语模块

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

div 在悬停时更改内容

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

接下来，更新号召性用语内容如下：

标题：“特价”
标题（悬停）：“10% 折扣”
按钮文字：“立即购买”
按钮文本（悬停）：“获得交易”
正文：“定制纸杯蛋糕”
按钮链接网址：#

div 在悬停时更改内容

暂时保存设置。

复制和粘贴布局按钮样式

我们将在为我们的 CTA 设计按钮方面取得进展。为此，请打开预制布局附带的 CTA 模块上方的按钮模块的按钮设置。然后单击按钮选项组上的三点图标并选择“复制按钮样式”。

div 在悬停时更改内容

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

div 在悬停时更改内容

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

按钮填充：顶部 15 像素，底部 15 像素，左侧 40 像素，右侧 40 像素
div 在悬停时更改内容

更新文本样式

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

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

div 在悬停时更改内容

最终设置

接下来，更新填充。

填充：左0px，右0px

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

CSS 类：fade-cta-title

通过将以下自定义 CSS 添加到促销按钮 CSS 输入框，使 cta 按钮全宽。

并更新过渡持续时间。

转换持续时间：800ms

div 在悬停时更改内容

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

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

div 在悬停时更改内容

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

到目前为止的结果

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

div 在悬停时更改内容

用动画软化内容变化

如果我们想在 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;}
}

div 在悬停时更改内容

最后结果

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

div 在悬停时更改内容

这是在手机上。

div 在悬停时更改内容

最后的想法

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

想要更多？我们有很多很棒的帖子，可以帮助您将 CTA 提升到一个新的水平。

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

干杯!

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

抢先看

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

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

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

免费下载布局

免费下载

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

你需要什么开始

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

更改悬停按钮文本

按钮宽度

其他更改和悬停效果

在悬停时翻转按钮图标

更改悬停按钮图标

最后结果

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

更新列设置

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

最后结果

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

添加新的号召性用语模块

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

复制和粘贴布局按钮样式

更新文本样式

最终设置

到目前为止的结果

用动画软化内容变化

最后结果

最后的想法

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