如何使用微妙的运动形状标记新的 Divi 部分

您可以通过多种方式让访问者意识到他们正在移动到您页面上的其他部分。 在 Divi 中，您可以立即使用范围广泛的分区分隔器。 但是，如果您正在寻找一种更生动的方式来表达清楚，那么您会喜欢本教程。 我们将向您展示如何使用微妙的运动形状标记新的 Divi 部分。 我们将使用 Divi 的内置选项创建这些形状，并使用 Divi 的滚动效果为它们添加运动。 可能性是无限的，但我们将分享您可以立即使用的三个设计示例。 您也可以免费下载 JSON 文件！

让我们开始吧。

预览

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

示例#1

桌面

移动的

示例#2

桌面

移动的

示例 #3

桌面

移动的

免费下载微妙的运动形状布局

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

下载文件

免费下载

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

下载

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

一般步骤

上传艺术画廊登陆页面布局

在本教程中，我们将使用 Art Gallery Layout Pack，但您可以将该技术应用于您正在构建的任何类型的网站。 添加新页面并上传布局包的登录页面。

将新行添加到部分 #1 的底部

列结构

现在，我们将完成一些适用于本教程开头显示的所有三个示例的基本步骤。 首先，使用以下列结构在页面第一部分的底部添加一个新行：

浆纱

打开行设置并更改大小设置如下：

• 使用自定义装订线宽度：是
• 天沟宽度：1
• 宽度：100%
• 最大宽度：100%

间距

也修改边距和填充值。

• 最高利润率：10vw
• 顶部填充：0px
• 底部填充：0px

删除部分 #1 底部填充

为了确保行和运动形状出现在该部分的底部，我们需要删除该部分的底部填充。

• 底部填充：0vw

重新创建示例 #1

添加分频器模块 #1

能见度

完成一般步骤后，就可以开始重新创建不同的示例，从第一个示例开始。 添加第一个分隔线模块并确保启用“显示分隔线”选项。

• 显示分隔线：是

线

移至模块的设计选项卡并更改线条颜色。

• 线条颜色：#ffa100

浆纱

也修改模块的大小设置。

• 分隔线重量：50px
• 高度：50px

间距

然后，转到间距设置并添加一些自定义边距和填充值。

• 左边距：-200px（仅限平板电脑和手机）
• 右边距：-200px（仅限平板电脑和手机）
• 左填充：15vw
• 右填充：15vw

变换歪斜

我们还将通过在转换设置中添加底部倾斜值来稍微转换模块。

• 底部：60度

水平运动滚动效果

是时候为我们的模块添加不同的滚动效果了！ 首先，我们将添加一些水平运动。

• 启用水平运动：是
• 起始偏移：0
• 中间偏移：0（80%）
• 结束偏移：
  • 台式机：20（85%）
  • 平板电脑和手机：5（85%）

淡入淡出滚动效果

我们还将添加淡入淡出效果。

• 启用淡入淡出：是
• 起始不透明度：0%
• 中等不透明度：0%（36%）
• 结束不透明度：100%（40%）

放大和缩小滚动效果

我们将通过添加缩放效果来完成模块设置。

• 启用向上和向下扩展：是
• 起始比例：20%
• 中等规模：50%（69%）
• 结束比例：100%（73%）

克隆分隔器模块 #1

完成分隔器模块后，您可以克隆它。

修改线条颜色

打开复制模块的设置并更改线条颜色。

• 线条颜色：#24252d

修改间距

也修改模块的间距值。

• 左边距：-200px（仅限平板电脑和手机）
• 右边距：-200px（仅限平板电脑和手机）
• 左填充：25vw
• 右填充：25vw

修改水平运动滚动效果

然后，进入高级选项卡中的滚动效果，修改水平运动滚动效果的结束偏移。

• 结束偏移：
  • 桌面：-20
  • 平板电脑和手机：-5

重新创建示例 #2

添加分频器模块 #1

能见度

如果您更愿意重新创建第二个示例，请继续将第一个分隔模块添加到您部分的最后一行。 确保启用了“显示分隔线”选项。

• 显示分隔线：是

线

接下来修改模块的线条颜色。

• 线条颜色：#ffa100

浆纱

也更改大小设置。

• 分隔线重量：200px
• 宽度：200px
• 模块对齐：居中
• 高度：200px

边界

接下来，我们将通过添加一些边框半径将模块变成一个圆形。

• 所有角落：200px

水平运动滚动效果

是时候添加滚动效果了！ 我们使用的第一个效果是水平运动。

• 启用水平运动：是
• 起始偏移：-2
• 中间偏移：0
• 结束偏移：
  • 桌面：20
  • 平板电脑和手机：5

放大和缩小滚动效果

接下来，我们还将启用缩放效果。

• 启用向上和向下扩展：是
• 起始比例：20%
• 中等规模：100%
• 结束比例：100%

克隆分频器模块

继续克隆整个分频器模块。

更改线条颜色

打开副本并更改线条颜色。

• 线条颜色：#24252d

修改间距

也添加一些上边距。

• 上边距：-200px

更改水平运动滚动效果

然后，转到水平运动滚动效果设置并更改结束偏移。

• 结束偏移：
  • 桌面：-20
  • 平板电脑和手机：-5

重新创建示例 #3

添加行填充

继续下一个也是最后一个例子！ 首先打开您在本教程的一般步骤中创建的行，然后更改间距设置中的填充值。

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

添加分频器模块 #1

能见度

将新的分隔线模块添加到您部分的最后一行并隐藏分隔线。

• 显示分隔线：否

渐变背景

接下来添加渐变背景。

• 颜色 1：#ffa100
• 颜色 2：#f77f00
• 渐变类型：线性
• 梯度方向：121deg

浆纱

转到模块的设计选项卡并按如下方式更改大小设置：

• 宽度：200px
• 模块对齐：居中
• 高度：0px

间距

接下来我们将添加一些自定义的顶部和底部填充。

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

水平运动滚动效果

现在，是时候添加滚动效果了，首先是在不同屏幕尺寸上进行一些水平运动。

• 启用水平运动：是
• 起始偏移：-1（30%）
• 中间偏移：0
• 结束偏移：
  • 桌面：20
  • 平板电脑和手机：5

旋转滚动效果

我们将通过添加旋转滚动效果来完成模块设置。

• 启用旋转：是
• 起始旋转：0°（46%）
• 中间旋转：50°（75%）
• 结束旋转：90°

克隆分频器模块

继续克隆整个模块。

更改渐变背景

打开副本的设置并更改渐变背景颜色。

• 颜色 1：#24252d
• 颜色 2：#16161c

更改间距

添加一些负上边距。

• 上边距：-100px

更改水平滚动效果

并在滚动效果设置中修改水平运动的结束偏移。

• 结束偏移：
  • 桌面：-20
  • 平板电脑和手机：-5

预览

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

示例#1

桌面

移动的

示例#2

桌面

移动的

示例 #3

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何创建运动形状并使用它们来标记 Divi 页面上的新部分。 使用此技术将帮助访问者更加意识到他们正在切换到您页面上的另一部分这一事实。 我们重新创建的运动效果很微妙，可以轻松地为您的网站添加互动。 您也可以免费下载 JSON 文件！ 如果您有任何问题或建议，请随时在下面的评论部分发表评论。

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