如何使用 Divi 创建双层背景滚动效果

如果您正在寻找一种让您的网站脱颖而出的方法，您可能想学习如何创建双层背景。 创建双层背景将有助于通过运动使您的背景图像栩栩如生。 在今天的教程中，我们将向您展示如何使用 Divi 创建双层背景设计。 本教程包含三个部分：

1. 在 Adob​​e Photoshop 中准备两个图像文件
2. 在 Divi 中创建设计
3. 应用滚动效果为背景设置动画

您还可以免费下载 JSON 和图像文件！

让我们开始吧。

预览

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

桌面

移动的

免费下载布局

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

下载文件

免费下载

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

下载

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

1. 在 Photoshop 中创建图像文件

选择背景干净的产品图片并在 Photoshop 中打开

在本教程的第一部分，我们将创建我们将在整个 Divi 教程中使用的图像文件。 要创建这些，我们将使用 Adob​​e Photoshop，但也可以随意使用您选择的任何其他图像编辑软件。 如果您使用的图像具有以下特征，则双层背景图像效果将发挥最佳效果：

1. 清晰地聚焦在图像内的物体上
2. 干净的背景

下图就是一个完美的例子。 您可以在本文下载区域共享的压缩文件夹中找到此图像文件。

复制图层

在 Photoshop 中打开图像后，克隆一次原始图层。 我们将处理复制层。

隐藏原始图层

为确保在我们向下移动教程时看到结果，请隐藏原始图层。

从图像中的对象选择创建 PNG

在板上使用快速选择工具

本教程总共需要两个图像文件：

1. 对象的 PNG，在这种情况下，是盘子
2. 没有对象的背景的 JPEG

我们将对象与其背景分开，因此我们可以在 Divi 环境中单独操作它们。

要开始选择对象，请选择工具栏中的“快速选择工具”并尝试覆盖尽可能多的对象。

选择 + 蒙版选择

您会注意到对象选择仍然不够好。 您可以在右键单击选择时使用“选择和遮罩”选项来微调选择的外观。 到达那里后，您可以调整不透明度、平滑度等。

从选择创建图层蒙版

虽然我们已经创建了一个平滑的选择，但对象内部仍有一些部分尚未选择。 我们将通过单击您可以在下面的打印屏幕中看到的图层蒙版按钮手动将这些部分添加到我们的选择中：

使用画笔微调蒙版内的选区

创建图层蒙版后，您可以开始使用画笔修改图层蒙版。 确保选择了图层蒙版。

