在 Divi 中创建具有视差背景图像转换的全屏布局

创建具有全屏部分的网页是通过跨越浏览器的整个宽度和高度的平滑过渡和干净的部分布局来改善用户体验的好方法。 通常，这适用于一次展示一个部分的产品或服务，允许用户在向下滚动页面时轻松地专注于每个部分。 这种类型的设计也非常适合与内容相关的背景图像，并提供漂亮的设计口音。 如果您想获得一点创意，可以在背景图像中添加一些视差功能，以便在从一个全屏部分滚动到另一个部分时创建一些非常独特的过渡。

在本教程中，我将向您展示如何在 Divi 中向全屏页面布局添加一些视差背景图像过渡。 这个过程很简单，你可以用它创造一些强大的结果。

抢先看

看看我们将一起构建的一些设计。

入门

订阅我们的 YouTube 频道

对于本教程，您只需要 Divi 和一组用于不同产品图像和背景图像的图像。 我正在使用我们果汁店布局包中的图像。 您可以在包含此布局包的博客文章底部下载带有这些图像的 zip 文件。 只需单击“下载完整分辨率图像资产”按钮。

准备你的新页面

准备好图像后。 创建一个新页面并为您的页面命名。 然后部署 Divi Builder 并选择“从头开始构建”。 然后单击按钮在前端构建。

现在你可以开始了！

基本理念

这个概念背后的基本思想涉及堆叠多个全宽部分，每个部分都有一个全宽头模块。 每个标题模块都有一个自定义宽度，可以在显示部分背景时向左、居中或向右对齐。 然后每个部分都给出一个具有一定视差方法的背景图像。 当您向下滚动页面时，这会创建不同的背景图像过渡效果。

这是如何做到的。

创建全角标题部分

首先，您需要创建一个新的全角部分，然后向该部分添加一个全角头模块。

使用以下内容更新全角标题设置：

作品名称：《番茄汁》
按钮 #1 链接文本：“参见食谱”
内容：“您的内容在这里。 内联或在模块内容设置中编辑或删除此文本。”
标志图片：[见截图]（图片为 240 像素 x 300 像素）

现在继续更新您的标题设计，如下所示：

背景颜色：rgba(255,255,255,0.92)

全屏显示：是

显示向下滚动按钮：是
图标：见截图
向下滚动图标颜色：#222222

文字颜色：深色

标题标题级别：H2
标题字体：Raleway
标题文字大小：50px

正文字体：Lato
正文文字大小：16px
正文字母间距：1px

按钮一文本大小：16px
按钮 fOne 文本颜色：#ffffff
按钮一背景颜色：#222222
按钮一边框半径：50px
按钮一个字母间距：2px
按钮一字体样式：TT

宽度：45%（桌面）、60%（平板电脑）、100%（智能手机）

保存设置。

这里的主要关键设计元素是“制作全屏”选项和“宽度：45%”。 这将允许该部分始终跨越浏览器窗口的整个宽度和高度。 自定义宽度会缩小标题模块以显示我们接下来要添加的部分背景。

添加栏目背景

现在我们已经设计了我们的头模块，我们可以添加我们的部分背景图像。 转到全角部分设置并添加背景图像。 确保它足够大以跨越浏览器窗口的整个宽度和高度。 然后选择使用 CSS 视差方法。

复制部分

由于每个部分都将显示新内容，因此我们需要将全角部分复制三遍，以便您的页面上总共有四个部分，每个部分都有一个标题模块。

使用具有 CSS 视差的相同部分背景图像创建静态背景图像

现在我们有四个相同的部分，我们可以使用新的徽标图像和标题更新全角标题内容，以便更好地了解设计。 但是，如果我们对所有四个部分使用 CSS 视差保持相同的背景图像，结果是静态背景图像在您滚动到不同的全屏部分时保持原位。 由于我们在每个标题上都使用了向下滚动按钮，因此用户可以选择单击箭头以清晰地滚动到每个新部分。

检查结果。

在 CSS 视差转换中使用不同的背景图像

为每个部分使用不同的背景图像（带有 CSS 视差）将在您滚动时改变设计的感觉。 由于我们已经为四部分背景图像启用了 CSS 视差，因此我们需要做的就是将每个图像更改为不同的内容。 在这种情况下，我只是添加产品的大版本作为每个部分的背景图像。

一旦您为四个部分中的每一个都设置了不同的背景图像（使用 CSS 视差），请查看结果。

使用具有真实视差转换的不同背景图像

如果你想改变背景图像的过渡效果，你可以将所有四个部分背景图像的视差方法从 CSS 更改为 True Parallax。

打开部分设置之一并将 CSS 方法更改为“True Parallax”。

然后，您需要对其余三个部分执行相同的操作。 或者您可以简单地右键单击视差方法选项并选择“扩展视差方法”到整个页面的所有全角标题模块。

完成后，检查背景图像过渡效果。

探索不同的模块对齐方式

更改全角标题模块的对齐方式轻而易举。 由于我们的全角标题模块具有 45% 的自定义宽度，因此您可以轻松地将模块对齐方式调整为左、中或右以获得不同的布局。 我特别喜欢带有静态背景的居中对齐。

要使模块居中，请打开 fullwidth header 设置并将Module Alignment更新为Centered 。

要将模块与页面右侧对齐，只需将模块对齐方式更新为右对齐即可。

一旦你确定了对齐方式，你可以简单地将“模块对齐”样式扩展到整个页面的其余标题模块。

这是一个带有静态背景的居中对齐示例（每个具有 CSS 视差的相同背景图像）。

这是使用 CSS 视差方法对不同背景图像进行居中对齐的示例。

以下是使用真实视差方法对不同背景图像进行居中对齐的示例。

这是使用 css 和真实视差的组合与不同背景图像右对齐的示例。

最后的想法

当与全屏部分和自定义标题模块结合使用时，这些背景图像过渡确实看起来很棒。 功能简洁，设计微妙而独特。 如果有的话，这是为您的内容创建静态背景的一种快速简便的方法。 随意使用背景渐变、字体和图像探索更高级的设计！

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

干杯!