如何使用 Divi 的粘性选项触发图像转换

Divi 的粘性选项的多功能性不仅仅是使用粘性标题的设置。 您也可以使用它来触发设计中的更改。 例如，在本教程中，我们将使用 Divi 的粘性选项来触发图像过渡。 一旦访问者接近滚动中的图像，图像转换就会发生。 我们将从头开始重新创建两个不同的示例，但是一旦您掌握了方法，您就可以仅使用 Divi 的内置选项创建自己独特的图像过渡。 您也可以免费下载 JSON 文件！

让我们开始吧！

预览

在我们深入学习教程之前，让我们最后看看不同屏幕尺寸的结果。

桌面

移动的

免费下载布局

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

下载文件

免费下载

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

下载

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

1. 一般步骤

添加第 1 节

间距

在本教程的第一部分，我们将构建我们的设计基础。 一旦到位，我们就可以专注于应用正确的设置来实现本文预览中的两个示例。 向您正在处理的页面添加一个新部分，在该部分的设计选项卡上移动并删除所有默认的顶部和底部填充。

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

添加新行

列结构

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

浆纱

还没有添加模块，打开行设置并修改大小设置如下：

• 最大宽度：1480px
• 行对齐：居中

间距

接下来删除所有默认的顶部和底部填充。

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

Z索引

并在位置设置中设置az index。 这将帮助我们确保该行保持在我们稍后在教程中添加的下一行的下方。

• Z指数：1

列溢出

接下来，打开列设置并将溢出设置为隐藏。

• 水平溢出：隐藏
• 垂直溢出：隐藏

将图像模块添加到列

将图像框留空

我们在这一行中唯一需要的模块是图像模块。 将图像框留空。

背景图片

并使用您选择的背景图像代替。

• 背景图片尺寸：封面
• 背景图片位置：中心

间距

为了让图像显示出来，我们将在不同的屏幕尺寸上使用一些自定义填充值。

• 顶部填充：
  • 桌面：300px
  • 平板电脑和手机：150px
• 底部填充：
  • 桌面：300px
  • 平板电脑和手机：150px

添加第 2 节

间距

在上一节的正下方添加另一节。 打开部分设置并删除间距设置中的默认顶部填充。

• 顶部填充：0px

添加新行

列结构

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

Z索引

也为此行添加 az 索引。

• Z指数：2

将号召性用语模块添加到列

添加内容

在这一行中，我们唯一需要的模块是 Call to Action 模块。 添加您选择的内容。

添加按钮链接

连同按钮链接。

背景颜色

然后，添加白色背景色。

• 背景颜色：#ffffff

文字设置

移至设计选项卡并更改文本设置。

• 文本对齐方式：左
• 文字颜色：深色

标题文字设置

标题文本的样式。

• 标题字体：Playfair Display
• 标题字体样式：斜体
• 标题文字大小
  • 桌面：45px
  • 平板电脑：40px
  • 电话：35px
• 标题字母间距：1px

正文设置

以及正文。

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

按钮设置

然后，设置按钮样式。

• 为按钮使用自定义样式：是
• 按钮文字大小：18px
• 按钮文字颜色：#000000
• 渐变色 1：#ffffff
• 渐变色 2：#ffdc91
• 渐变类型：线性
• 起始位置：50%
• 结束位置：50%

• 按钮边框宽度：0px
• 按钮边框半径：0px
• 按钮字体：Karla
• 按钮字体样式：大写
• 显示按钮：是

• 按钮图标位置：左
• 仅在悬停按钮时显示图标：否
• 顶部填充：10px
• 底部填充：10px
• 左填充：15%
• 右填充：15%

浆纱

我们也在修改不同屏幕尺寸的尺寸设置。

• 宽度：
  • 台式机：65%
  • 平板电脑：80%
  • 电话：100%
• 模块对齐：居中

间距

接下来，我们将向间距设置添加一些自定义边距和填充值。

• 最高保证金：
  • 桌面：-150px
  • 平板电脑：-50px
  • 电话：0px
• 下边距：50px
• 顶部填充：150px
• 底部填充：150px

盒子阴影

我们将通过添加一个微妙的框阴影来完成模块设置。

• Box Shadwo 模糊强度：30px
• 阴影颜色：rgba(0,0,0,0.11)

2. 对行应用粘性效果

在第 #1 部分中打开行

现在我们已经为我们的设计奠定了基础，是时候应用粘性效果了。 当人们滚动经过元素时，这种粘性效果将帮助我们改变样式。 我们将添加粘滞效果的元素是第一部分中包含图像的行。

应用粘性效果

确保将底部粘性限制设置为部分非常重要。 我们行的开始和结束点与该部分的相同，这确保该行实际上不会变得粘滞，但会应用粘滞样式。 粘性顶部偏移确定过渡开始发生的点。 例如，如果此值为零，则意味着浏览器的顶部必须触摸行的顶部才能开始转换。 通过将粘性顶部偏移设置为“300px”，我们可以更早地创建该过渡。

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

确保第一部分上方的顶部偏移量相等

由于我们已将粘性顶部偏移设置为“300px”，因此我们需要页面顶部的空间来实现这一点。 如果您在页面中间的某个地方使用此设计，则不必担心这一步。 但是，如果您在页面顶部使用这种方法，则必须修改粘性顶部偏移量或在顶部添加足够的空间。 我们将在第一部分添加一些上边距以生成该空间。

• 上边距：400px

3. 将 Ken Burn 效果应用到图像模块

现在我们的行已经变成了粘性，我们可以开始将粘性样式应用于该行及其所有子元素。 尽管可能性无穷无尽，但我们向您展示了两个不同的示例以及如何实现它们。 为了更轻松地处理这两个不同的示例，我们将克隆两个部分一次并将它们放在第一个部分的下方。

示例#1

粘性行设置

盒子阴影

要重新创建示例 #1（您可以在本文的预览中看到），请打开行设置并应用以下框阴影设置：

• 框阴影垂直位置：0px
• 框阴影传播强度：0px
• 阴影颜色：rgba(0,0,0,0)

• 粘性垂直位置：100px
• 粘性阴影颜色：#ffdc91

过渡

在高级选项卡中也包括平滑过渡。

• 转换持续时间：500ms
• 过渡速度曲线：轻松

粘滞图像模块设置

变换比例

接下来，打开图像模块并在粘性状态下应用变换缩放效果。

• 两者：100%

• 两者都粘：130%

过渡

通过相应地修改模块的过渡设置来确保平滑过渡：

• 转换持续时间：1200ms
• 过渡速度曲线：轻松

示例#2

粘性行设置

转换 翻译

进入第二个例子！ 打开行设置并应用以下转换转换设置：

• 正确：20%

• 粘性权利：0%

过渡

也修改行的过渡设置。

• 转换持续时间：500ms
• 过渡速度曲线：轻松

粘滞图像模块设置

过滤器

然后，打开图像模块并在默认和粘性状态下使用过滤器。

• 饱和度：0%
• 亮度：50%

• 粘性饱和度：100%
• 粘性亮度：100%

过渡

通过如下更改过渡设置来完成模块设置和本教程：

• 转换持续时间：500ms
• 过渡速度曲线：轻松

预览

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

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何使用 Divi 的粘性选项发挥创意。 更具体地说，我们向您展示了如何触发图像转换。 一旦人们滚动经过图像，图像的样式就会发生变化，从而产生美丽的过渡。 我们已经处理了两个不同的例子，但可能性是无穷无尽的。 您也可以免费下载 JSON 文件！ 如果您有任何问题或建议，请随时在下面的评论部分发表评论。

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