如何使用 Divi 在 Scroll 上讲述您的故事

您的关于页面是您网站上最重要的页面之一。 它可以让人们更好地了解你，并决定他们是否愿意采取下一步行动。 如果您正在寻找一种流畅的方式在您的关于页面中包含讲故事的内容，那么您会喜欢本教程。 我们将使用 Divi 的滚动效果在滚动时创建平滑的讲故事过渡。 一旦故事的一部分淡出，另一部分就会淡入。这让访问者感觉他们正在阅读一个有趣的故事。 您也可以免费下载 JSON 文件！

让我们开始吧。

预览

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

桌面

移动的

订阅我们的 YouTube 频道

免费下载关于滚动布局的关于页面故事

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

下载文件

免费下载

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

下载

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

1. 创建页面的第一个全屏部分

添加新部分

背景颜色

首先将第一部分添加到您的关于页面。 打开部分设置并将背景颜色更改为黑色。

• 背景颜色：#000000

浆纱

接下来通过在大小设置中添加最小高度来全屏显示该部分。

• 最小高度：100vh

2. 添加动画行

添加新行

列结构

然后，使用以下列结构向您的部分添加一个新行：

浆纱

打开行设置并通过修改大小设置允许行占据整个节容器的宽度。

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

间距

然后，在不同的屏幕尺寸上添加一些左右填充。

• 左填充：20vw（台式机），10vw（平板电脑和手机）
• 右填充：20vw（台式机）10vw（平板电脑和手机）

动画片

为了增加讲故事的效果，我们还将为行使用淡入淡出动画。

• 动画风格：淡入淡出
• 动画持续时间：3000ms
• 动画速度曲线：渐入渐出
• 动画重复：一次

位置

最后但并非最不重要的一点是，我们将通过修改位置选项来确保行位于节容器内的中心位置。

• 位置：绝对
• 地点：中心

3. 插入带有滚动效果的标题

将文本模块 #1 添加到列

添加H1内容

我们在这一行中唯一需要的模块是带有一些 H1 内容的文本模块。

标题 1 文本设置

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

• 标题字体：Nunito
• 标题字体粗细：半粗体
• 标题文字颜色：#ffffff
• 标题文字大小：7vw（桌面）、9vw（平板电脑）、11vw（手机）

垂直运动

我们也会添加一个微妙的垂直动画。

• 启用垂直运动：是
• 起始偏移：0（50%）
• 中间偏移：10（100%）
• 结束偏移：10

淡入淡出滚动效果

随着淡入淡出效果。

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

放大和缩小滚动效果

最后但并非最不重要的一点，我们还将使用缩放滚动效果。

• 启用向上和向下扩展：是
• 起始比例：100%（40%）
• 中等规模：95%（74%）
• 结束比例：90%

4.克隆整个部分一次并包括具有滚动效果的描述文本

更改内容标题和复制

完成第一部分后，您可以完全克隆它。 打开复制部分容器内的文本模块并使用一些 H2 副本。

修改文本模块 H2 文本设置

相应地更改 H2 文本设置：

• 标题 2 字体：Nunito
• 标题 2 字体粗细：半粗体
• 标题 2 文本颜色：#ffffff
• 标题 2 文字大小：5vw（桌面）、7vw（平板电脑）、8vw（手机）
• 标题 2 行高：1em（桌面），1.2em（平板电脑和手机）

将文本模块 #2 添加到列

添加内容

接下来，将另一个文本模块添加到具有您选择的一些描述内容的列中。

文字设置

更改文本模块的文本设置如下：

• 文字字体：Open Sans
• 文字颜色：#ffffff
• 文字大小：1vw（桌面）、2.5vw（平板电脑）、3vw（手机）
• 文本行高：3.1em（桌面），2.5em（平板电脑和手机）

间距

也使用一些上边距。

• 最高利润率：8vw

淡入淡出滚动效果

然后，转到高级选项卡中的滚动效果并使用以下淡入淡出设置：

• 启用淡入淡出：是
• 起始不透明度：100%
• 中等不透明度：0%（31%）
• 最终不透明度：0%（在 35% 时）

放大和缩小滚动效果

也添加缩放效果。

• 启用向上和向下扩展：是
• 起始比例：100%（40%）
• 中等规模：95%（74%）
• 结束比例：90%

5.根据需要克隆第二部分

随时更改内容

完成页面上的第二部分后，您可以根据您的“关于”页面的故事情节复制任意多次。 确保更改每个部分中的内容。

6. 带有 CTA 部分的完整页面

更改描述文本模块间距

在最后使用 CTA 部分完成关于页面。 打开描述文本模块，修改上下边距。

• 最高利润率：4vw
• 底边距：4vw

添加按钮模块

添加副本

然后，添加一个按钮模块以及您选择的一些副本。

按钮设置

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

• 为按钮使用自定义样式：是
• 按钮文字大小：1vw（桌面）、2.5vw（平板电脑）、3.5vw（手机）
• 按钮文字颜色：#000000
• 按钮背景颜色：#FFFFFF
• 按钮边框宽度：0px

• 按钮边框半径：100px
• 按钮字体：Nunito
• 按钮字体粗细：粗体

间距

通过在不同屏幕尺寸上添加一些自定义填充值来完成按钮模块设置。

• 顶部填充：1vw（桌面）、2vw（平板电脑）、3vw（手机）
• 底部填充：1vw（桌面）、2vw（平板电脑）、3vw（手机）
• 左填充：3vw（桌面）、6vw（平板电脑）、8vw（手机）
• 右填充：3vw（桌面）、6vw（平板电脑）、8vw（手机）

预览

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

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何使用 Divi 的内置滚动效果在“关于”页面上讲述故事。 我们创建的效果允许连续复制淡入淡出，给访问者一种他们正在阅读故事的印象。 您也可以免费下载 JSON 文件！ 如果您有任何问题或建议，请随时在下面的评论部分发表评论。

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