欢迎来到这个6部分系列的第5部分，它将教您如何使用Divi的新动画选项来设计令人敬畏的页面部分。我将带领你们了解如何构建我们的不同部分现场演示页面为了向您展示添加动画到您的网站的技术。动画功能真正有趣和易于使用。使用VisualBuilder，您可以看到您的创作在每一个阶段都得到了实现。来和我一起探索Divi动画的力量。

在临猗企业网站建设上一篇文章中，我们构建了动画演示页面的第6部分。我向您展示了如何设计一个布局来显示带有明亮颜色、发光阴影和精确动画的产品下载。

今天，我们将建立我们的动画演示页面的第7节，这是一个完美的例子，如何使用滚动动画效果，以添加生活类运动到您的内容。最终产品将给人留下文字和手机从不同角度滑动和旋转的印象，当你向下滚动页面。

这是我最喜欢的动画之一。我们开始吧。

设计要素的准备

本教程需要三张图片。前两幅图像的垂直方向应为580×950左右，以10%的逆时针角度旋转。水平图像应为1250×608(也以10%逆时针角度旋转)，在图像右侧约300 px的额外透明背景空间，使其很好地适合所提供的列。确保电话图像是PNG格式的透明背景。这是我今天贴的照片。

垂直电话图像#1

垂直电话图像#2

垂直电话图像#3

使用Divi的动画将内容滚动到视图中

订阅我们的YOUTUBE频道

示范建筑第7节

在我们开始构建过程之前，下面是我们将使用可视化构建器创建的部分布局的线框视图。

使用VisualBuilder，让我们从向布局中添加另一个常规部分开始。然后在您的部分中添加三列(四分之一行)。

更新行设置

在添加第一个模块之前，转到行设置并更新以下内容：

在“设计”选项卡…下

使用自定义宽度：是
海关宽度：91%
使用自定义水槽宽度：是
排水沟宽度：1

第2栏自定义填充：5%顶部
第3栏自定义填充：24%顶部

添加图像#1

在布局的第一个(最左边)列中，添加一个图像模块并按如下方式更新图像设置：

在Content选项卡下…

图片URL：[上传图片#1]

在“设计”选项卡…下

力全宽：是

动画风格：滚动
动画方向：右
动画强度：16%
动画启动透明度：100%

注：除了滚动动画效果，这个动画设置的独特之处在于，您以完全不透明的方式启动动画，这样手机图像总是可见的。此外，16%的强度使“滚”降到最低。这创造了一个更像生活的动画。它还可以将动画定向到右侧，因为图像位于页面的左侧。

保存设置

用分割器添加动画文本并调用动作模块

现在移到中间(第四个)列，其中分隔模块将用于在文本上方添加一个短的分隔线。

向列中添加一个分隔模块。

然后按以下方式更新设置：

在Content选项卡下…

秀师：是的

在“设计”选项卡…下

颜色：#e0c48f
隔板重量：3 px
宽度：60 px(您必须键入此值，因为默认值是百分比)
模块对齐：默认(左)
自定义填充：80 px顶部，80 px左

动画风格：折叠
动画方向：右
动画持续时间：1200 ms
动画延迟：50 ms
动画强度：70%
动画启动透明度：0%

保存设置

在“分区模块”下添加具有以下设置的“调用行动模块”：

在Content选项卡下…

标题：“千字”
按钮文本：“了解更多”
内容：“Lorem ipsum dolor，consectetur adipipcing elit.”[医]双贝母和长臂猿，孕鼠。SED NEC purus tempus，smadtis mi id.“
链接：#
使用背景色：否

在临猗企业网站建设“设计”选项卡…下

文字颜色：深色
文本方向：左
标题字体：Lato，Bold(B)大写(TT)
页眉字体大小：38 px
标题文本颜色：#33454f
标题字母间距：0.2em
标头线高度：1.4em

车身字体：Lato
体型尺寸：18 px
正文颜色：#9b9b9b
身高：1.8米

为按钮使用自定义样式：是
按钮文本大小：15 px
按钮文本颜色：#f2733c
按钮背景颜色：RGBA(225，225，225，0)
按钮边框宽度：0 px
按钮字母间距：2 PX
按钮字体：Lato，Bold(B)，大写(TT)
按钮图标：右箭头
只显示图标上的图标为按钮：不
按钮Hover字母间距：0px

动画风格：折叠
动画方向：右
动画持续时间：1200 ms
动画延迟：50 ms
动画强度：70%
动画启动透明度：0%

注：这个动画给出了从左边折叠出来的文本的外观。请注意，这些动画设置与其上方的分隔模块动画匹配。

保存设置

添加图像#2

接下来，在刚才创建的“调用操作”模块下添加一个图像模块。按以下方式更新图像设置：

在Content选项卡下…

图片URL：[上传图片#2]

在“设计”选项卡…下

力全宽：是

动画风格：滚动
动画方向：左
动画强度：13%
动画启动透明度：100%

添加图像#3

这是我们的第二(中)栏。现在，让我们在第三列(最右边)中添加图像#3。为此，我们可以复制/复制刚刚添加到第二列底部的图像模块，并将其粘贴到第三列中。因为动画样式是相同的，所以需要更新图像模块的所有内容都是实际的图像URL。

复制和自定义拆分器和调用操作模块

将新的图像URL添加到第三列中的复制图像后，继续重复/复制在第二列顶部创建的Divider模块和ActionModule调用，并在第三列的图像#3下拖动/粘贴这两个模块。

对于分区模块，将“设计”选项卡下的“动画方向”设置更改为“左”。

对于新的“行动呼吁”模块，请继续更新以下设置：

在Content选项卡下…

标题：一种新的建筑方式

在“设计”选项卡…下

自定义填充：右80 px，底部80 px，左80 px

动画方向：左

奖励：下载本节以方便导入

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

好好享受吧！

免费下载

加入DiviNewlsetter，我们将电子邮件给你一个最终的Divi登陆页面布局包的副本，加上吨其他惊人的和免费的Divi资源，提示和技巧。跟着走，你很快就会成为迪维大师。如果您已经订阅，只需在下面键入您的电子邮件地址，然后单击下载以访问布局包。

窗体顶端

下载

窗体底端

要使用这些下载，首先要定位已压缩的文件动画效果第5部分在我们的下载文件夹中。解压缩以显示下列进口。

动画效果第5部分(第1节)

动画效果第5部分(第2节)

在WordPress管理中导航到divi>divi库>导入和导出。当可移植模式弹出时，单击IMPORT选项卡并单击标记为SELECT FILE的按钮。

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

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

包起来

这个布局有点棘手。但是，一旦你得到正确的图像和正确的间隔，动画把整个布局很好地结合在一起。像生活一样滚动的手机图像，几乎看上去像是有人在白色的桌子上滑动到我们的视图中，当我们向下滚动页面。这个滚动动画的例子绝对是一个突出的例子。

在下一篇文章中，我将以第6部分结束我们的系列文章。我将向您展示如何使用幻灯片动画与一些自定义图像和CSS创建一个惊人的布局特色烹饪食谱。然而，相同的布局可以调整，并用于许多不同的特色项目。

我期待着在临猗企业网站建设评论中听到你的意见。