下载 Divi 的免费多彩飞溅动画英雄部分

您设计页面的英雄部分的方式为页面的其余部分设定了期望。 如果您正在设计一个庆祝某事的登录页面，无论是周年纪念日还是促销活动，它都绝对有助于将节日气氛带入您的设计中。 一种方法是在英雄部分的背景中添加彩色飞溅动画。 重点仍将放在您提供的书面副本和 CTA 上。 在本教程中，我们将向您展示如何使用 Divi 的内置设置创建漂亮的彩色飞溅动画部分。 您也可以免费下载 JSON 文件！

让我们开始吧。

预览

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

桌面

移动的

免费下载飞溅动画英雄部分布局

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

下载文件

免费下载

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

下载

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

让我们开始重建吧！

添加新部分

渐变背景

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

• 颜色 1：#070a49
• 颜色 2：#6f00f7
• 渐变类型：线性
• 梯度方向：148deg

浆纱

移至该部分的设计选项卡并在尺寸设置中添加最小高度。 这将使我们的部分全屏显示。

• 最小高度：100vh

间距

接下来我们将删除所有默认的顶部和底部填充。

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

能见度

为了确保我们的设计中没有出现水平滚动条，我们将隐藏该部分的溢出。

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

添加第 1 行

列结构

部分设置到位后，使用以下列结构添加第一行：

浆纱

在不添加任何模块的情况下，打开行设置并通过如下修改大小设置允许行接触节容器的左侧和右侧：

• 宽度：100%
• 最大宽度：100%

间距

接下来删除所有默认的顶部和底部填充。

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

主要元素 CSS

为了确保模块在较小的屏幕尺寸上彼此相邻，我们将向行的主要元素添加一行 CSS 代码。

display: flex;

第 1 列动画

常规行设置到位后，打开第 1 列设置并添加动画。

• 动画风格：缩放
• 动画方向：中心
• 动画强度：100%

第 2 列动画

接下来将动画添加到第二列。

• 动画风格：缩放
• 动画方向：中心
• 动画延迟：250ms
• 动画强度：100%

第 3 列动画

我们也在第三列使用动画。

• 动画风格：缩放
• 动画方向：中心
• 动画延迟：500ms
• 动画强度：100%

将图像模块添加到第 1 列

上传飞溅图片

是时候添加模块了，从第 1 列中的图像模块开始。上传您可以在本教程开头下载的下载文件夹中找到的飞溅图像。

浆纱

转到模块的设计选项卡并在大小设置中强制全角。

• 强制全角：是

过滤器

然后，使用过滤器设置更改模块的颜色。

• 色相：303deg
• 饱和度：200%

变换比例

我们也在变换设置中缩放图像。

• 底部：150%
• 右：150%

垂直运动滚动效果

接下来，转到高级选项卡并启用一些垂直运动。

• 启用垂直运动：是
• 起始偏移：0
• 中间偏移：
  • 桌面：0（50%）
  • 平板电脑：0（70%）
  • 电话：0（85%）
• 结束偏移：2
• 运动效果触发器：元素底部

水平运动滚动效果

我们也在使用一些水平运动。

• 启用水平运动：是
• 起始偏移：
  • 桌面：-10
  • 平板和手机：0
• 中间偏移：0
• 结束偏移：4
• 运动效果触发器：元素底部

放大和缩小滚动效果

随着放大和缩小效果。

• 启用向上和向下扩展：是
• 起始比例：100%
• 中等规模：150%
• 结束比例：200%
• 运动效果触发器：元素底部

克隆图像模块两次并在行的剩余列中放置重复项

完成第一个图像模块后，您可以克隆整个模块两次并将重复项放置在行的剩余列中。

更改第 2 列中的图像模块

间距

打开第 2 列中的图像模块并在平板电脑和手机上添加一些上边距。

• 最高利润率：50%（仅限平板电脑和手机）

过滤器

更改过滤器设置中的色调。

• 色相：55度

更改第 3 列中的图像模块

过滤器

然后，打开第三列中的图像模块并相应地更改过滤器设置：

• 色相：309度
• 亮度：0%

添加第 2 行

列结构

进入下一行。 使用以下列结构：

位置

打开行设置并在高级选项卡中更改行的位置设置。

• 位置：绝对
• 地点：中心

将文本模块 #1 添加到列

添加H1内容

是时候添加模块了，从包含您选择的一些 H1 内容的文本模块开始。

H1 文本设置

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

• 标题字体：魔方
• 标题文字颜色：#ffffff
• 标题文字大小：80 像素（桌面）、50 像素（平板电脑）、35 像素（手机）

• 标题文字阴影垂直长度：0.08em
• 标题文字阴影模糊强度：0em
• 标题文字阴影颜色：#1a005b

将文本模块 #2 添加到列

添加内容

然后，添加另一个具有一些描述内容的文本模块。

文字设置

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

• 文字字体：Muli
• 文字颜色：#dddddd
• 文字大小：15px（桌面），14px（平板电脑和手机）
• 文本行高：2.1em

• 文字阴影颜色：#1a005b

浆纱

接下来修改模块的宽度。

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

间距

并通过在不同屏幕尺寸上添加一些顶部和底部边距来完成模块设置。

• 最高利润率：6%（桌面）、10%（平板电脑）、14%（手机）
• 底部边距：6%（台式机）、10%（平板电脑）、14%（手机）

将按钮模块添加到列

添加副本

我们在专栏中需要的最后一个模块是按钮模块。 添加一些您选择的副本。

按钮设置

然后，转到设计选项卡并按如下所示设置按钮样式：

• 为按钮使用自定义样式：是
• 按钮文字大小：17px
• 按钮文字颜色：#ffffff
• 按钮背景颜色：#ea01a6
• 按钮边框宽度：0px
• 按钮边框半径：100px

• 按钮字体：Rubik
• 按钮字体粗细：粗体
• 按钮字体样式：大写

间距

在间距设置中也添加一些自定义填充值。

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

盒子阴影

并通过添加框阴影完成模块设置。

• 框阴影水平位置：5px
• 框阴影垂直位置：5px
• 阴影颜色：#30005b

预览

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

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何利用 Divi 的内置动画和滚动效果发挥创意。 更具体地说，我们向您展示了如何为您为特殊场合设置的登录页面创建彩色飞溅动画英雄部分。 那个场合可以是但不限于贵公司的周年纪念日或特价销售。 您也可以免费下载 JSON 文件！ 如果您有任何问题或建议，请随时在下面的评论部分发表评论。

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