如何使用 Divi 将碰撞动画应用于设计元素

在页面上的设计元素中添加动画绝对可以帮助您提高参与度。 Divi 的 Visual Builder 中有许多动画选项可用，它们使用起来非常简单。 但是您也可以通过这些动画获得创意并以独特的方式使用它们。 在这篇文章中，我们将处理三个碰撞动画的例子，我们将逐步重新创建，仅使用 Divi 的内置选项。

让我们开始吧！

预览

在我们深入学习本教程之前，让我们快速浏览一下我们将在本教程中重新创建的三个示例。

示例 #1：碰撞文本

示例#2：碰撞分隔线

示例 #3：碰撞网格

徘徊

订阅我们的 YouTube 频道

重新创建示例 #1：碰撞文本

添加专业部分

结构

让我们从第一个例子开始吧！ 打开一个新的或现有的页面并使用以下结构添加一个新的专业部分：

浆纱

在不添加任何模块或行的情况下，打开部分设置并在大小设置中启用“使此部分全宽”选项。

添加第 1 行

列结构

继续向专业部分添加一行：

浆纱

打开行设置并对大小设置进行一些更改。

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

间距

还要更改间距设置中的自定义填充值。

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

将文本模块添加到第 1 列

添加内容

继续将文本模块添加到行的第一列并添加一些内容。

标题文字设置

接下来更改标题文本设置。

• 标题字体：蒙特塞拉特
• 标题字体粗细：轻
• 标题文字大小：4.4vw（桌面）、8.2vw（平板电脑）、40px（手机）
• 标题线高度：0.7em

将分频器模块添加到第 1 列

能见度

第 1 列中需要的第二个模块是分频器模块。 通过启用“显示分隔符”选项确保分隔符显示出来。

• 显示分隔线：是

颜色

转到设计选项卡并更改分隔线颜色。

• 颜色：#000000

浆纱

减少分隔线的宽度。

• 宽度：91%

间距

并添加一些上边距以在分隔模块和文本模块之间创建空间。

• 上边距：30px

动画片

最后，为 Divider 模块添加一个微妙的动画。

• 动画风格：幻灯片
• 动画方向：左

将文本模块添加到第 2 列

添加内容

移至第二列并添加具有一些选择内容的第二个文本模块。

标题文字设置

接下来更改标题文本设置。

• 标题字体：蒙特塞拉特
• 标题字体粗细：轻
• 标题文字颜色：#3f46ff
• 标题文字大小：3.8vw（桌面）、6.5vw（平板电脑）、40px（手机）
• 标题线高度：0.8em

动画片

并向该模块添加动画。

• 动画风格：幻灯片
• 动画方向：左
• 动画延迟：600ms
• 动画强度：10%

添加第 2 行

列结构

继续使用以下列结构向该部分添加另一行：

添加剩余模块

添加要在此新行中显示的其他模块，并根据需要对其进行修改。

重新创建示例 #2：碰撞分隔线

添加专业部分

结构

继续下一个例子！ 使用以下结构添加新的专业部分：

浆纱

在不添加任何行或模块的情况下，打开部分设置并启用“使此部分全宽”选项。

• 将此部分设为全角：是

添加第 1 行

列结构

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

间距

打开行设置并修改自定义填充设置。

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

添加文本模块

添加内容

接下来，将文本模块添加到具有一些选择内容的行。

标题文字设置

移至设计选项卡并更改标题文本设置。

• 标题字体：蒙特塞拉特
• 标题字体粗细：轻
• 标题文字大小：70 像素（桌面）、50 像素（平板电脑）、40 像素（手机）
• 标题线高度：0.8em

添加第 2 行

列结构

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

浆纱

在不添加任何模块的情况下，打开行设置并修改大小设置。

• 使用自定义装订线宽度：是
• 天沟宽度：1
• 宽度：53%（桌面），100%（平板电脑和手机）

间距

还要更改自定义填充值。

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

将分频器模块添加到第 1 列

