欢迎来到这个由6章组成的系列的第3章，它将教你如何使用Divi的新“动画”选项设计出色的页面板块。我将向你介绍如何构建实时演示页面的不同部分，以向你展示向网站添加动画的技术。动画功能确实很有趣并且易于使用。借助Visual Builder，你可以看到自己的创作在每个阶段都栩栩如生。快来加入我的行列，探索Divi动画的力量。在我们的上一篇文章中，当我们构建了动画演示页面的第3部分和第4部分时，我向你展示了一些创造性的方法来设计和设置网站部分的动画以显示产品和服务。今天，我们将处理第5部分，该部分使用出色的动画来显示四个令人惊叹的Blurb模块。让我们开始吧！这是我们在今天的文章中将要构建的概览

准备设计元素本教程真正需要的唯一东西是用于Blurb模块的4个 207×188图像图标。这是我将要使用的图像。

构建第5部分使用Visual Builder，添加一个常规部分(如果你遵循该系列，请在第4部分下)。 在执行其他操作之前，请在你的部分中添加背景颜色＃f5f9fc并保存设置。使用两个文本模块添加部分标题然后添加一列。在该行中，添加文本模块并按如下所示更新设置。在内容标签下…

• 内容：“设置”

在设计标签下…

• 文字字体：粗体(B)，大写(TT)

• 文字字型大小：15px

• 文字文字颜色：＃6a8091

• 文字字母间距：5px

• 文字行高：1.9em

• 文字方向：居中

• 间距：底部20像素

• 动画样式：滑动

• 动画方向：向上

• 动画时间：850ms

此动画效果是简单的向上滑动并淡入以查看的效果。

保存设置现在，通过在刚创建的模块下添加另一个文本模块来添加标题。更新文本设置，如下所示：在内容标签下…在内容框的文本选项卡中添加以下html：

Say Hello to DIVI</h1>

在设计标签下…

• 标题字体：粗体(B)

• 标题文字对齐：居中

• 标题字体大小：39px

• 标题文字颜色：＃2f3a54

注意：由于这是h1标题，因此我们需要编辑“标题文本”设置。

• 宽度：600像素(输入此值)

• 模块对齐：居中

• 自定义边距：底部20px

• 动画样式：滑动

• 动画方向：向上

• 动画时间：850ms

• 动画强度：12％

• 动画速度曲线：缓出

注意：我真的很喜欢此部分标题的缓和速度曲线效果。它的着陆速度逐渐变慢，干净利落。保存设置设计四个导语现在我们准备添加Blurb模块。首先，创建一个具有四列(1/4 1/4 1/4 1/4)结构的行。

将导语模块添加到第一列(最左侧)。

然后更新“导语设置”。在内容标签下…在“内容框”的文本选项卡中添加以下html：

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida sed nec purus.p><p><a href="#" style="font-size: 12px;letter-spacing: 1px; color: #6a8091;"><strong>READ MORE ➔strong>a>p>

注意：我手动添加了一个链接，为用户提供了另一个单击选项。确保手动链接的URL与你添加到blurb模块URL的链接匹配。

• 网址：[输入网址]

• 图片：[输入您的207×188图片]

• 背景颜色：#ffffff

在设计标签下…

• 文字方向：居中

• 标题字体：默认，粗体(B)，大写(TT)

• 标题文字颜色：＃7969f4

• 标题字母间距：3px

• 标题行高度：3em

• 正文文字颜色：＃6a8091

• 正文行高度：1.9em

• 自定义填充：顶部40px，右侧40px，底部40px，左侧40px

• 动画样式：滑动

• 动画方向：向上

• 动画时间：700ms

• 动画强度：4％

• 图像/图标动画：无动画

注意：此动画会在很长一段时间内将Blurb模块向上滑入视图。请密切注意即将到来的模块的动画延迟(此模块为0％)。这将成为模块逐渐彼此相邻堆叠的整体效果的关键要素。

在高级标签下…在“主要元素”框中添加以下自定义CSS：

border-radius: 6px;box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);

保存设置现在你已经完成了一个Blurb，我们可以将其用作接下来的三个Blurb的模板。继续并右键单击该模块，然后选择复制模块。然后将模块粘贴(ctrl + v)到剩余的三列中的每列中。

现在，我们要做的就是向三个重复的模块中的每个模块添加一些更新。对于第二列中的Blurb模块，更新以下内容：在内容标签下…

• 标题：步骤2

• 内容：[更新文本和手动链接网址]

• 网址：[更新Blurb网址]

• 图片：[添加新的207×188图片]

在设计标签下…

• 标题文字颜色：＃e944ff

• 动画延迟：50ms

• 动画强度：12％

注意：请注意，与第一个Blurb相比，动画延迟增加到50ms，并且强度增加到12％。在为每个blurb设置动画时，这将有助于创建逐步计时。对于第三栏中的Blurb模块，更新以下内容：在内容标签下…

• 标题：步骤3

• 内容：[更新文本和手动链接网址]

• 网址：[更新Blurb网址]

• 图片：[添加新的207×188图片]

在设计标签下…

• 标题文字颜色：＃3ebaef

• 动画延迟：100ms

• 动画强度：20％

注意：同样，你可以看到动画延迟和强度的增加。对于第四列中的Blurb模块，更新以下内容：在内容标签下…

• 标题：步骤4

• 内容：[更新文本和手动链接网址]

• 网址：[更新Blurb网址]

• 图片：[添加新的207×188图片]

在设计标签下…

• 标题文字颜色：＃95d624

• 动画延迟：150ms

• 动画强度：30％

更新所有Blurbs后，请按以下方式更新“行”设置：在设计标签下…

• 使用自定义宽度：是

• 自定义宽度：1366px

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

• 装订线宽度：2

• 动画样式：缩放

• 动画时间：700ms

• 动画起始不透明度：100％

注意：此动画通过在整个过程中添加缩放效果，确实很好地构架了其他模块动画。保存设置现在，你已经完成了本部分。演示页面的导语下方还有另一张图片，但我认为没有必要在此处添加它。

下载这些部分以方便导入在爱极致云公众号的聊天窗口发送关键词20201121获取布局下载链接！要使用这些下载，请首先在我们的下载文件夹中找到名为Animation_Effects_Part_3.zip的压缩文件。将其解压缩以显示以下导入。Animation Effects Part 3 (section 5).json在WordPress管理员中导航至Divi> Divi Library> Import＆Export。弹出可移植性模式时，单击导入选项卡，然后单击标记为选择文件的按钮。选择你喜欢的json文件，然后单击“导入Divi Builder布局”。导入完成后，导航至文章或页面，你可以向其中添加以上部分之一。激活视觉生成器。导航至你要向其中添加上述部分之一的页面部分。单击添加新部分图标时，将显示“从库添加”选项。选择此选项，然后选择所需的布局。

总结第5部分的设计和动画确实显示了少量动画设置能对内容传递产生的影响。连续显示每个简介，不仅看起来很酷，而且考虑到无论如何你都显示了流程的步骤，这也很有意义。接下来

在本系列的第4章中，我将向你展示用于显示产品或下载内容的精美布局。而且，当然，我将始终强调动画的巧妙用法。如果你对创建网站有兴趣欢迎来撩爱极致小哥哥哦~

长按关注，有更多干货哦~▼▼▼

- End -

点个赞，证明你还爱我