WordPress divi主题

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

| 5月 15, 2022 | Divi主题使用教程 | 0 条评论

5分钟生成10篇英文软文article forge软件试用

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

google广告开户

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

抢先看

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

视差背景

视差背景

视差背景

视差背景

视差背景

入门

订阅我们的 Youtube 频道

WordPress divi主题

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

视差背景

准备新页面

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

现在你准备好了!

基本理念

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

这是如何做到的。

创建全角标题部分

首先,您需要创建一个新的全角部分,然后将全角标题模块添加到该部分。

视差背景

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

作品名称:《番茄汁》
按钮 #1 链接文本:“查看食谱”
内容:“您的内容放在这里。 在内联或模块内容设置中编辑或删除此文本。”
形象标识: [see screenshot] (图像为 240 像素 x 300 像素)

fiverr建站WordPress程序员

视差背景

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

背景颜色: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 Parallax 方法。

视差背景

JasperAI 10000字免费额度试用

复制部分

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

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

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

检查结果。

视差背景

使用具有 CSS 视差过渡的不同背景图像

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

WordPress备份工具updrafplus

视差背景

为四个部分中的每一个部分设置不同的背景图像(使用 CSS 视差)后,查看结果。

视差背景

使用具有真正视差过渡的不同背景图像

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

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

视差背景

然后你需要对剩下的三个部分做同样的事情。 或者您可以简单地右键单击视差方法选项并选择“扩展视差方法”到整个页面的所有全角标题模块。

视差背景

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

视差背景

探索不同的模块对齐方式

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

要使模块居中,请打开全角标题设置并更新 模块对齐居中.

视差背景

要将模块与页面右侧对齐,只需更新 模块对齐 到右对齐。

确定对齐方式后,您可以简单地将“模块对齐方式”样式扩展到整个页面的其余标题模块。

这是一个使用静态背景居中对齐的示例(每个具有 CSS 视差的相同背景图像)。

视差背景

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

视差背景

以下是使用 True Parallax 方法对不同背景图像进行居中对齐的示例。

视差背景

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

视差背景

最后的想法

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

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

干杯!

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题