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

2019.05.23 燕郊建站

176

在今天的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代码行:

01

02

03

04

-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;

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

添加图像模块

接下来我们要做的是向第一列中添加一个图像模块。从技术上讲,这并不是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代码行:

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

.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;

}

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

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

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

将CSS ID添加到Blurb模块

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

添加CSS代码

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

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

#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标题的类:

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

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

#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模块。如果您有任何问题或建议,请确保在下面的评论部分留下评论!

 


最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP