WordPress divi主题

如何将 CSS 背景滤镜效果添加到 Divi 中的粘性标题

by | Apr 27, 2022 | Divi主题使用教程 | 0 comments

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

添加 CSS 背景滤镜效果是一种有趣且独特的方式来提升粘性标题菜单的设计。 使背景过滤器 CSS 属性如此独特的原因在于它允许您将过滤器效果应用于元素后面的区域。 这是粘性标题的完美选择,因为您的页面设计可以在向下滚动页面时在标题后面神奇地更改。 您可能已经在 apple.com 等热门网站上看到过这种效果。

google广告开户

在本教程中,我们将向您展示如何将 CSS 背景滤镜效果添加到 Divi 中的粘性标题中。 首先,我们将解释为现有标题添加背景滤镜效果的简单过程,该过程涉及 3 个简单步骤。 之后,我们将分解如何从头开始构建整个标题。

让我们开始吧!

抢先看

下面是我们将在本教程中构建的设计的快速浏览。

请注意滚动时应用于标题后面元素的模糊和饱和滤镜效果。

有关添加到标题的背景滤镜效果的简单现场演示,请查看此 codepen。

免费下载全局标题模板

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

如何上传模板

转到 Divi 主题生成器

要上传模板,请导航到 WordPress 网站后端的 Divi Theme Builder。

Divi 的 Bushcraft 布局包的页眉和页脚模板

上传全球默认网站模板

然后,在右上角,您会看到一个带有两个箭头的图标。 点击图标。

WordPress divi主题

Divi 的 Bushcraft 布局包的页眉和页脚模板

导航到导入选项卡,上传您可以在这篇文章中下载的 JSON 文件,然后单击“导入 Divi 主题生成器模板”。

Divi 的 Bushcraft 布局包的页眉和页脚模板

保存 Divi 主题生成器更改

上传文件后,您会在默认网站模板中看到一个新的全局页眉和页脚。 只要您希望激活模板,就保存 Divi Theme Builder 更改。

Divi 的 Bushcraft 布局包的页眉和页脚模板

让我们进入教程,好吗?

将 CSS 背景滤镜效果添加到现有标题

演示该过程的最简单方法是将 CSS 背景过滤器效果添加到 Divi 中的现有标题中。 真的,它归结为这三个简单的步骤:

  1. 向标题部分添加半透明背景颜色
  2. 将背景过滤器自定义 CSS 添加到标题部分
  3. 将粘性位置添加到标题部分

以下是在 Divi 中的操作方法。

在主题生成器中编辑标题

导航到 Theme Builder 并单击以编辑现有的 Header 模板。

fiverr建站WordPress程序员

向部分添加半透明背景颜色

打开包含标题菜单元素的部分的设置。 然后为该部分添加半透明背景颜色。 在此示例中,我们为该部分提供以下背景颜色:

  • 背景颜色:rgba(0,0,0,0.8)

添加背景过滤器自定义 CSS

接下来,我们可以在 Section 的主元素中添加带有自定义 CSS 片段的背景滤镜效果(使用背景滤镜 CSS 属性)。 在高级选项卡下,将以下 CSS 粘贴到主元素:

-webkit-backdrop-filter: saturate(200%) blur(10px);
backdrop-filter: saturate(200%) blur(10px);

这些滤镜效果类似于所有 Divi 元素内置的滤镜效果。 主要区别在于背景滤镜将效果添加到其后面的元素,而 Divi 的内置滤镜效果将效果添加到元素本身。

独立站选品工具

在这里,我们使用了 2 个滤镜效果(饱和和模糊),它们会将滤镜效果应用于该部分后面的任何设计元素。

随意探索添加其他过滤器功能值(或这些值的组合)以创建您自己的独特设计。 其中最有用的包括:

  • 模糊()
  • 亮度()
  • 对比()
  • 灰度()
  • 色调旋转()
  • 倒置()
  • 棕褐色()
  • 饱和()

将粘性位置添加到标题

最后,确保给标题部分一个粘性位置。

最后结果

这是实时页面上的最终结果。 请注意滚动时应用于标题后面元素的模糊和饱和滤镜效果。

