• 主页
  • 文章
  • 主题
  • 如何通过使用 Divi 模糊其他模块来突出显示悬停的模糊模块

如何通过使用 Divi 模糊其他模块来突出显示悬停的模糊模块

已发表: 2020-02-01

无论您正在构建哪种类型的网站，在某些时候，您都可能希望显示不同服务、步骤等的列表。 以有吸引力的方式创建此类列表的最简单方法之一是使用 Divi 的 Blurb 模块。 Blurb 模块允许您精美地构建列表内容，同时为您提供无限的设计可能性。

在今天的教程中，我们将更进一步，向您展示如何通过模糊您显示的其他模块来突出显示悬停的 Blurb 模块。 这是一次将注意力集中在一个模糊模块上的好方法，而不会让其他模糊模块分散读者的注意力。 一旦访问者移动到另一个 Blurb 模块，该模块就会变成突出显示的模块。 您也可以免费下载布局的 JSON 文件！

让我们开始吧。

预览

在我们深入学习教程之前，让我们快速浏览一下不同屏幕尺寸的结果。

桌面

悬停模糊模块

移动的

悬停模糊模块

免费下载 Hovered Blurb 模块布局

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

下载文件
免费下载

免费下载

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

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

让我们开始重建吧！

添加新部分

背景颜色

首先向新页面或您正在处理的页面添加常规部分。 打开部分设置并更改背景颜色。

  • 背景色：#eaeaea

悬停模糊模块

间距

也添加一些自定义边距和填充值。

  • 最高利润率：2vw
  • 底边距：2vw
  • 左边距：2vw
  • 右边距：2vw
  • 顶部填充：0px
  • 底部填充：0px

悬停模糊模块

边界

通过添加一些边框半径来完成部分设置。

  • 所有角落：20px

悬停模糊模块

添加新行

列结构

继续使用以下列结构向该部分添加新行：

悬停模糊模块

浆纱

在不添加任何模块的情况下，打开行设置并更改大小设置。 启用“均衡列高”选项将有助于下一步对齐列内容。

  • 均衡柱高：是
  • 宽度：90%
  • 最大宽度：1580px
  • 最小高度：500px（桌面），自动（平板电脑和手机）

悬停模糊模块

主要元素

通过向行的主要元素添加一行 CSS 代码来对齐列内容。 

align-items: center;

悬停模糊模块

将 Blurb 模块添加到第 1 列

添加内容

我们在本教程中使用的唯一模块是 Blurb 模块，但您可以使用您选择的任何模块替换此模块，只要您添加我们将在接下来的步骤中共享的 CSS 类。 将第一个 Blurb 模块添加到第 1 列并插入您选择的一些内容。

悬停模糊模块

选择图标

接下来选择一个图标。

悬停模糊模块

悬停渐变背景

然后，仅在悬停时使用渐变背景。

  • 颜色 1：#ffffff
  • 颜色 2：#0f1bff
  • 渐变类型：线性
  • 起始位置：20%
  • 结束位置：20%

悬停模糊模块

默认图标设置

转到模块的设计选项卡并按如下方式更改图标设置：

  • 图标颜色：#ffffff
  • 圆形图标：是
  • 圆圈颜色：#ffffff
  • 图像/图标放置：顶部
  • 图像/图标对齐方式：左

悬停模糊模块

悬停图标设置

在悬停时更改不同的图标颜色。

  • 图标颜色：#0f1bff
  • 圆圈颜色：#f7f7f7

悬停模糊模块

默认标题文本设置

继续修改标题文本设置。

  • 标题字体：Source Sans Pro
  • 标题字体粗细：粗体
  • 标题字体样式：大写

悬停模糊模块

悬停标题文本设置

在悬停时更改标题文本颜色。

  • 标题文字颜色：#ffffff

悬停模糊模块

默认正文设置

接下来是正文设置。

  • 正文字体：Open Sans
  • 车身线高：2em

悬停模糊模块

悬停正文设置

使用白色悬停文本颜色。

  • 正文颜色：#ffffff

悬停模糊模块

间距

然后，转到间距设置并添加一些自定义填充值。

  • 顶部填充：50px
  • 底部填充：50px
  • 左填充：50px
  • 右填充：50px

悬停模糊模块

默认框阴影

我们也在使用框阴影。

  • 框阴影模糊强度：80px
  • 框阴影传播强度：-20px
  • 阴影颜色：rgba(255,255,255,0.18)

悬停模糊模块

悬停框阴影

更改悬停时的阴影颜色。

  • 阴影颜色：rgba(0,0,0,0.18)

悬停模糊模块

CSS 类

为了实现模糊效果，我们需要为 Blurb 模块分配一个 CSS 类。 在这篇文章的后面，我们将在一些 JQuery 代码中使用这个 CSS 类。

  • CSS 类：blurb-item

悬停模糊模块

克隆 Blurb 模块两次并在剩余列中放置重复项

完成第 1 列中的 Blurb 模块后，您可以将其克隆两次并将重复项放置在该行的剩余列中。

悬停模糊模块

克隆整行

您可以根据需要最多克隆该行，具体取决于您希望在页面上显示多少个 Blurb 模块。

悬停模糊模块

单独自定义 Blurb 模块

当然，您需要修改每个 Blurb 模块的单独内容。

悬停模糊模块

添加新行

列结构

使用以下列结构向该部分添加另一行：

悬停模糊模块

间距

打开行设置并删除所有默认的顶部和底部填充。 这将有助于减少该行占用的空间。

  • 顶部填充：0px
  • 底部填充：0px

悬停模糊模块

将代码模块添加到列

插入 JQuery 和 CSS 代码

将代码模块添加到行的列并插入一些 JQuery 和 CSS 代码以实现效果。 不要忘记将 JQuery 代码放在 script 标签之间，将 CSS 代码放在 style 标签之间，如下面的打印屏幕所示。 

jQuery(function($){
$('[class*="blurb-item"]').hover(function() {
var selector = $(this);

$('[class*="blurb-item"]').addClass('blur');
selector.removeClass('blur');
},
function() {
$('[class*="blurb-item"]').removeClass('blur');

});
});
.blur {
-webkit-filter: blur(3px); /* Safari */
filter: blur(3px);
}

悬停模糊模块

预览

现在我们已经完成了所有步骤，让我们最后看看不同屏幕尺寸的结果。

桌面

悬停模糊模块

移动的

悬停模糊模块

最后的想法

在这篇文章中，我们向您展示了如何使用您在网站上共享的 Blurb 模块发挥创意。 更具体地说，我们向您展示了如何通过模糊您显示的其他模块来突出显示悬停的 Blurb 模块。 您也可以免费下载 JSON 文件！ 如果您有任何疑问，请随时在下面的评论部分发表评论。

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品，请确保订阅我们的电子邮件时事通讯和 YouTube 频道，这样您将永远是第一批了解此免费内容并从中受益的人之一。