如何在 Divi 设计中轻松结合滚动效果和粘性选项

您对 Divi 越熟悉，就越意识到内置功能可以走多远。 有时，甚至可能会很想开始将它们结合起来。 但与设计中的所有事物一样，应该优先考虑和谐。 如果使用滚动效果和粘性选项等功能不会使设计负担过重，则效果最佳。 现在，在本教程中，我们将使用 Divi 的滚动效果和粘性选项来创建轻松的设计和用户滚动体验。 我们将应用的效果已经过协调，可以很好地协同工作并为设计增加价值。 您也可以免费下载 JSON 文件！

让我们开始吧。

预览

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

桌面

移动的

免费下载布局

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

下载文件

免费下载

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

下载

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

1. 创建设计结构

添加新部分

渐变背景

在我们关注滚动效果和粘性选项之前，我们将开始构建设计。 向您正在处理的页面添加一个新部分，打开部分设置并包含以下渐变背景：

• 颜色 1：#78998c
• 颜色 2：RGBA(120,153,140,​​0.13)
• 渐变类型：线性
• 梯度方向：90度
• 起始位置：10%
• 结束位置：10%

能见度

转到该部分的高级选项卡并隐藏两个溢出。

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

添加新行

列结构

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

浆纱

在不添加模块的情况下，打开行设置并相应地更改大小设置：

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

间距

也添加一些底部边距。

• 下边距：50px

第 2 列间距

然后，打开第 2 列设置并应用以下填充值：

• 顶部填充：5vh
• 底部填充：5vh
• 左填充：8%
• 右填充：8%

将文本模块添加到第 1 列

添加H3内容

是时候添加模块了，从第 1 列中的文本模块开始。添加一些您选择的内容。

渐变背景

接下来包括以下渐变背景：

• 颜色 1：RGBA(8,45,18,0.52)
• 颜色 2：rgba(255,255,255,0)
• 渐变类型：线性
• 将渐变放在背景图像上方：是

背景图片

然后，上传您选择的背景图片。

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

H3 文本设置

转到设计选项卡并相应地更改 H3 文本设置：

• 标题 3 字体：Prata
• 标题 3 字体样式：大写
• 标题 3 文本对齐：居中
• 标题 3 文本颜色：#ffffff
• 标题 3 文字大小：42px
• 标题 3 行高：1.2em

间距

使用以下间距值完成模块设置：

• 最高边距：20vh
• 底边距：20vh
• 顶部填充：48vh
• 底部填充：48vh

将文本模块 #1 添加到第 2 列

添加H4内容

转到第 2 列。在那里，我们需要的第一个模块是带有一些 H4 内容的文本模块。

H4 文本设置

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

• 标题 4 字体：Prata
• 标题 4 字体样式：大写
• 标题 4 文本颜色：#155100
• 标题 4 文字大小：
  • 桌面：45px
  • 平板电脑：40px
  • 电话：35px
• 标题 4 行高：1.3em

将分隔模块添加到第 2 列

能见度

在文本模块正下方添加一个分隔线模块，并确保启用了“显示分隔线”选项。

• 显示分隔线：是

线

移至模块的设计选项卡并更改线条颜色。

• 线条颜色：#e8ddc9

浆纱

然后，修改大小设置。

• 分隔线重量：5px
• 高度：5px

将文本模块 #2 添加到第 2 列

添加说明内容

在分隔线模块正下方添加另一个文本模块。 添加一些您选择的描述内容。

文字设置

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

• 文字字体：Lato
• 文字颜色：#155100
• 字体大小：
  • 桌面：20px
  • 平板电脑和手机：16px
• 文字字母间距：-0.5px
• 文本行高：1.8em

浆纱

我们也在修改大小设置中的宽度。

• 宽度：
  • 台式机：72%
  • 平板电脑和手机：100%

将按钮模块添加到第 2 列

添加副本

我们在第 2 列中需要的下一个也是最后一个模块是按钮模块。

按钮设置

相应地设置按钮样式：

• 为按钮使用自定义样式：是
• 按钮文字大小：20px
• 按钮文字颜色：#155100
• 按钮渐变背景
  • 颜色 1：RGBA(43,135,218,0)
  • 颜色 2：rgba(224,198,159,0.48)
  • 起始位置：50%
  • 结束位置：50%
• 按钮边框宽度：0px
• 按钮边框半径：0px

• 按钮字体：Prata
• 按钮字体样式：大写

2. 添加粘性效果

打开第 2 列设置

现在我们的第一行已经就位，我们可以开始应用粘性和滚动效果。 我们将通过打开第 2 列设置从粘性选项开始。

转列粘性

移至列的高级选项卡并应用以下粘性设置：

• 粘滞位置：粘在顶部
• 粘性顶部偏移：
  • 桌面：50px
  • 平板电脑和手机：80px
• 底部粘性限制：行
• 从周围的粘性元素偏移：是
• 过渡默认和粘性样式：是

列粘性设置

粘性边框

现在我们已经将列设置为粘性，我们可以开始将粘性样式应用于列本身及其中的模块。 我们将从第 2 列开始，转到边框设置并应用以下粘性边框：

• 粘性左边框宽度：2px
• 左边框颜色：#799a8d

转换 翻译

接下来，我们将在默认和粘性状态下修改转换转换值。

• 底部：10vw

• 粘底：0vw

文本模块和按钮模块粘性不透明度

我们也在更改默认和粘性状态下的不透明度。

• 不透明度：0%

• 粘性不透明度：100%

分隔线模块粘性设置

浆纱

接下来，打开第 2 列中的分隔线模块。移至设计选项卡并更改尺寸设置中的默认宽度和粘性宽度。

• 宽度：0px

• 粘性宽度：21%

过渡

在高级选项卡中也增加过渡持续时间。

• 转换持续时间：800ms

3. 添加滚动效果

在第 1 列中打开文本模块

接下来，我们有滚动效果。 我们将这些效果应用到第 1 列中的文本模块。首先打开模块的设置。

添加水平运动

移至高级选项卡并添加以下水平运动设置：

• 启用水平运动：是
  • 起始偏移：-5
  • 中间偏移：0（72%）
  • 结束偏移：0

添加淡入淡出滚动效果

通过将以下淡入和淡出设置应用于同一模块来完成滚动效果：

• 启用淡入淡出：是
  • 起始不透明度：0%
  • 中等不透明度：0%（46%）
  • 结束不透明度：100%（52%）

4. 重用行

根据需要多次克隆行

现在滚动效果和粘性选项都已就位，我们可以通过克隆它来根据需要多次重复使用整行。

更改重复内容

确保您更改了所有重复的内容，仅此而已！

预览

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

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何利用 Divi 的滚动效果和粘性选项发挥创意。 更具体地说，我们向您展示了如何在优雅的设计中平衡这两种效果。 这导致在所有屏幕尺寸上都有漂亮的滚动体验。 您也可以免费下载 JSON 文件！ 如果您有任何问题或建议，请务必在下面的评论部分留言。

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