如何使用转换后的运动形状作为 Divi 的背景

Divi 的新滚动效果可让您轻松地将您的网页设计体验提升到一个新的水平。 当然，您可以将其直接应用于您的部分中的元素，但您也可以选择向底层元素添加运动。 寻求底层方法可以让您在进行背景运动的同时保持内容静态。 在本教程中，我们将使用转换后的运动形状作为我们的基础元素来创建动画部分。 我们将处理两个不同的例子，但可能性确实是无穷无尽的。 您也可以免费下载 JSON 文件！

让我们开始吧。

预览

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

示例#1

桌面

移动的

示例#2

桌面

移动的

免费下载转换后的运动形状布局

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

下载文件

免费下载

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

下载

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

一般步骤

添加新部分

渐变背景

首先向您正在处理的页面添加一个新部分。 打开部分设置并应用渐变背景。

• 颜色 1：#ffffff
• 颜色 2：#97c6fc
• 渐变类型：线性
• 梯度方向：306deg
• 起始位置：50%
• 结束位置：50%

间距

转到该部分的设计选项卡并使用一些自定义边距和填充值。

• 左边距：4%
• 右边距：4%
• 顶部填充：11%
• 底部填充：11%

盒子阴影

我们也使用了一个微妙的盒子阴影。

• 框阴影模糊强度：80px
• 阴影颜色：rgba(0,0,0,0.1)
• 框阴影位置：外阴影

能见度

我们将通过将溢出设置为隐藏来完成部分设置。 这将确保当我们添加转换后的运动形状时，它们不会超出部分容器。

• 水平溢出：隐藏
• 垂直溢出：隐藏

添加新行

列结构

继续使用以下列结构向您的部分添加新行：

浆纱

在不添加任何模块的情况下，打开行设置并在大小设置中更改最大宽度。

• 最大宽度：1580px

第 1 列间距

我们也在第一列的间距设置中添加了一些顶部填充。

• 顶部填充：9%

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

添加 H2 内容

完成行设置后，就可以添加模块了，从第 1 列中的文本模块开始。添加一些您选择的 H2 内容。

H2 文本设置

转到模块的设计选项卡并相应地更改 H2 文本设置：

• 标题 2 字体：Abril Fatface
• 标题 2 文本颜色：#7206a0
• 标题 2 文字大小：80 像素（桌面）、65 像素（平板电脑）、50 像素（手机）

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

文字设置

在上一个文本模块的正下方添加另一个文本模块，其中包含您选择的一些描述内容。

文字设置

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

• 文字字体：Open Sans
• 文字颜色：#7206a0
• 文本行高：2em

将按钮模块添加到第 1 列

添加副本

我们在第 1 列中需要的最后一个模块是按钮模块。 输入您选择的一些副本。

按钮设置

然后，转到设计选项卡并相应地设置按钮样式：

• 为按钮使用自定义样式：是
• 按钮文字大小：20px
• 按钮文字颜色：#ffffff
• 按钮背景颜色：#077bff
• 按钮边框宽度：0px

• 按钮字体：Abril Fatface

间距

我们也添加了一些自定义填充值。

• 顶部填充：20px
• 底部填充：20px
• 左填充：50px
• 右填充：50px

将图像模块添加到第 2 列

上传图片

在行的第二列中，我们唯一需要的模块是图像模块。 上传您选择的插图。 如果您想使用我们在本教程中使用的确切版本，您可以在本文开头的下载文件夹中找到它。

结盟

接下来转到模块的设计选项卡并更改图像对齐方式。

• 图像对齐：右

浆纱

通过修改不同屏幕尺寸的宽度来完成模块设置。

• 宽度：100%（桌面），50%（平板电脑和手机）

重新创建示例 #1

将文本模块添加到第 1 列的顶部

一旦所有常规模块就位，就该添加转换后的运动形状了！ 我们将通过在第一列的顶部添加一个新的文本模块来重新创建第一个示例。 将内容框留空。

渐变背景

接下来为模块添加渐变背景。

• 颜色 1：rgba(255,255,255,0)
• 颜色 2：#00fff6
• 渐变类型：线性
• 梯度方向：306deg
• 起始位置：54%
• 结束位置：54%

浆纱

也修改大小设置。

• 宽度：165%
• 高度：270%

间距

然后，转到间距设置并使用一些自定义间距值。

• 下边距：1vw（桌面）、2vw（平板电脑）、3vw（手机）
• 顶部填充：29%
• 底部填充：29%

变换旋转

我们接下来要旋转模块。

• 左：270度

变换歪斜

我们还将应用变换偏斜值。

• 底部：16度
• 右：16度

位置

然后，转到高级选项卡并按如下方式修改位置设置：

• 位置：绝对
• 位置：左上角
• 垂直偏移：-50%
• 水平偏移：-50%

垂直运动滚动效果

接下来，我们将添加滚动效果，从一些垂直运动开始。

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

水平运动滚动效果

我们还将通过添加一些水平运动来完成模块设置！

• 启用水平运动：是
• 起始偏移：4
• 中间偏移：0（50%）
• 结束偏移：-4%

重新创建示例 #2

将文本模块添加到第 1 列的顶部

想要重新创建第二个示例吗？ 在第一列的顶部添加一个文本模块。

背景颜色

打开模块设置并应用背景颜色。

• 背景颜色：#00fff6

浆纱

转到模块的设计选项卡并更改大小设置。

• 宽度：165%
• 高度：270%

间距

我们也添加了一些自定义间距值。

• 下边距：1vw（桌面）、2vw（平板电脑）、3vw（手机）
• 顶部填充：29%
• 底部填充：29%

旋转倾斜

我们将在变换设置中应用变换倾斜效果。

• 右：-54度

位置

然后，我们将转到高级选项卡并更改模块的位置设置。

• 位置：绝对
• 位置：左上角
• 垂直偏移：-50%
• 水平偏移：-50%

垂直运动滚动效果

然后，我们将添加滚动效果。 从一些垂直运动开始。

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

水平运动滚动效果

我们还将通过添加一些水平运动来完成模块设置！

• 启用水平运动：是
• 起始偏移：4
• 中间偏移：0（50%）
• 结束偏移：-4

预览

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

示例#1

桌面

移动的

示例#2

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何创造性地将转换后的运动形状添加到您的部分设计中。 底层转换的运动形状有助于为您的部分设计添加微妙的动画。 您也可以免费下载 JSON 文件！ 如果您有任何疑问，请随时在下面的评论部分发表评论。

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