如何使用 Divi 的粘性选项在不移动的情况下更改滚动样式
已发表: 2020-12-23如果您在构建新网站时要采用简洁的设计风格，您很可能希望找到一种方法来为您的网站添加额外的维度。 本教程将全部与此相关。 我们将向您展示如何使用 Divi 的粘性选项无需移动即可更改粘性样式。 具体来说，这意味着一旦访问者滚动经过页面的某个部分，该部分的样式就会改变，但元素将保持原样。 这种类型的效果完全集中在用户行为上。 粘性样式的变化只有在人们滚动过去时才会发生，这会产生美丽的结果。 在本教程中，我们将逐步向您展示如何到达那里。 一旦你掌握了方法，你就可以在你构建的任何类型的设计中使用它！ 您也可以免费下载 JSON 文件。
让我们开始吧。
预览
在我们深入学习教程之前，让我们快速浏览一下不同屏幕尺寸的结果。
桌面
移动的
免费下载布局
要使用免费布局，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
免费下载
加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。
您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！
1. 创建元素结构
添加新部分
能见度
首先向您正在处理的页面添加一个新部分。 打开部分设置并隐藏高级选项卡中的溢出。 这将有助于确保不会出现水平滚动条。
- 水平溢出：隐藏
- 垂直溢出：隐藏
添加新行
列结构
继续使用以下列结构向该部分添加新行：
浆纱
不添加任何模块，打开行设置并相应地修改大小设置：
- 使用自定义装订线宽度：是
- 天沟宽度：1
- 均衡柱高：是
- 宽度：100%
- 最大宽度：2580px
间距
接下来删除所有默认的顶部和底部填充。
- 顶部填充：0px
- 底部填充：0px
第 1 列设置
间距
然后，打开第 1 列设置并在不同的屏幕尺寸上应用一些自定义填充值。
- 顶部填充：
- 桌面：200px
- 平板电脑：100px
- 电话：80px
- 底部填充：
- 桌面：200px
- 平板电脑：100px
- 电话：80px
Z索引
也增加此列的 z 索引。 在本教程的后面，我们将在第 1 列和第 2 列之间创建水平重叠。我们增加 z 索引以确保第 1 列模块位于第 2 列模块上方。
- Z指数：11
第 2 列设置
背景颜色
接下来，我们将为第 2 列添加背景颜色。
- 背景颜色：#f9f9f9
间距
我们也将在不同的屏幕尺寸上使用一些自定义填充值。
- 顶部填充：
- 桌面：200px
- 平板电脑：150px
- 电话：100px
- 底部填充：
- 桌面：200px
- 平板电脑：150px
- 电话：100px
第 3 列设置
间距
最后但并非最不重要的一点是，我们还将向第 3 列添加一些自定义填充值。
- 顶部填充：
- 桌面：200px
- 平板电脑：100px
- 电话：50px
- 底部填充：
- 桌面：200px
- 平板电脑：100px
- 电话：50px
- 左填充：8%
- 右填充：8%
将文本模块添加到第 1 列
添加副本
是时候添加模块了，从第 1 列中的文本模块开始。在内容框中添加一个数字。
背景颜色
接下来更改背景颜色。
- 背景颜色：#efefef
文字设置
转到设计选项卡并相应地更改文本设置：
- 文字字体：蒙特塞拉特
- 文字颜色：#ffffff
- 文字大小：100px
- 文本行高：1em
- 文本对齐：居中
浆纱
接下来修改宽度。
- 宽度：150px
间距
然后，添加一些自定义的顶部和底部填充。
- 顶部填充：20px
- 底部填充：20px
位置
也重新定位模块。
- 位置：绝对
- 位置：右下角
- 水平偏移：-5%
将文本模块添加到第 2 列
添加 H3 & H4 副本
进入第二列。 在那里，我们将添加一个带有一些 H3 和 H4 副本的文本模块。
文字设置
转到模块的设计选项卡并按如下方式更改文本设置：
- 文本对齐：居中
- 文字颜色：深色
H3 文本设置
然后，修改 H3 文本设置。
- 标题 3 字体：Playfair Display
- 标题 3 文本对齐：居中
- 标题 3 文字大小：
- 桌面：90px
- 平板电脑：70px
- 电话：60px
H4 文本设置
也为 H4 文本设置样式。
- 标题 4 字体：蒙特塞拉特
- 标题 4 字体粗细：轻
浆纱
然后，转到大小设置并应用“100%”宽度。 这将有助于下一步，即重新定位模块。
- 宽度：100%
位置
通过进入高级选项卡并修改位置设置来完成模块设置，如下所示：
- 位置：绝对
- 位置：左下角
- 垂直偏移：20px
将文本模块添加到第 3 列
添加H5和段落内容
进入第三列。 添加带有您选择的一些 H5 和段落内容的文本模块。
文字设置
转到模块的设计选项卡并更改文本设置中的字体。
- 文字字体：蒙特塞拉特
H5 文字设置
也为 H5 文本设置样式。
- 标题 5 字体：蒙特塞拉特
- 标题 5 字体粗细：粗体
- 标题 5 文字大小：
- 台式机和平板电脑：23px
- 电话：18px
2. 创造效果的关键变化
部分
删除部分填充
现在我们已经为我们的设计奠定了基础，我们可以开始创建您可以在这篇文章的预览中看到的自定义粘性样式效果。 实现此效果的第一步是确保您的部分的顶部和底部填充值为零。 这样做将帮助我们确保部分和行在同一点开始和结束。 当我们在接下来的步骤中将粘性位置添加到我们的行时，这一点很重要。 通过将限制设置为该部分的底部，我们不会为该行留下任何移动空间。 但是，该行将在几秒钟内变为粘性，并在我们的设计中突出显示更改后的粘性样式。
- 顶部填充：0px
- 底部填充：0px
排
转行粘性
打开行设置并将行置为粘性。 正如在上一步中提到的，确保我们行的底部粘性限制是部分很重要。 由于行尾和节尾之间没有空间，因此粘性行将保持原位。
- 粘滞位置：粘在顶部
- 粘性顶部偏移：0px
- 底部粘性限制：部分
- 从周围的粘性元素偏移：是
- 过渡默认和粘性样式：是
粘性行背景颜色
是时候开始为我们的元素应用一些粘性样式了！ 从行背景颜色开始。
- 背景颜色：#161616
行转换
为了确保平滑过渡，我们将在行的高级选项卡中增加过渡持续时间。
- 转换持续时间：500ms
- 过渡速度曲线：轻松
粘性列 2 背景颜色
然后，我们将更改粘性列 2 的背景颜色。
- 背景颜色：#262626
第 1 列中的文本模块
粘性背景色
我们也将更改第 1 列中文本模块的背景颜色。
- 背景颜色：#ddc7b5
粘性文本颜色
随着粘性文本颜色。
- 文字颜色：#0a0a0a
粘性尺寸
我们将在大小设置中增加模块的宽度。
- 宽度：105%
过渡
我们通过在高级选项卡中修改模块的过渡持续时间来确保平滑过渡。
- 转换持续时间：500ms
- 过渡速度曲线：轻松
第 2 列中的文本模块
粘性文本颜色
接下来，我们有第 2 列中的文本模块。我们将在粘性状态下将文本颜色更改为浅色。
- 文字颜色：浅
第 3 列中的文本模块
粘性文本颜色
第 3 列中的文本模块也是如此。
- 文字颜色：浅
3. 克隆部分重用
现在我们已经完成了第一部分，包括粘性样式更改效果，我们可以通过克隆它来多次重复使用该部分。
更改所有副本
确保您更改了所有重复的副本。
在第一节添加一些上边距，在最后一节添加一些下边距
最后但并非最不重要的一点是，我们将为第一部分添加一些顶部边距，为最后一部分添加一些底部边距。 这将帮助我们防止在人们开始滚动之前立即转换。 就是这样！
- 上边距：200px
- 下边距：200px
预览
现在我们已经完成了所有步骤，让我们最后看看不同屏幕尺寸的结果。
桌面
移动的
最后的想法
在这篇文章中，我们向您展示了如何使用 Divi 的粘性选项发挥创意。 更具体地说，我们使用了 Divi 粘性选项来更改粘性样式而不增加运动。 当人们滚动经过页面的某个部分时，设计的样式就会发生变化，从而突出显示页面的特定部分。 您也可以免费下载 JSON 文件！ 如果您有任何问题或建议，请随时在下面的评论部分发表评论。
如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品，请确保订阅我们的电子邮件时事通讯和 YouTube 频道，这样您将永远是第一批了解此免费内容并从中受益的人之一。