如何使用 Hover.css 向 Divi 的 Blurb 模块添加高级悬停效果

已发表: 2017-08-25

在今天的 Divi 教程中，我们将向您展示如何使用 Hover.css 向 Divi 的 Blurb 模块添加一些高级悬停效果。当然，开箱即用，Divi 拥有为您能想到的任何类型的页面创建令人惊叹的简介所需的一切。但是在我们的社区中，我们知道有很多设计师总是希望将 Divi 推向（有时甚至是超越）其极限，以使客户网站与竞争对手截然不同。因此，本教程面向所有喜欢利用 Divi 高级功能的前沿人士。

让我们来看看我们今天将要创建的内容。

预览：最终结果

在这篇文章的结尾（在指导您完成 hover.css 之后），我们将向您展示如何实现以下结果：

悬停.css

当然，这只是使用hover.css 的可能性的冰山一角，但它会帮助您开始。

灵感

我们从 XD Web Design 中获得灵感，该设计在其网站上为不同的宣传语使用了 hover.css 效果。在之前的帖子中，有评论请求显示了对如何重新创建某些 Blurb 模块的兴趣。尽管我们不会完全重新创建它们，但我们将向您展示添加这些效果的基础知识，以便您之后可以轻松进行实验。

悬停.css

如何使用 Hover.css 向 Divi 的 Blurb 模块添加高级悬停效果

订阅我们的 YouTube 频道

在您的网站上获取 Hover.css

在进入任何其他内容之前，我们将首先向您介绍 hover.css。 Hover.css 包含大量效果，您可以在网站上的任何类型的元素上使用。有两种主要方法可以将 hover.css 效果添加到您的网站；通过添加 CSS 文件或选择您想要的效果并在 Divi Builder 中简单地使用该 CSS。

由于我们需要对模块内元素的 CSS 代码行进行一些小的调整，因此我们将向您展示如何手动添加创建最终结果所需的几行 CSS 代码行。但是，如果您希望在您的网站上拥有所有效果，您也可以通过简单地将 CSS 文件添加到您的 WordPress 目录来实现。

下载 Hover.css

现在，要开始使用，您将需要可以通过访问 Ian Lunn 的网站找到的 hover.css 文件。或者，您也可以单击此处直接发送到 Github 上的文件。下载文件后，将其解压缩。

购买许可证

您需要考虑的下一件事是hover.css 不是免费的。如果您将网站用于商业目的，则必须购买许可证。您有两种购买方式：

开发者许可证（14 美元，适用于 1 个项目）
团队许可证（18 美元，适用于无限项目）

根据您的需要，您可以购买许可证并在您的网站上使用效果。

悬停列表

悬停.css

继续，让我们看看使用 hover.css 可以使用的不同悬停效果。你有一堆属于不同类别的。一共分为七类：

2D 过渡
背景转换
图标
边界过渡
阴影和辉光过渡
泡泡
卷发

这些效果中的每一个都包含一系列效果，可以对您的 Blurb 模块或您网站上的任何其他类型的模块进行额外的调整。

安装

虽然您可以通过将 hover.css 直接包含在您的子主题中来安装它，但您也可以使用它的一部分。这就是我们在本教程中要做的。我们将采用特定效果的 CSS 代码并将其直接添加到我们的 Divi Builder。我们这样做的原因是在某些情况下（我们只想将效果应用于模块的元素），您必须稍微修改所提供的代码。

转到解压缩的下载文件夹并找到hover.css 文件。

悬停.css

用记事本++等代码编辑器打开这个文件，你会看到所有的效果都一个接一个地排列起来。 CSS 文件中使用的名称与网站上的名称相同。你可以去网站看看你喜欢哪个动画。之后，您可以返回 CSS 文件并查找名称。

悬停.css hover.css

创建您的交互式模糊模块

既然我们已经向您展示了如何轻松使用 hover.css，现在是时候向您展示如何在使用提供的效果的同时重新创建交互式 Blurb 模块。提醒一下，让我们看看最终结果：

