燕郊建站：使用Hover.css向Divi的Blurb模块添加高级Hover效果

在今天的Divi教程中，我们燕郊建站将向您展示如何使用Hover.css向Divi的Blurb模块添加一些高级悬停效果。当然，开箱即用，Divi已经为您所能想到的任何页面创建了令人惊叹的信息。但是在我们的社区中，我们知道很多设计师总是希望将Divi推向(有时甚至超越)它的极限，以便使客户站点与竞争对手有很大的不同。因此，本教程将提供给所有喜欢利用Divi高级功能的边缘人。

让我们来看看我们今天要创造什么。

预览：最终结果

在这篇文章的末尾(在指导您浏览hover.css之后)，我们将向您展示如何实现以下结果：

当然，就hover.css的可能而言，这只是冰山一角，但它将帮助您开始工作。

灵感

我们的灵感来自XD Web设计它使用hover.css效果在其网站上使用不同的blurb。在以前的文章中，有一些评论请求显示了如何重新创建某些Blurb模块的兴趣。虽然我们不会准确地重新创建它们，但是我们将向您展示添加这些效果的基础知识，这样您就可以轻松地进行实验了。

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

订阅我们的YOUTUBE频道

在你的网站上找到Hover.css

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

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

下载Hover.css

现在，要开始，您需要hover.css文件，您可以通过伊恩·伦恩的网站。或者，您也可以单击这里直接发送到吉顿的档案里。下载完文件后，将其解压缩。

购买许可证

接下来您需要考虑的是hover.css并不是免费的。如果您使用您的网站为商业目的，购买许可证是必须的。你有两种可能的购买方式：

· 开发者许可证(14美元，一个项目好)

· 团队许可证(18美元，用于无限制项目)

根据您的需要，您可以购买您的许可证和使用效果在您的网站(S)。

悬停名单

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

· 二维过渡

· 背景过渡

· 图标

· 边界过渡

· 阴影与发光跃迁

· 喷泡

· 卷曲

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

安装

尽管您可以通过将hover.css直接包含到您的子主题中来安装hover.css，但是您也可以使用它的比特和部分。这就是我们在本教程中要做的。我们将获取具有特定效果的CSS代码，并将其直接添加到DiviBuilder中。我们这样做的原因是，在某些情况下(我们希望只对模块的一个元素产生效果)，您必须稍微修改所提供的代码。

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

燕郊建站使用代码编辑器(如记事本+)打开这个文件，您将看到所有的效果都在一个接一个地排列。CSS文件中使用的名称与网站上的名称相同。你可以去网站看看你喜欢哪个动画。然后，您可以返回到CSS文件，只需查找名称。

创建交互式Blurb模块

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

添加三列行

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

使行满宽

接下来您需要做的是使行完全宽度。为此，请打开行设置并转到“设计”选项卡。在“设计”选项卡中；在“尺寸”子类别中启用“使此行满宽”选项。

应用列填充

接下来需要做的是在行设置的“设计”选项卡中添加一些列填充。向下滚动并将5%添加到第1列的底部填充。

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

在行设置中最不需要做的事情是转到Advanced选项卡。在Advanced选项卡中，向下滚动到列1主元素，并复制和粘贴以下CSS代码行：

完成该操作后，可以关闭行设置。

添加图像模块

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

上传一个图像并离开图像模块，就像现在一样。

添加Blurb模块

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

定制图标

在Design选项卡中，首先遇到的是Image&Icon子类别。在该子类别中，请确保适用下列更改：

· 图标颜色：#FFFFFF

· 圆圈图标：是的

· 圆形颜色：#004370

· 图像/图标布局：顶部

· 使用图标字体大小：是

· 图标字体大小：45 px(桌面)，40 px(平板电脑)，37(电话)

自定义标题文本

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

· 标题字体大小：16(桌面和平板电脑)，14(电话)

· 标题文本颜色：#004370

· 标头线高度：2.2em

添加自定义页边距

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

· 顶部：25%

· 权利：5%

· 左：5%

· 底部：5%

向Blurb标题添加底部页边距

最后但并非最不重要的是，转到Advanced选项卡并将‘3px’添加到Blurb标题的底部边缘：

向模块中添加Hover.css效果

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

将CSS类添加到图像模块

打开图像的设置并转到“高级”选项卡。在“高级”选项卡中，写下要使用的悬停效果CSS类。在这种情况下，我们应用的波纹效应，它有‘HVR-波纹’作为它的CSS类名。同样，您可以在压缩文件夹中的hover.css文件中找到这些类名。

将CSS类添加到Blurb模块

同样，打开Blurb设置并转到Advanced选项卡。在本例中，我们将对整个模块应用收缩悬停效应。所以，在CSS类字段中键入‘HVR-收缩’。

添加CSS代码

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

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

这些代码行与hover.css文件中的CSS代码行几乎完全相同。唯一不同的地方是边框的颜色，它是用来做纹波效应的。它与圆圈图标中使用的颜色相同。

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

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

将CSS ID添加到Blurb模块

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

添加CSS代码

继续复制并粘贴以下代码行，并将以下代码行放在前面的CSS代码所在的位置：

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

但是，如果希望将代码应用于所有的blurb，请使用以下CSS代码行：

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

最后思想

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