如何使用 Divi 的滚动效果创建信封动画

已发表: 2020-02-27

每次出现新的 Divi 功能时，我们都会尝试分享一些很酷且有用的教程，这些教程将帮助您跳出框框思考并利用 Divi 发挥创意。今天的教程正是这样做的。我们将向您展示如何使用 Divi 的滚动效果创建响应式包络动画。例如，这是强调号召性用语块的好方法，但您也可以将其用于其他目的。您也可以免费下载 JSON 文件！

让我们开始吧。

预览

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

桌面

信封动画

移动的

信封动画

订阅我们的 YouTube 频道

免费下载信封动画布局

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

下载文件

免费下载

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

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

重新创建元素结构

将新部分添加到页面中间或底部

背景颜色

首先在页面中间或底部的某处添加一个新部分。打开部分设置并将背景颜色更改为白色。

背景颜色：#FFFFFF

信封动画

间距

接下来修改间距设置。

顶部填充：5vw
底部填充：0px

信封动画

溢出

并隐藏部分溢出。

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

信封动画

添加第 1 行

列结构

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

信封动画

背景颜色

在不添加任何模块的情况下，打开行设置并更改背景颜色。

背景颜色：#FFFFFF

信封动画

浆纱

接下来移动到行的设计选项卡并按如下方式更改大小设置：

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

信封动画

间距

然后，在不同的屏幕尺寸中添加一些自定义填充值。

顶部填充：14vw（台式机）、11vw（平板电脑和手机）
底部填充：14vw（台式机），11vw（平板电脑和手机）
左填充：20vw（台式机），10vw（平板电脑和手机）
右填充：20vw（台式机），10vw（平板电脑和手机）

信封动画

边界

也添加一些边界半径。

所有角落：20px

信封动画

盒子阴影

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

框阴影垂直位置：38px
框阴影模糊强度：80px
阴影颜色：rgba(0,0,0,0.08)

信封动画

Z索引

通过增加高级选项卡中的 z 索引来完成行设置。

Z指数：11

信封动画

将文本模块 #1 添加到列

添加 H2 内容

是时候添加模块了，从第一个文本模块开始。输入您选择的一些 H2 含量。

信封动画

H2 文本设置

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

标题 2 字体：Poppins
标题 2 文字大小：2vw（桌面）、4vw（平板电脑）、5vw（手机）

信封动画

将文本模块 #2 添加到列

添加内容

在上一个文本模块的正下方添加另一个文本模块，并插入一些您选择的描述内容。

信封动画

文字设置

转到模块的设计选项卡并更改文本设置。

文字字体：Open Sans
文字大小：1vw（桌面）、2vw（平板电脑）、3vw（手机）
文本行高：2.6em

信封动画

间距

也可以在不同的屏幕尺寸上添加一些自定义的顶部和底部值。

顶部填充：2vw（桌面）、4vw（平板电脑）、5vw（手机）
底部填充：2vw（桌面）、4vw（平板电脑）、5vw（手机）

信封动画

将按钮模块添加到列

添加副本

我们将放置在此行中的下一个也是最后一个模块是按钮模块。添加一些您选择的副本。

信封动画

按钮设置

然后，相应地设置按钮样式：

为按钮使用自定义样式：是
按钮文字大小：1vw（桌面）、2vw（平板电脑）、3vw（手机）
按钮文字颜色：#ffffff
按钮背景颜色：#0f33ff
按钮边框宽度：0px

信封动画

按钮边框半径：100px
按钮字体： Poppins

信封动画

间距

并通过在不同屏幕尺寸上添加一些自定义填充值来完成模块的设置。

顶部填充：1vw（桌面）、2vw（平板电脑）、3vw（手机）
底部填充：1vw（桌面）、2vw（平板电脑）、3vw（手机）
左填充：2vw（桌面）、4vw（平板电脑）、6vw（手机）
右填充：2vw（桌面）、4vw（平板电脑）、6vw（手机）

信封动画

添加第 2 行

列结构

现在我们已经有了号召性用语行，是时候开始创建信封形状了。为此，请使用以下列结构添加新行：

信封动画

浆纱

通过如下更改大小设置，允许行占据整个部分的宽度：

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

信封动画

间距

也删除所有默认的顶部和底部填充。

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

信封动画

展示

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

display: flex;

信封动画

将图像模块添加到第 1 列

将图像框留空

将图像模块添加到第 1 列并将图像框留空。

信封动画

渐变背景

相反，我们使用渐变背景。

颜色 1：rgba(255,255,255,0)
颜色 2：#e8e8e8
渐变类型：线性
梯度方向：150度
起始位置：50%
结束位置：50%

信封动画

间距

相应地更改模块的填充值：

顶部填充：15vw
底部填充：15vw

信封动画

在第 1 列中克隆图像模块并在第 2 列中放置重复项

完成第 1 列中的图像模块后，您可以克隆整个模块并将副本放置在第 2 列中。

信封动画

更改渐变背景

更改渐变背景如下：

颜色 1：rgba(255,255,255,0)
颜色 2：#efefef
渐变类型：线性
梯度方向：210度
起始位置：50%
结束位置：50%

信封动画

添加第 3 行

列结构

要创建信封的底部，我们需要具有以下列结构的另一行：

信封动画

浆纱

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

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

信封动画

间距

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

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

信封动画

展示

并通过向行的主要元素添加一行 CSS 代码来允许两列彼此相邻。

display: flex;

信封动画

Z索引

通过增加高级选项卡中的 z 索引来完成行设置。

Z指数：12

信封动画