• 使用黑色画笔 (#000) 将移除部分图层蒙版
• 使用白色画笔 (#fff) 将添加图层蒙版的背面部分

使用硬度不太高的刷子，因此您不必非常精确。

带彩色层的双重检查面具

您始终可以通过在其下方放置一个彩色图层来仔细检查图层蒙版。 如果你错过了一个地方，彩色图层会更容易泄露。

将 PNG 选区另存为单独的图像文件

创建新文件

现在您有了对象的 PNG 选择，您可以克隆整个图层，这样您就可以随时返回到它。 在下一部分中，我们将使用复制图层创建没有对象的背景图像。

我们对象的大小远小于初始文件大小，因此我们将为我们的对象创建一个新文件并将其带过来。

在新文件中适合选择

将图层及其图层蒙版复制粘贴到您创建的新文件中。

导出为 Web

并将其导出为 PNG 格式的网页。

压缩图像文件

具有透明背景的 PNG 往往具有更大的文件大小，因此建议您使用您选择的工具压缩文件。

删除原始图像中的对象

选择图层蒙版

回到最初的 Photoshop 文件！ 在那里，我们将创建没有对象的背景图像。 我们使用文件中的顶层来做到这一点。 首先，确保选择了图层蒙版。

反转蒙版

然后，转到该图层的属性并单击“反转”。

应用图层蒙版

您现在会注意到对象在初始层内是透明的。 我们将通过右键单击并选择“应用图层蒙版”将图层蒙版应用于我们的图层。

使用克隆工具填充空白空间

我们中间还有一个洞，我们需要把它填满。 这就是克隆工具派上用场的地方。 选择您选择的画笔大小并填充图像。 你不需要非常精确，在 Divi 教程中，我们将把对象放在它上面。

保存没有对象的图像

导出为 Web

完成不含对象的背景图像后，您可以将其保存为 70% 质量的 JPEG 文件。

压缩图像文件

确保也压缩此图像。

2.在Divi中构建双层背景效果

添加新部分

上传背景图片

一旦您拥有两个图像文件，就可以切换到 Divi！ 打开一个新页面并添加一个新部分。 上传您在本教程的第一部分中创建的背景图片。

间距

转到该部分的设计选项卡并应用一些自定义间距值。 我们添加的底部边距将帮助我们看到效果是否到位。 通常，此余量将被设计中的下一部分替换。

• 底边距：100vh
• 顶部填充：
  • 桌面：100px
  • 平板电脑和手机：50px
• 底部填充：
  • 桌面：100px
  • 平板电脑：600px
  • 电话：500px

添加第 1 行

列结构

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

浆纱

还没有添加模块，打开行设置并更改宽度和最大宽度。 这些设置将允许行始终接触节容器的左侧和右侧。 这样，我们可以确保 PNG 和背景图像在所有屏幕尺寸上具有相同的平衡。

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

间距

接下来转到行的间距设置并删除所有默认的顶部和底部填充。

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

位置

然后，重新定位整行。

• 位置：绝对
• 地点：
  • 桌面：中心
  • 平板电脑和手机：中央底部
• 垂直偏移：
  • 桌面： /
  • 平板电脑和手机：30vh

将图像模块添加到行

上传PNG图片

完成行设置后，将图像模块添加到该行并上传您在本教程的第一部分中创建的 PNG 文件。

结盟

移至设计选项卡并更改图像对齐方式。

• 图像对齐：居中

浆纱

接下来更改大小设置。

• 宽度：
  • 台式机：36%
  • 平板电脑和手机：60%

添加第 2 行

列结构

然后，使用以下列结构向该部分添加另一行：

背景颜色

打开行设置并更改背景颜色。

• 背景颜色：#ffffff

浆纱

接下来修改大小设置。

• 宽度：90%
• 最大宽度：550px
• 行对齐：
  • 桌面：左
  • 平板电脑和手机：中心

间距

然后，应用一些自定义填充值。

• 顶部填充：11%
• 底部填充：11%
• 左填充：5%
• 右填充：5%

水平偏移

我们也在位置设置中添加了一些水平偏移。

• 水平偏移：
  • 台式机：5%
  • 平板电脑和手机：0%

将文本模块 #1 添加到第 1 列

添加 H2 内容

是时候添加模块了，从包含一些 H2 内容的第一个文本模块开始。

H2 文本设置

H2 文本的样式如下：

• 标题 2 字体：Kumbh Sans
• 标题 2 文字大小：
  • 桌面：90px
  • 平板电脑：60px
  • 电话：45px

将文本模块 #2 添加到第 1 列

添加说明内容

在上一个文本模块的正下方添加另一个文本模块，并插入一些您选择的描述内容。

文字设置

相应地更改模块的文本设置：

• 文字字体：Kumbh Sans
• 文本行高：2em

将按钮模块添加到第 1 列

添加副本

本专栏中我们需要的最后一个模块是按钮模块。 添加一些您选择的副本。

按钮设置

相应地设置按钮样式：

• 为按钮使用自定义样式：是
• 按钮文字大小：20px
• 按钮文字颜色：#6b6443
• 按钮边框宽度：0px
• 按钮边框半径：0px

• 按钮字体：Kumbh Sans
• 按钮字体粗细：粗体
• 显示按钮图标：是
• 按钮图标位置：左
• 仅在悬停按钮时显示图标：否

盒子阴影

还包括一个框阴影。

• 框阴影水平位置：0px
• 框阴影垂直位置：2px
• 阴影颜色：#6b6443

3. 添加滚动效果

图像垂直运动

在本教程的最后一部分，我们将重点介绍向包含 PNG 图像文件的图像模块添加滚动效果。 打开模块的设置，导航到高级选项卡并应用以下垂直运动设置：

• 启用垂直运动：是
• 起始偏移：
  • 桌面：0
  • 平板电脑和手机：4（0%）
• 中间偏移：
  • 桌面：0
  • 平板电脑和手机：0（97%）
• 结束偏移：
  • 桌面：0
  • 平板电脑和手机：-2（100%）

图像水平运动

我们正在使用以下水平运动设置完成我们的设计：

• 启用水平运动：是
• 起始偏移：
  • 桌面：0（在 0% 时）
  • 平板和手机：0
• 中间偏移：
  • 桌面：0（65%）
  • 平板电脑和手机：0（97%）
• 结束偏移：
  • 桌面：-10（100%）
  • 平板和手机：0

预览

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

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何创建双层背景，并使用 Divi 的内置滚动效果为其设置动画。 在教程的第一部分，我们已经在 Adob​​e Photoshop 中准备了图像文件。 在本教程的第二部分，我们专注于使用 Divi 中的图像文件来创建响应式设计。 您也可以免费下载 JSON 文件！ 如果您有任何问题或建议，请随时在下面的评论部分发表评论。

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