如何在 Divi 中创建用于吸引应用程序插图的扩展层滚动效果

在您的网站上展示任何应用程序或产品不必仅限于静态图像或图形。 借助 Divi 的滚动效果，您可以通过添加吸引访问者的微妙而有效的动画，使应用插图栩栩如生。 在本教程中，我们将发现一种在 Divi 中创建扩展层滚动效果的简单方法。 所需要的只是具有相同尺寸的三张图像（或屏幕截图）以及 Divi builder 的所有内置魔法。

让我们开始吧。

抢先看

免费下载布局

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

下载文件

免费下载

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

下载

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

要将布局导入您的页面，只需提取 zip 文件并将 JSON 文件拖到 Divi Builder 中。

让我们进入教程，好吗？

你需要什么开始

首先，您需要执行以下操作：

1. 如果您还没有安装并激活 Divi 主题。
2. 在WordPress中新建一个页面，在前端使用Divi Builder编辑页面（visual builder）。
3. 选择“从头开始构建”选项。

之后，您将有一个空白画布开始在 Divi 中进行设计。

在 Divi 中为引人入胜的应用程序插图创建扩展层滚动效果

添加行

让我们从添加 2 列（二分之一）的行开始。

向节添加临时边距

为了以后能够预览滚动效果，请按如下所示为该部分添加一些顶部和底部边距：

• 边距：80vh 顶部，80vh 底部

添加 3 个图像作为图层

我们将创建三个图像作为应用程序插图的三层。 这个想法是使用三个相同大小/尺寸的应用程序功能图像（或屏幕截图），以便图像完美地相互叠加。 然后我们将使用 Divi 滚动效果移动三个图层。

让我们从第一张图片开始。

创建图像 1

将图像模块添加到左列。

然后将第一张图片上传到模块。 请记住确保所有三个图像都具有相同的尺寸。 这是 500 像素 x 1050 像素。

图 1 设置

打开图像模块设置并更新以下内容：

宽度和边距

• 宽度：300px（桌面和平板电脑），150px（手机）
• 模块对齐方式：左
• 边距：0px 底部

边界

• 圆角：40px
• 边框宽度：15px
• 边框颜色：#ffffff

盒子阴影

• 盒子阴影：见截图
• 框阴影垂直位置：0px
• 框阴影模糊强度：48px
• 阴影颜色：rgba(0,0,0,0.2)

创建图像 2

要创建图像 2，请复制图像 1。

然后使用相同尺寸（500 像素 x 1050 像素）的新图像更新重复的图像模块。

图 2 设置

然后通过更新以下内容取出边框：

边界

• 边框宽度：0px

我们不需要此图像的边框，但我们确实需要用填充替换边框间距以确保图像无缝堆叠。

填充

• 填充：顶部 15 像素，底部 15 像素，左侧 15 像素，右侧 15 像素

位置

然后将图像 2 的位置更新为绝对。 这将使图像完美地重叠图像 1。

• 位置：绝对

有关更多信息，请查看我们关于如何在 Divi 中使用绝对位置的完整帖子。

滚动效果

现在是时候添加滚动效果，在向下滚动页面时移动我们的图层（图 2）。

更新滚动效果如下：

在垂直运动选项卡下...

• 启用垂直运动：是
• 起始偏移：0（在 0% 视口处）
• 中间偏移：0（在 0% 视口处）
• 结束偏移：-1（在 100% 视口处）

在水平运动选项卡下...

• 启用水平运动：是
• 起始偏移：0（在 0% 视口处）
• 中间偏移：1（在 50% 视口处）
• 结束偏移：-1.5（在 100% 视口处）

在淡入淡出选项卡下...

• 启用淡入淡出：是
• 起始不透明度：0%（在 0% 视口处）
• 中等不透明度：100%（在 10%-15% 视口处）
• 结束不透明度：70%（在 30% 视口处）

创建图像 3

将所有滚动效果添加到图像 2 后，我们就可以创建图像 3。

打开构建器底部的设置菜单，然后选择图层按钮以部署图层弹出窗口。 然后在第 1 列内复制图像模块 2 以创建图像 3。为此使用图层功能很有帮助，因为很难选择重叠的模块。

现在打开复制图像（图像 3）的设置并上传新图像。 确保保持相同的尺寸（500 像素 x 1050 像素）。

图 3 滚动效果

在高级选项卡下，更新图像 3 的滚动效果选项。

在“垂直运动”选项卡下，按如下方式更新垂直运动偏移：

• 结束偏移：-2（在 100% 视口处）

在Horizo​​ntal Motion选项卡下，按如下方式更新 Horizo​​ntal Motion：

• 中间偏移：2（在 50% 视口处）
• 结束偏移：3（在 100% 视口处）

在淡入和淡出选项卡下，更新淡入和淡出设置如下：

• 起始不透明度：5%（在 0% 视口处）
• 中等不透明度：100%（在 30%-40% 视口处）
• 结束不透明度：100%（在 50% 视口处）

结果

查看到目前为止的结果。

将变换倾斜添加到第 1 列

这是一个很好看的效果，但我们将倾斜列以创建更多的 3D 效果。

打开第 1 列的设置并添加如下变换倾斜：

变换倾斜（X 和 Y 轴）：8deg

这将在扩展层上创建一个很好的 3d 效果。

就是这样！

可选：将 CTA 添加到第 2 列

现在我们可以使用一些免费的滚动效果将任何标题和按钮（或任何 CTA）添加到右列。 查看上面此布局的免费下载，以在此插图中获得相同的 CTA。

最后结果

这是最终结果。

这是它在平板电脑和手机上的堆叠方式。

使用 Divi 布局包中的图像

本教程中使用的图像是来自 Shutterstock 的模拟图像，并且在我们的滚动效果演示页面上也有展示。

要更改设计以满足您自己的需要，您可以使用我们免费布局包中的图像或创建您自己的屏幕截图。 这是使用移动应用布局包中的图像的示例设计。 我还添加了渐变背景来补充用于扩展层的浅色图像。

几分钟后，我们就有了完全不同的设计！

最后的想法

扩展层滚动效果是展示应用程序或产品的优雅解决方案，无需求助于更复杂的 CSS 技术或照片编辑。 而且，您可以使用相同的技术来说明任何事情。 我喜欢使用 Divi 中的一个简单选项为您自己切换图像并倾斜整个图像/图层集合是多么容易。 希望这会给您一些灵感，使您能够创造出令人惊叹的 Divi 设计。

我期待在评论中收到您的来信。

干杯!