如何在滚动上与 Divi 同步扩展副本

当某个部分的重点放在副本上时，确保副本不会被忽视很重要。 您可以使用多种技术将您的副本置于聚光灯下，但在本教程中，我们将向您展示如何使用 Divi 的新滚动效果在滚动时同步扩展副本。 当用户滚动时，副本的另一部分将出现，允许他们逐步阅读您提供的内容。 您也可以免费下载 JSON 文件！

让我们开始吧。

预览

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

桌面

移动的

免费下载滚动布局上的扩展副本

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

下载文件

免费下载

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

下载

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

1. 创建截面设计

添加新部分

背景颜色

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

• 背景颜色：#151515

间距

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

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

添加第 1 行

列结构

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

浆纱

在不添加任何模块的情况下，打开行设置并修改大小设置如下：

• 使用自定义装订线宽度：是
• 天沟宽度：1
• 宽度：90%
• 最大宽度：1380px

间距

接下来添加一些自定义的顶部和底部填充。

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

将文本模块 #1 添加到列

添加内容

然后，添加具有您选择的一些内容的第一个文本模块。

文字设置

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

• 文字字体：Livvic
• 文字字体粗细：粗体
• 文字颜色：#f1f1f1
• 文字大小：170 像素（桌面）、100 像素（平板电脑）、70 像素（手机）
• 文本行高：1em

• 文字阴影水平长度：0.06em
• 文字阴影垂直长度：0em
• 文字阴影颜色：rgba(79,79,79,0.74)
• 文本对齐方式：居中（桌面），左侧（平板电脑和手机）

克隆文本模块两次

克隆文本模块两次。

更改内容

修改两个重复文本模块的内容。

添加第 2 行

列结构

使用以下列结构在前一行的正下方添加另一行：

浆纱

打开行设置并相应地更改大小设置：

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

间距

接下来删除该行的默认顶部和底部填充。

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

边界

接下来添加一个顶部边框。

• 顶部边框宽度：1px
• 顶部边框颜色：#4c4c4c

列设置

间距

我们也在对列设置进行一些更改。 打开设置并添加一些自定义填充值。

• 顶部填充：5vw
• 底部填充：10vw
• 左填充：6vw
• 右填充：6vw

边界

也使用右边框。

• 右边框宽度：1px
• 右边框颜色：#4c4c4c

将 Blurb 模块添加到第 1 列

添加内容

继续将 Blurb 模块添加到具有您选择的某些内容的列中。

选择图标

接下来选择您选择的图标。

图标设置

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

• 图标颜色：#a3acff
• 图像/图标对齐方式：左

标题文字设置

也修改标题文本设置。

• 标题字体：Livvic
• 标题字体粗细：粗体
• 标题文字颜色：#c1c1c1
• 标题文字大小：35px

• 标题文字阴影水平长度：0.06em
• 标题文字阴影垂直长度：0em
• 标题文字阴影颜色：rgba(79,79,79,0.74)

正文设置

我们也在对正文设置进行一些更改。

• 正文颜色：#878787
• 正文文字大小：16px
• 车身线高：2.4em

模糊标题 CSS

我们将使用一行 CSS 代码在标题周围创建一些空间，我们将添加到高级选项卡中的模糊标题中。

margin: 30px 0 40px 0;

克隆整个列两次

完成整个列和其中的 Blurb 模块后，您可以克隆整个列两次。

删除第 3 列边框

打开第 3 列设置并删除右边框。

• 右边框宽度：0px

更改内容

并为每个副本更改 Blurb 模块内容。

2. 添加滚动效果

部分

放大和缩小

是时候添加滚动效果了，从部分开始。 使用具有以下值的缩放滚动效果：

• 启用向上和向下扩展：是
• 起始比例：70%
• 中等规模：100%
• 结束比例：100%

文本模块 #1

淡入淡出

然后，打开部分第一行中的第一个文本模块并添加淡入淡出效果。

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

放大和缩小

也使用缩放效果。

• 启用向上和向下扩展：是
• 起始比例：0%（47%）
• 中档：100%（56%）
• 结束比例：100%（64%）

扩展文本模块 #1 滚动效果

继续将滚动效果扩展到列中的其他两个文本模块。

• 至：所有文本
• 全文：本专栏

模糊模块 #1

放大和缩小

接下来，我们将向第 1 列中的 Blurb 模块添加缩放滚动效果。

• 启用向上和向下扩展：是
• 起始规模：
  • 台式机：0%
  • 平板电脑和手机：100%
• 中等规模：100%（33%）
• 结束比例：100%（64%）

扩展模糊模块 #1 滚动效果

通过将滚动效果扩展到行中的所有 Blurb 模块来完成教程，您就大功告成了！

• 至：所有模糊
• 整个：这一行

预览

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

桌面

移动的

最后的想法

在本教程中，我们向您展示了一种在 Divi 部分同步扩展副本的创造性方法。 这是突出显示副本并允许访问者逐步阅读您部分的不同部分的好方法。 您也可以免费下载 JSON 文件！ 如果您有任何问题或建议，请随时在下面的评论部分发表评论。

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