如何将重叠与 Divi 的粘性选项相结合以创建轻松的过渡
已发表: 2021-01-25随着技术的不断发展，设计也在不断发展。 您比以往任何时候都可以遇到让您惊讶并想知道它们是如何创建的网站。 尽管进行滚动交互的网站并不适合所有类型的业务，但知道如何加倍努力对于留下良好印象特别有帮助。 使用 Divi，许多事情已经成为可能，而无需接触任何一行代码。 今天的教程帮助你从另一个角度理解Divi。 我们将向您展示如何将 Divi 的粘性选项与其他内置设置相结合，以创建轻松的过渡。 您也可以免费下载 JSON 文件！
让我们开始吧。
预览
在我们深入学习教程之前，让我们快速浏览一下不同屏幕尺寸的结果。
桌面
移动的
免费下载布局
要使用免费布局，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
免费下载
加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。
您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！
1. 重新创建设计结构
添加新部分
间距
在本教程的第一部分，我们将专注于在 Divi 中重新创建设计结构。 然后，在第二部分中，我们将花时间浏览所有粘性选项，以实现您可以在本文预览中看到的效果。 首先向您正在处理的页面添加一个新部分。 打开部分设置，转到设计选项卡并添加一些底部填充。
- 底部填充：100vh
添加第 1 行
列结构
继续使用以下列结构添加新行：
浆纱
还没有添加模块，打开行设置，转到设计选项卡并相应地更改大小设置：
- 宽度：90%
- 最大宽度：100%
Z索引
也将 az 索引分配给该行。
- Z指数：1
将图像模块添加到列
将图像框留空
是时候添加模块了，从图像模块开始。 将内容框留空。
改用背景图片
并使用您选择的背景图像代替。
- 背景图片尺寸：封面
浆纱
接下来更改模块的宽度。
- 宽度：100%
间距
然后，将一些自定义的顶部和底部填充应用于间距设置。
- 顶部填充：40vh
- 底部填充：40vh
将文本模块添加到列
添加 H2 内容
进入下一个模块，这是一个包含您选择的一些 H2 内容的文本模块。
H2 文本设置
相应地更改模块的 H2 文本设置：
- 标题 2 字体：蒙特塞拉特
- 标题 2 文本对齐：居中
- 标题 2 文本颜色：#ffffff
- 标题 2 文字大小：
- 台式机：10vw
- 平板电脑：14vw
- 电话：15vw
- 标题 2 字母间距：-0.5vw
浆纱
确保模块也是“100%”。
- 宽度：100%
位置
并在高级选项卡中重新定位模块。
- 位置：绝对
- 地点：中心
添加第 2 行
列结构
进入下一行。 使用以下列结构：
浆纱
还没有添加模块，打开行设置，转到设计选项卡并更改大小设置如下：
- 使用自定义装订线宽度：是
- 天沟宽度：1
- 宽度：90%
- 最大宽度：100%
Z索引
也将 az 索引分配给该行。
- Z指数：2
第 1 列间距
通过打开第一列设置并分配一些左右填充来完成行设置。
- 左填充：5%
- 右填充：5%
将文本模块添加到第 1 列
添加H3内容
现在行设置已经到位，是时候添加模块了。 使用您选择的一些 H3 内容将文本模块添加到第 1 列。
H3 文本设置
转到模块的设计选项卡并相应地更改 H3 文本设置：
- 标题 3 字体：蒙特塞拉特
- 标题 3 字体样式：下划线
- 标题 3 下划线颜色：#ffffff
- 标题 3 下划线样式：纯色
- 标题 3 文本颜色：#ffffff
- 标题 3 文字大小：
- 台式机：4vw
- 平板电脑和手机：10vw
- 标题 3 字母间距：-3px
间距
在较小的屏幕尺寸上添加一些正确的填充。
- 右填充：20%（仅限平板电脑和手机）
将文本模块添加到第 2 列
添加内容
将另一个文本模块添加到第 2 列，其中包含您选择的一些描述内容。
背景颜色
接下来更改背景颜色。
- 背景颜色：#ffffff
文字设置
然后，修改文本设置如下：
- 文字字体：Playfair Display
- 文本字体样式：斜体
- 字体大小：
- 台式机：1.6vw
- 平板电脑：3vw
- 电话：4vw
- 文本行高：1.5em
间距
也应用一些自定义填充值。
- 顶部填充：10vh
- 底部填充：10vh
- 左填充：10%
- 右填充：10%
将按钮模块添加到第 2 列
添加副本
我们将添加的下一个也是最后一个模块是第 2 列的按钮模块。添加一些您选择的副本。
按钮设置
转到模块的设计选项卡并按如下方式更改按钮设置：
- 为按钮使用自定义样式：是
- 按钮文字大小：
- 台式机：1.2vw
- 平板电脑：2.5vw
- 电话：3.5vw
- 按钮文字颜色：#000000
- 按钮背景颜色：#ffffff
- 按钮边框宽度：0px
- 按钮边框半径：0px
- 按钮字体：蒙特塞拉特
- 按钮字体样式：下划线
- 按钮下划线颜色：#000000
- 按钮下划线样式：纯色
间距
也添加一些自定义填充值。
- 顶部填充：20px
- 底部填充：20px
- 左填充：50px
- 右填充：50px
位置
并在高级选项卡中重新定位模块。
- 位置：绝对
- 位置：右下角
2. 应用粘性效果
第 1 行中的图像模块
粘性设置
现在我们已经建立了我们的设计基础，是时候开始应用自定义粘性效果了。 打开第 1 行中的图像模块并按如下方式将模块粘住：
- 粘滞位置：粘在顶部
- 底部粘性限制：部分
- 从周围的粘性元素偏移：否
粘性尺寸
一旦应用了粘性设置，我们也可以更改模块的粘性样式。 我们要做的第一件事是在粘性状态下更改宽度。
- 粘性宽度：80%
粘性间距
接下来，我们将修改粘性顶部和底部填充。
- 粘性顶部填充：50vh
- 粘性底部填充：50vh
粘性渐变背景
我们还将为我们的模块应用粘性渐变背景。
- 颜色 1：#00336b
- 颜色 2：RGBA(41,196,169,0)
- 渐变类型：线性
- 梯度方向：90度
- 将渐变放在背景图像上方：是
过渡
并且为了确保平滑过渡，我们将增加模块的过渡持续时间。
- 转换持续时间：1500ms
第 2 行中的第 2 列
第 2 列粘性设置
接下来，我们还将把第二行的第二列设为粘性。
- 粘滞位置：粘在顶部
- 粘性顶部偏移：150px
- 底部粘性限制：部分
- 从周围的粘性元素偏移：否
- 过渡默认和粘性样式：否
粘性列中的文本模块
粘性背景色
现在，第 2 行的第 2 列已变为粘性，我们可以将一些粘性样式应用到此列内的文本模块。 首先更改粘性状态下的背景颜色。
- 粘性背景颜色：#333333
粘性文本颜色
接下来，修改粘性状态下的文本颜色。
- 粘性文本颜色：#ffffff
过渡
并通过在高级选项卡中增加过渡持续时间来完成模块设置。 就是这样！
- 转换持续时间：1000ms
预览
现在我们已经完成了所有步骤，让我们最后看看不同屏幕尺寸的结果。
桌面
移动的
最后的想法
在这篇文章中，我们向您展示了如何使用 Divi 的粘性选项发挥创意。 更具体地说，我们向您展示了如何将重叠与 Divi 的粘性选项结合起来，以创建轻松的过渡。 一旦您掌握了本教程中使用的方法，您将能够创建无穷无尽的不同变体。 您也可以免费下载 JSON 文件！ 如果您有任何问题或建议，请随时在下面的评论部分发表评论。
如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品，请确保订阅我们的电子邮件时事通讯和 YouTube 频道，这样您将永远是第一批了解此免费内容并从中受益的人之一。