悬停.css

添加三列行

您需要做的第一件事是向新页面或现有页面上的新部分添加一个三列行。我们将向您展示如何添加第一个 Blurb 模块，之后您也可以通过重复相同的步骤将 Blurb 模块添加到其他列。

使行全宽

您需要做的下一件事是使行全宽。为此，请打开您的行设置并转到“设计”选项卡。在“设计”选项卡中；启用“大小调整”子类别中的“使此行全宽”选项。

悬停.css

应用列填充

您需要做的下一件事是在您仍在行设置的“设计”选项卡中时添加一些列填充。向下滚动并向第 1 列的底部填充添加 5%。

将框阴影和边框半径应用于列

您需要在行设置中做的最后一件事是转到“高级”选项卡。在 Advanced 选项卡中，向下滚动到 Column 1 Main Element 并复制并粘贴以下 CSS 代码行：

-webkit-box-shadow: 0 19px 38px rgba(0,0,0,0.15), 0 15px 12px rgba(0,0,0,0.10);
-moz-box-shadow: 0 19px 38px rgba(0,0,0,0.15), 0 15px 12px rgba(0,0,0,0.10);
box-shadow: 0 19px 38px rgba(0,0,0,0.15), 0 15px 12px rgba(0,0,0,0.10);
border-radius: 6px;

悬停.css

完成后，您可以关闭行设置。

添加图像模块

我们接下来要做的是将图像模块添加到第一列。从技术上讲，这不是 Blurb 模块的一部分，但在其最终结果中，它们看起来确实属于一起。这主要是因为我们将柱子作为一种盒子来收集所有模块并使它们相互配合。

上传图像并暂时保留图像模块。

添加模糊模块

接下来我们需要添加到行中的是 Blurb 模块。添加 Blurb 模块后，您需要对其进行一些更改。首先添加标题文本、内容文本并选择图标，然后转到“设计”选项卡。

自定义图标

在“设计”选项卡中，您首先会看到的是“图像和图标”子类别。在该子类别中，确保应用以下更改：

图标颜色：#FFFFFF
圆圈图标：是
圆圈颜色：#004370
图像/图标放置：顶部
使用图标字体大小：是
图标字体大小：45px（桌面）、40px（平板电脑）、37（手机）

悬停.css

自定义标题文本

向下滚动相同的选项卡并对标题文本子类别进行以下更改：

页眉字体大小：16（桌面和平板电脑），14（手机）
标题文本颜色：#004370
标题行高度：2.2em

悬停.css

添加自定义保证金

接下来，您必须将自定义边距添加到 Blurb 模块：

最高：25%
正确：5%
左：5%
底部：5%

悬停.css

将底部边距添加到 Blurb 标题

最后但并非最不重要的是，转到“高级”选项卡并将“3px”添加到 Blurb 标题的底部边距：

悬停.css

向模块添加 Hover.css 效果

这篇文章的最后一部分涉及添加hover.css 效果。我们将首先向图像模块和模糊模块添加悬停效果，在本文的下一部分中，我们将仅向模糊模块的一个元素添加悬停效果。

将 CSS 类添加到图像模块

打开图像的设置并转到高级选项卡。在“高级”选项卡中，记下要使用的悬停效果 CSS 类。在这种情况下，我们应用了涟漪效果，它的 CSS 类名是“hvr-ripple-out”。再次; 您可以在压缩文件夹中的 hover.css 文件中找到这些类名。

悬停.css

将 CSS 类添加到 Blurb 模块

同样，打开 Blurb 设置并转到高级选项卡。在这种情况下，我们将缩小悬停效果应用于整个模块。因此，在 CSS Class 字段中输入“hvr-shrink”。

悬停.css

添加 CSS 代码

继续，通过单击以下按钮将以下 CSS 代码行添加到您的页面设置中：

悬停.css