能见度

完成修改行设置后，继续将分隔器模块添加到第一列，并通过启用“显示分隔器”选项确保显示分隔器。

• 显示分隔线：是

颜色

接下来更改分隔线颜色。

• 分隔线颜色：#3f46ff

样式

并在样式设置中更改分隔线样式。

• 分隔线样式：双

浆纱

在尺寸设置中也增加分隔线重量。

• 分隔线重量：8px

动画片

最后，将动画添加到 Divider 模块。

• 动画风格：幻灯片
• 动画方向：右

克隆分隔器模块并放置在第 2 列中

完成修改分频器模块设置后，继续克隆模块。 将副本放在行的第二列中。

更改动画

要创建碰撞效果，请更改复制的分隔器模块的动画方向。

• 动画风格：幻灯片
• 动画方向：左

添加第 3 行

列结构

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

添加剩余模块

并添加您想要完成的部分设计的任意数量的模块。

重新创建示例 #3：碰撞网格

添加新部分

间距

继续下一个也是最后一个例子！ 添加常规部分并打开设置。 转到间距设置添加一些自定义填充值：

• 顶部填充：300px
• 底部填充：200px

添加第 1 行

列结构

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

将图像模块添加到列

上传异形图像叠加

通过右键单击将以下形状的图像叠加保存到桌面：

保存形状的图像叠加后，返回您的 Divi 网站并将图像模块添加到该行。 上传您可以在下载文件夹中找到的形状图像叠加文件。

渐变背景

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

• 颜色 1：#aa2bff
• 颜色 2：#09f7eb

结盟

还要更改图像对齐方式。

• 图像对齐：居中

浆纱

并在大小设置中启用“强制全宽”选项。

• 强制全角：是

间距

也向模块添加一些自定义边距。

• 左边距：200px
• 右边距：200px

动画片

最后，向模块添加动画。

• 动画风格：缩放
• 动画方向：中心
• 动画持续时间：3000ms
• 动画强度：100%

添加第 2 行

列结构

到第二排。 使用以下列结构：

浆纱

在不添加任何模块的情况下，打开行设置并对大小设置进行一些更改。

• 使用自定义宽度：是
• 单位：PX
• 自定义宽度：944px
• 使用自定义装订线宽度：是
• 天沟宽度：1

将 Blurb 模块添加到第 1 列

添加内容

继续向第一列添加一个 Blurb 模块。 输入一些选择的内容。

图标

接下来选择一个图标。

背景颜色

并为模块添加背景颜色。

• 背景颜色：rgba(255,255,255,0.83)

图标设置

移至设计选项卡并更改图标设置。

• 图标颜色：#000000
• 图标位置：顶部
• 使用图标字体大小：是
• 图标字体大小：73px

标题文字设置

还要修改标题文本设置。

• 标题字体：Open Sans
• 标题字体粗细：半粗体
• 标题文本对齐：居中
• 标题文字大小：15px
• 标题字母间距：-1px
• 标题行高度：1.8em

浆纱

并在大小设置中减小内容宽度。

• 内容宽度：183px

间距

我们也会添加一些自定义的顶部和底部填充。

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

盒子阴影

继续给 Blurb Module 一个微妙的盒子阴影。

• 框阴影模糊强度：80px
• 阴影颜色：rgba(0,0,0,0.3)

过渡

并在高级选项卡中增加过渡持续时间。

• 转换持续时间：600ms

克隆 Blurb 模块 8 次并在每个剩余的列中放置 3 个副本

现在，一旦你完成了第一个 Blurb 模块的修改，你就可以继续克隆它 8 次。 在第二列中放置三个副本，在第三列中放置三个。 在本教程的下一部分中，我们将对每个 Blurb 模块进行独特的更改。 为此，我们将遵循以下编号：

修改模糊模块 #1

间距

打开第一个 Blurb 模块并添加一些负上边距。

• 上边距：-340px（桌面），0px（平板和手机）

悬停间距

在悬停时更改边距值。

