WordPress divi主题

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

| 5月 7, 2022 | Divi主题使用教程 | 0 条评论

5分钟生成10篇英文软文article forge软件试用

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

google广告开户

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

让我们开始吧。

预览

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

桌面

悬停的简介模块

移动的

悬停的简介模块

免费下载悬停的模糊模块布局

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

让我们开始重建吧!

添加新部分

背景颜色

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

悬停的简介模块

间距

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

WordPress divi主题
  • 最高边距:2vw
  • 底边距:2vw
  • 左边距:2vw
  • 右边距:2vw
  • 顶部填充:0px
  • 底部填充:0px

悬停的简介模块

边界

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

悬停的简介模块

添加新行

立柱结构

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

悬停的简介模块

浆纱

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

  • 均衡柱高:是
  • 宽度:90%
  • 最大宽度:1580px
  • 最小高度:500px(桌面),自动(平板电脑和手机)

悬停的简介模块

主要元素

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

align-items: center;

悬停的简介模块

将 Blurb 模块添加到第 1 列

添加内容

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

fiverr建站WordPress程序员

悬停的简介模块

选择图标

接下来选择一个图标。

悬停的简介模块

悬停渐变背景

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

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

悬停的简介模块

独立站选品工具

默认图标设置

转到模块的设计选项卡并更改图标设置,如下所示:

  • 图标颜色:#ffffff
  • 圆圈图标:是
  • 圆圈颜色:#ffffff
  • 图像/图标位置:顶部
  • 图像/图标对齐:左

悬停的简介模块

悬停图标设置

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

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

悬停的简介模块

默认标题文本设置

继续修改标题文本设置。

高质量外链购买
  • 标题字体:Source Sans Pro
  • 标题字体粗细:粗体
  • 标题字体样式:大写

悬停的简介模块

悬停标题文本设置

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

  • 标题文字颜色:#ffffff

悬停的简介模块

默认正文文本设置

接下来是正文文本设置。

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

悬停的简介模块

JasperAI 10000字免费额度试用

悬停正文文本设置

使用白色悬停文本颜色。

悬停的简介模块

间距

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

  • 上边距:50px
  • 底部填充:50px
  • 左填充:50px
  • 右内边距:50px

悬停的简介模块

默认框阴影

我们也在使用盒子阴影。

WordPress备份工具updrafplus
  • 盒子阴影模糊强度:80px
  • 盒子阴影传播强度:-20px
  • 阴影颜色:rgba(255,255,255,0.18)

悬停的简介模块

悬停框阴影

更改悬停时的阴影颜色。

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

悬停的简介模块

CSS 类

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

悬停的简介模块

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

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

悬停的简介模块

克隆整行

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

悬停的简介模块

单独自定义 Blurb 模块

当然,您需要修改每个 Blurb Module 的单独内容。

悬停的简介模块

添加新行

立柱结构

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

悬停的简介模块

间距

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

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

悬停的简介模块

将代码模块添加到列

插入 JQuery & CSS 代码

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

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 模块获得创意。 更具体地说,我们向您展示了如何通过模糊您显示的其他模块来突出显示悬停的模糊模块。 您还可以免费下载 JSON 文件! 如果您有任何疑问,请随时在下面的评论部分发表评论。

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

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题