继续在自定义 CSS 字段中放置以下 CSS 代码行：

.hvr-shrink {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.hvr-shrink:hover, .hvr-shrink:focus, .hvr-shrink:active {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}

@-webkit-keyframes hvr-ripple-out {
100% {
top: -12px;
right: -12px;
bottom: -12px;
left: -12px;
opacity: 0;
}
}
@keyframes hvr-ripple-out {
100% {
top: -12px;
right: -12px;
bottom: -12px;
left: -12px;
opacity: 0;
}
}
.hvr-ripple-out {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
}
.hvr-ripple-out:before {
content: '';
position: absolute;
border: #004370 solid 6px;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
.hvr-ripple-out:hover:before, .hvr-ripple-out:focus:before, .hvr-ripple-out:active:before {
-webkit-animation-name: hvr-ripple-out;
animation-name: hvr-ripple-out;
}

悬停.css

这些几乎与您在 hover.css 文件中找到的 CSS 代码行完全相同。唯一不同的是用于波纹效果的边框颜色。它与圆形图标中使用的颜色相同。

对 Blurb 模块中的单独元素使用 Hover.css 效果

我们添加到此简介中的第三个效果是将鼠标悬停在简介标题上后出现的线条。 Blurb 模块包含不同的元素。因此，我们不能简单地使用列表中的hover.css 类。相反，我们必须为模块分配一个 CSS ID，并使用专门分配给 Blurb 标题的 CSS 类。

将 CSS ID 添加到 Blurb 模块

首先将 CSS ID 添加到 Blurb 模块。在这种情况下，我们使用“中心”。

悬停.css

添加 CSS 代码

继续将以下代码行复制并粘贴到之前放置 CSS 代码的位置：

#center.et_pb_blurb_0.et_pb_blurb h4 {
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
overflow: hidden;
}
#center.et_pb_blurb_0.et_pb_blurb h4:before {
content: "";
position: absolute;
z-index: -1;
left: 50%;
right: 50%;
bottom: 0;
background: #004370;
height: 4px;
-webkit-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
#center.et_pb_blurb h4:hover:before, #center.et_pb_blurb_0.et_pb_blurb h4:focus:before, #center.et_pb_blurb_0.et_pb_blurb h4:active:before {
left: 0;
right: 0;
}

您在代码中使用的类名因模块而异。如果您只想将其应用于一个模块，则必须使用分配给该特定模块的 Blurb 标题的类：

悬停.css

但是，如果您想让代码应用于所有的简介，请使用以下 CSS 代码行：

#center.et_pb_blurb h4 {
 -webkit-transform: perspective(1px) translateZ(0);
 transform: perspective(1px) translateZ(0);
 box-shadow: 0 0 1px transparent;
 position: relative;
 overflow: hidden;
}
#center.et_pb_blurb h4:before {
 content: "";
 position: absolute;
 z-index: -1;
 left: 50%;
 right: 50%;
 bottom: 0;
 background: #004370;
 height: 4px;
 -webkit-transition-property: left, right;
 transition-property: left, right;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-timing-function: ease-out;
 transition-timing-function: ease-out;
}
#center.et_pb_blurb h4:hover:before, #center.et_pb_blurb_0.et_pb_blurb h4:focus:before, #center.et_pb_blurb_0.et_pb_blurb h4:active:before {
 left: 0;
 right: 0;
}

就是这样！您现在可以使用相同的步骤来获得相同的结果。继续克隆模块并在其他行中使用它们。

最后的想法

在这个 Divi 教程中，我们主要向您展示了如何使用 hover.css 提供的许多效果。除此之外，我们还向您展示了如何使用不同的效果在您的网站上创建交互式 Blurb 模块。如果您有任何问题或建议；确保您在下面的评论部分发表评论！

请务必订阅我们的电子邮件通讯和 YouTube 频道，这样您就不会错过重大公告、有用提示或 Divi 免费赠品！

艺术作品/shutterstock.com 的特色图片