如何使用 Divi 的粘性选项显示英雄中的底层图像网格

创建一个吸引访问者注意力的英雄部分可以为网站的其余部分定下基调。 如果您正在寻找一种创造性的方式来使用 Divi 的粘性选项来帮助您实现目标，那么您会喜欢本教程。 今天，我们将向您展示如何使用 Divi 的粘性选项在您的英雄中显示底层图像网格。 我们包括从默认到粘性的非常平滑的过渡，您也可以免费下载 JSON 文件！

让我们开始吧。

预览

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

桌面

移动的

免费下载布局

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

下载文件

免费下载

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

下载

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

1.创造英雄设计

添加新部分

背景颜色

首先向您正在处理的页面添加一个新部分。 打开部分设置并添加背景颜色。

• 背景颜色：#111111

间距

转到该部分的设计选项卡并添加一些底部填充。 这个底部填充将为我们提供足够的空间来创建滚动体验。

• 底部填充：120vh

添加第 1 行

列结构

继续使用以下列结构添加新行：

浆纱

还没有添加模块，打开行设置，转到设计选项卡并更改大小设置如下：

• 使用自定义装订线宽度：是
• 天沟宽度：2
• 宽度：100%
• 最大宽度：2580px

间距

接下来添加一些响应式上边距。

• 最高保证金：
  • 台式机：10vh
  • 平板电脑和手机：5vh

Z索引

为了确保这一行保持在我们将添加到此部分的第二行下方，稍后，我们将在高级选项卡中使用 az 索引 10。

• Z指数：10

所有列设置

完成常规行设置后，单独打开每一列。

主要元素 CSS

在每一列中，将以下 CSS 代码行应用于手机上的主要元素：

仅限电话：

width: 50% !important;
margin: 0 !important;

第 2 列设置

然后，打开第 2 列设置。

Z索引

并将 Z 索引增加到 12。这将使此列位于第三列之上。

• Z指数：12

将图像模块添加到第 1 列

上传图片

是时候添加模块了，从第 1 列中的图像模块开始。上传您选择的图像。

间距

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

• 底部边距：
  • 平板电脑和手机：10px
• 右边距：
  • 平板电脑和手机：2%

克隆图像模块三次并在剩余列中放置重复项

完成模块设置后，您可以克隆整个模块 3 次，并将重复项放置在行的其余列中。

更改图像

确保更改每个重复模块中的图像。

更改图像模块 #2 和 #4 间距

然后，打开第 2 列和第 4 列中图像模块的设置，并将以下间距值应用于它们：

• 底部边距：
  • 平板电脑和手机：10px
• 左边距：
  • 平板电脑和手机：2%
• 右边距：/

添加第 2 行

列结构

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

渐变背景

打开行设置并应用以下渐变背景：

• 颜色 1：#111111
• 颜色 2：rgba(255,255,255,0)

浆纱

接下来修改大小设置。

• 宽度：100%
• 最大宽度：2580px

间距

然后，应用一些顶部和底部填充。

• 顶部填充：20vh
• 底部填充：20vh

位置

要将这一行放在图像网格的顶部，我们将相应地使用位置设置：

• 位置：绝对
• 地点：顶部中心
• Z指数：12

将文本模块添加到列

添加H1内容

使用您选择的一些 H1 内容将第一个文本模块添加到此行。

H1 文本设置

转到模块的设计选项卡并相应地更改 H1 文本设置：

• 标题字体：Kumbh Sans
• 标题字体粗细：粗体
• 标题字体样式：大写
• 标题文本对齐方式：居中
• 标题文字颜色：#ffdbaa
• 标题文字大小：
  • 桌面：120px
  • 平板电脑：60px
  • 电话：40px
• 标题字母间距
  • 桌面：-3px
  • 平板电脑和手机：0px
• 标题文字阴影：
  • 选择：第三个选项
  • 标题文字阴影颜色：rgba(0,0,0,0.4)

浆纱

接下来修改大小设置。

• 最大宽度：900px
• 模块对齐：居中

将按钮模块添加到列

添加副本

我们在这一行中需要的下一个也是最后一个模块是按钮模块。 添加一些您选择的副本。

按钮对齐

移至设计选项卡并更改按钮对齐方式。

• 按钮对齐：居中

按钮设置

然后，设置按钮样式。

• 为按钮使用自定义样式：是
• 按钮文字大小：
  • 桌面：20px
  • 平板电脑：16px
  • 电话：14px
• 按钮文字大小：#111111
• 按钮背景颜色：#ffffff
• 按钮边框宽度：0px
• 按钮边框半径：100px

• 按钮字体：Kumbh Sans
• 按钮字体粗细：粗体

间距

并在间距设置中使用一些响应式填充值。

• 顶部填充：
  • 台式机和平板电脑：20px
  • 电话：15px
• 底部填充：
  • 台式机和平板电脑：20px
  • 电话：15px
• 左填充：
  • 台式机和平板电脑：50px
  • 电话：40px
• 右填充：
  • 台式机和平板电脑：50px
  • 电话：40px

2. 应用粘性设置

转动第 1 行粘性

现在我们已准备好所有元素，我们可以专注于粘性设置。 打开第一行的设置并应用以下粘性设置：

• 粘滞位置：粘在顶部
• 底部粘性限制：部分
• 从周围的粘性元素偏移：是
• 过渡默认和粘性样式：是

粘性不透明度

然后，更改过滤器设置中的不透明度。

• 默认值：20%
• 粘性：100%

图像模块 #1 粘性设置

间距

接下来，打开第 1 列中图像模块的设置。移至设计选项卡并添加一些粘性顶部和右边距。

• 粘性顶部边距：-20%
• 粘性右边距：-20%

过渡

也增加过渡持续时间。

• 转换持续时间：700ms

图像模块 #2 粘性间距

间距

转到第 2 列中的图像模块并使用以下粘性间距设置：

• 粘性顶部保证金：20%
• 粘性左边距：-30%

过渡

在这里也增加过渡持续时间。

• 转换持续时间：1000ms

图像模块 #3 粘性间距

间距

接下来，我们有第 3 列中的图像模块。使用以下粘性间距值：

• 粘性顶部边距：-10%
• 粘性左边距：-25%
• 粘性右边距：-25%

过渡

相应地更改过渡持续时间：

• 转换持续时间：700ms

图像模块 #4 粘性间距

间距

最后，打开第 4 列中的图像模块。应用以下粘性间距值：

• 粘性顶部边距：-20%
• 粘性左边距：-30%

过渡

通过增加过渡持续时间来完成模块设置和本教程。 就是这样！ 保存并退出页面以查看结果。

• 转换持续时间：1000ms

预览

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

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何利用 Divi 中的英雄部分发挥创意。 更具体地说，我们向您展示了如何使用 Divi 的粘性部分在滚动时显示图像网格。 您也可以免费下载 JSON 文件。 如果您有任何问题或建议，请随时在下面的评论部分发表评论。

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