使用 Divi 的幻灯片动画显示过程的进展

已发表: 2017-10-15

欢迎来到这个 6 部分系列的第 3 部分，它将教您如何使用 Divi 的新动画选项来设计精彩的页面部分。 我将向您介绍如何构建我们的现场演示页面的不同部分，以便向您展示向您的网站添加动画的技巧。 动画功能真正有趣且易于使用。 使用 Visual Builder，您可以看到您的创作在每个阶段都栩栩如生。 快来和我一起探索 Divi 动画的力量。

在我们的上一篇文章中，我向您展示了一些创造性的方法来设计和动画您网站的部分以展示产品和服务，因为我们构建了动画演示页面的第 3 和第 4 部分。

今天，我们将讨论第 5 部分，该部分使用出色的动画来展示四个令人惊叹的 Blurb 模块。 宣传片动画的逐步计时确实与使用宣传片的逐步过程相得益彰。

让我们潜入吧！

这是我们将在今天的帖子中构建的内容的先睹为快

动画片

准备设计元素

本教程唯一真正需要的是用于 Blurb 模块的 4 个 207×188 图像图标。 这是我将使用的图像。

动画片

动画片

动画片

动画片

使用 Divi 的幻灯片动画显示过程的进展

订阅我们的 YouTube 频道

建筑第 5 部分

使用 Visual Builder，添加一个常规部分（如果您正在关注该系列，则在第 4 部分下）。 在执行任何其他操作之前，将背景颜色 #f5f9fc 添加到您的部分并保存您的设置。

使用两个文本模块添加您的部分标题

然后添加一列行。 在该行中，添加一个文本模块并按如下方式更新设置。

在内容选项卡下...

内容：“设置”

在设计选项卡下...

文字字体：粗体 (B)、大写 (TT)
文字字体大小：15px
文字文字颜色：#6a8091
文字字母间距：5px
文本行高：1.9em
文字方向：居中

间距：20px底部

动画风格：幻灯片
动画方向：向上
动画持续时间：850ms

这个动画效果是一个简单的向上滑动和淡入查看。

动画片

保存设置

现在让我们通过在刚刚创建的文本模块下添加另一个文本模块来添加部分标题。 更新文本设置如下：

在内容选项卡下...

在内容框的文本选项卡中添加以下html： 

<h1>Say Hello to DIVI</h1>

在设计选项卡下...

标题字体：粗体 (B)
标题文本对齐方式：居中
标题字体大小：39px
标题文本颜色：#2f3a54

注意：由于这是一个 h1 标题，我们需要编辑标题文本设置。

动画片

宽度：600px（输入这个值）
模块对齐：居中
自定义边距：底部 20px

动画风格：幻灯片
动画方向：向上
动画持续时间：850ms
动画强度：12%
动画速度曲线：缓出

注意：我真的很喜欢这个部分标题的缓出速度曲线效果。 它有一个逐渐缓慢的着陆，干净而清晰。

保存设置

设计四个模糊

现在我们准备添加我们的 Blurb 模块。 首先，创建一个具有四列 (1/4 1/4 1/4 1/4) 结构的行。

动画片

将 Blurb 模块添加到第一列（最左侧）。

动画片

然后更新 Blurb 设置。

在内容选项卡下...
在内容框的文本选项卡中添加以下 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 与您添加到模糊模块 url 的链接匹配。

网址：[输入网址]
图片：[输入您的 207×188 图片]
背景颜色：#ffffff

在设计选项卡下...

文字方向：居中

标题字体：默认、粗体 (B)、大写 (TT)
标题文本颜色：#7969f4
标题字母间距：3px
标题行高度：3em

正文颜色：#6a8091
车身线高：1.9em

自定义填充：顶部 40 像素，右侧 40 像素，底部 40 像素，左侧 40 像素

动画风格：幻灯片
动画方向：向上
动画持续时间：700ms
动画强度：4%
图像/图标动画：无动画

注意：此动画在很长的时间内将模糊模块滑入视图中。 请密切注意即将推出的模块的动画延迟（此模块为 0%）。 这将是模块逐渐彼此相邻堆叠的整体效果的关键因素。

动画片

在高级选项卡下...

在 Main Element 框中添加以下自定义 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 步
内容：[更新文字和手动链接网址]
网址：[更新简介网址]
图片：【新增207×188图片】

在设计选项卡下...
标题文本颜色：#e944ff
动画延迟：50ms
动画强度：12%

注意：请注意，与第一个模糊相比，动画延迟增加到 50 毫秒，强度增加到 12%。 这将有助于在为每个模糊设置动画时创建逐步计时。

对于第三列中的 Blurb 模块，更新以下内容：

在内容选项卡下...

标题：第 3 步
内容：[更新文字和手动链接网址]
网址：[更新简介网址]
图片：【新增207×188图片】

在设计选项卡下...

标题文本颜色：#3ebaef
动画延迟：100ms
动画强度：20%

注意：同样，您可以看到动画延迟和强度的进展。

对于第四列中的 Blurb 模块，更新以下内容：

在内容选项卡下...

标题：第 4 步
内容：[更新文字和手动链接网址]
网址：[更新简介网址]
图片：【新增207×188图片】

在设计选项卡下...
标题文本颜色：#95d624
动画延迟：150ms
动画强度：30%

更新完所有 Blurb 后，让我们按如下方式更新 Row 设置：

在设计选项卡下...

使用自定义宽度：是
自定义宽度：1366px
使用自定义装订线宽度：是
天沟宽度：2

动画风格：缩放
动画持续时间：700ms
动画开始不透明度：100%

注意：通过向整个过程添加缩放效果，该动画确实可以很好地构建其他模块动画。

保存设置

现在你已经完成了这一部分。 演示页面在简介下方有另一张图片，但我认为没有必要将其包含在此处。

动画片

奖励：下载这些部分以轻松导入

作为额外奖励，我们将今天教程中的部分打包成免费下载，您可以使用下面的电子邮件选择加入表格获取。 只需输入您的电子邮件，就会出现下载按钮。 如果您已经是我们 Divi 通讯的一员，请不要担心“重新订阅”。 重新输入您的电子邮件不会导致更多电子邮件或重复。 它只会显示下载。

享受！


下载布局包
免费下载

免费下载

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

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

要使用这些下载，首先在我们的下载文件夹中找到名为Animation_Effects_Part_3.zip的压缩文件。 解压缩它以显示以下导入。

动画效果第 3 部分（第 1 节）.json

动画效果第 3 部分（第 2 节）.json

在您的 WordPress 管理员中导航到 Divi > Divi Library > 导入和导出。 当可移植性模式弹出时，单击导入选项卡和标记为选择文件的按钮。

选择您喜欢的 json 文件，然后单击“导入 Divi Builder 布局”。 导入完成后，导航到您想要添加上述部分之一的帖子或页面。

激活可视化构建器。 导航到您想要添加上述部分之一的页面部分。 当您单击添加新部分图标时，您将看到“从库中添加”选项。 选择此选项并选择所需的布局。

从库中添加节

包起来

第 5 部分的设计和动画确实展示了一些动画设置对内容交付的影响。 让每个简介都在进展中显示不仅看起来很酷，而且考虑到您正在展示流程的步骤也是有道理的。

接下来

在我们系列的第 4 部分中，我将向您展示用于展示产品或下载的华丽布局。 而且，当然，我将在整个过程中强调动画的巧妙使用。

直到下一次！

我期待在下面的评论中收到您的来信。