高质量外链购买

从头开始使用 CSS 背景滤镜效果构建标题

如果你想从头开始使用 CSS 背景过滤器效果构建整个标题,这里是如何做到的。

在主题生成器中构建全局标题

导航到主题生成器并单击以生成新的全局标题。

使用 CSS 背景滤镜效果创建粘性部分

让我们开始使用 CSS 背景过滤器效果创建一个粘性部分,就像我们在本教程的第一部分中所做的那样。

在 Global Header Layout Editor 中,向该部分添加一列行。

JasperAI 10000字免费额度试用

打开该部分的设置。 然后将以下半透明背景颜色添加到该部分:

  • 背景颜色:rgba(0,0,0,0.8)

按如下方式更新填充:

  • 内边距:0px 顶部,0px 底部

WordPress备份工具updrafplus

接下来,我们可以在 Section 的主元素中添加带有自定义 CSS 片段的背景滤镜效果(使用背景滤镜 CSS 属性)。 在高级选项卡下,将以下 CSS 粘贴到主元素:

-webkit-backdrop-filter: saturate(200%) blur(10px);
backdrop-filter: saturate(200%) blur(10px);

最后,确保给标题部分一个粘性位置。

  • 粘性位置:坚持顶部

编辑行设置

现在该部分已完成,打开行设置并更新以下内容:

  • 天沟宽度:1
  • 宽度:95%
  • 内边距:顶部 20 像素,底部 20 像素

添加徽标图片

更新行设置后,将图像模块添加到行/列以创建徽标。

将徽标图像上传到图像模块。

更新图像设计设置如下:

  • 宽度:50 像素
  • 边距:0px 右

创建菜单

接下来,在图像模块下添加一个菜单模块。

在内容选项卡下,选择一个菜单并为菜单提供透明背景色。

  • 背景颜色:rgba(0,0,0,0)

在设计选项卡下,更新菜单设计设置如下:

  • 样式:左对齐
  • 活动链接颜色:#fff
  • 菜单字体:蒙特塞拉特
  • 菜单字体粗细:半粗体
  • 菜单文字颜色:#fff
  • 文本对齐:居中
  • 下拉菜单背景颜色:#333
  • 下拉菜单行颜色:#fff
  • 下拉菜单文本颜色:#fff
  • 下拉菜单活动链接:#fff
  • 移动菜单背景:#333
  • 移动菜单文本颜色:#fff
  • 购物车图标颜色:#fff
  • 搜索图标颜色:#fff
  • 汉堡菜单图标颜色:#fff
  • 宽度:80%(台式机和平板电脑)

使用文本模块创建按钮

要为标题创建小按钮,我们将使用一个文本模块。 在菜单下添加一个文本模块。

用作品“Shop”更新正文内容。 然后给文本模块一个白色的背景颜色。

  • 正文:“商店”
  • 背景颜色:#fff

在设计选项卡下,更新以下内容:

  • 文字字体:蒙特塞拉特
  • 文本字体粗细:半粗体
  • 文字文字颜色:#333
  • 文本行高:2em
  • 文本对齐:居中
  • 宽度:50 像素
  • 圆角:5px

此处文本模块与徽标图像具有相同的宽度。 当我们使用带有自定义 CSS 的列上的 flex 属性时,这将有助于完美地对齐项目。

使用 CSS Flex 属性对齐列中的模块

将徽标、菜单和文本模块添加到列后,打开列设置并将以下自定义 CSS 粘贴到主元素:

display:flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items:center;

保存标题布局和模板

完成后,请确保保存布局和模板。

最后结果

这是对最终设计的另一种看法。 请注意滚动时应用于标题后面元素的模糊和饱和滤镜效果。

浏览器支持

不幸的是,background-filter CSS 属性目前在 IE 和 Firefox 上效果不佳。 但是,后备将是赋予该部分的半透明背景颜色,它仍然有效并且看起来很棒。

最后的想法

希望您的下一个项目将受益于具有良好背景过滤效果的标题。 在 Divi 中添加任何标题确实很容易,并且探索所有可用的不同过滤器函数值很有趣。

我期待在评论中收到您的来信。

干杯!

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