• 上边距：-380px
• 下边距：40px
• 左边距：-40px
• 右边距：40px

圆角

继续在模块的左上角添加“30px”。

动画片

并添加动画。

• 动画风格：幻灯片
• 动画方向：左
• 动画延迟：200ms

修改模糊模块 #2

背景颜色

打开第二个 Blurb 模块并更改背景颜色。

• 背景颜色：rgba(255,255,255,0.93)

间距

继续向模块添加一些负上边距。

• 上边距：-340px（桌面），0px（平板和手机）

悬停间距

在悬停时更改这些边距值。

• 上边距：-380px
• 下边距：40px

动画片

并为模块添加动画。

• 动画风格：幻灯片
• 动画方向：左
• 动画延迟：400ms

修改模糊模块 #3

间距

转到第三个 Blurb 模块。 添加一些负上边距。

• 上边距：-340px（桌面），0px（平板和手机）

悬停间距

修改悬停时的边距值。

• 上边距：-380px
• 下边距：40px
• 左边距：40px
• 右边距：-40px

圆角

还将“30px”添加到模块的右上角。

动画片

并添加动画。

• 动画风格：幻灯片
• 动画方向：左
• 动画延迟：600ms

修改模糊模块 #4

背景颜色

进入第四个模块。 打开设置并更改背景颜色。

• 背景颜色：rgba(255,255,255,0.93)

悬停间距

接下来添加一些悬停边距值。

• 左边距：-40px
• 右边距：40px

动画片

并添加动画。

• 动画风格：淡入淡出
• 动画延迟：800ms

修改模糊模块 #5

动画片

进入第五个模块。 您在这里唯一需要做的就是添加动画。

• 动画风格：淡入淡出
• 动画延迟：1000ms

修改模糊模块 #6

背景颜色

继续打开第六个模块并更改背景颜色。

• 背景颜色：rgba(255,255,255,0.93)

悬停间距

更改悬停时的间距值。

• 左边距：40px
• 右边距：-40px

动画片

并添加动画。

• 动画风格：淡入淡出
• 动画延迟：1200ms

修改模糊模块 #7

悬停间距

进入第七个模块。 在间距设置中添加一些悬停边距值。

• 上边距：40px
• 左边距：-40px
• 右边距：40px

圆角

继续向模块的左下角添加边框半径的“30px”。

动画片

并添加动画。

• 动画风格：幻灯片
• 动画方向：右
• 动画延迟：1400ms

修改模糊模块 #8

背景颜色

继续打开第八个模块并更改背景颜色。

• 背景颜色：rgba(255,255,255,0.93)

悬停间距

将悬停时的一些自定义边距添加到下一个模块。

• 上边距：40px

动画片

也向此 Blurb 模块添加动画。

• 动画风格：幻灯片
• 动画方向：右
• 动画延迟：1600ms

修改模糊模块 #9

悬停间距

进入第九个也是最后一个模块！ 转到间距设置并添加一些自定义悬停边距值。

• 上边距：40px
• 左边距：40px
• 右边距：-40px

圆角

将边框半径的“30px”也添加到右下角。

动画片

并添加动画。

• 动画风格：幻灯片
• 动画方向：右
• 动画延迟：1800ms

在第 1 行的图像模块中添加负下边距

现在，为了碰撞我们在本示例的第一部分中创建的圆和网格，我们将给图像模块（包含形状图像叠加层）一些负底边距。

• 下边距：-520px

预览

现在我们已经完成了所有步骤，让我们最后看看我们取得的结果。

示例 #1：碰撞分隔线

示例 2：碰撞文本

示例 #3：碰撞网格

徘徊

最后的想法

向页面添加动画有助于在访问者与您之间建立更多互动。 当然，您可以只使用 Visual Builder 中的动画设置，但您也可以更进一步，将碰撞动画应用于设计元素，这将帮助您获得令人惊叹的结果。 如果您有任何问题或建议，请务必在下方评论区留言！