使用 Divi 的动画来展开带有滑动图像的内容

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

在我们系列的第 1 部分中，我们创建了动画演示页面的前两部分。 第一部分中标题的设计和动画展示了一种独特的方式来为全屏标准部分内的文本模块的元素设置动画。 在构建第二部分时，我们发现了一种将微妙而和谐的动画融入内容行的方法，这些动画可以轻松地以引人入胜的方式用于在登录页面上展示内容。

今天，我们将继续设计在滚动页面时有效（和创造性地）使用动画的部分布局。 我们将构建现场演示页面的第三和第四部分，展示 Divi 动画功能的强大功能。 这两个部分的布局都可以很容易地用于您自己的项目来展示产品或服务。

让我们开始吧。

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

第 3 节

第 4 节

准备设计元素

准备好您的图像

对于第三部分，您将需要两个图像。 第一个需要在 880×600 左右，第二个需要在 790×880 左右。 这些图像大小不必精确。 我只是包括这些维度给你一个想法。

在构建第四部分时，您还将获得两个 600×400 左右的图像。

使用可视化构建器

这里不需要高级代码。 我们将仅使用 Visual Builder 来设计我们在本系列第 1 部分中创建的页面的下两个部分。 由于您的页面已经设置完毕，您可以开始使用了。

使用 Divi 的动画来展开带有滑动图像的内容

订阅我们的 YouTube 频道

构建演示的第 3 部分

第 3 节是一个很好的示例，说明如何使用随附的图像设计行动号召模块并为其制作动画。

让我们潜入。

使用 Visual Builder，添加一个包含两列行的常规部分。 在左栏中添加一个图像模块。

更新图像设置如下：

在内容选项卡下...

图片网址：[插入您的 880×600 图片]

在设计选项卡下...
强制全角：是
动画风格：幻灯片
动画方向：左
动画强度：20%
动画开始不透明度：100%

保存设置

添加分频器模块

在右栏中，我们将使用分隔器模块和号召性用语模块展示我们的内容。 分隔线模块将用于在文本上方添加一条短分隔线。

将分隔模块添加到右列。

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

在内容选项卡下...

显示分隔线：是

在设计选项卡下...

颜色：#e4ca77
分隔线重量：4px
宽度：80px（你必须输入这个值，因为默认是百分比）
模块对齐：默认（左）
自定义边距：顶部 60 像素，底部 0 像素

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

保存设置

添加号召性用语模块

在 Divider Module 下添加一个 Call to Action Module，设置如下：

在内容选项卡下...

书名：《完美的风景》
按钮文字：“了解更多”
内容：“Lorem ipsum dolor sat amet，consectetur adipiscing 精英。 Phasellus bibendum est vitae felis rhoncus gravida。 Sed nec purus tempus, sagittis mi id, efficitur nisl。 Lorem ipsum dolor 坐 amet，consectetur adipiscing 精英。 Phasellus bibendum est vitae felis rhoncus gravida。 Sed nec purus tempus、sagittis mi id、efficitur nisi。”
关联： ＃
使用背景颜色：否

在设计选项卡下...

文字颜色：深色
文本方向：左
标题字体：Lato，大写 (TT)
标题字体大小：38px
标题文本颜色：#0c0c0c
标题字母间距：0.2em
标题行高度：1.4em

正文字体：Lato
正文字体大小：18px
正文颜色：#9e9e9e
车身线高：1.8em

为按钮使用自定义样式：是
按钮文字大小：15px
按钮文字颜色：#000000
按钮背景颜色：rgba(225,225,225,0)
按钮边框宽度：0px
按钮字母间距：2px
按钮字体：Lato、粗体 (B)、大写 (TT)
按钮图标：向右箭头
仅在悬停按钮时显示图标：否
按钮悬停字母间距：0px

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

保存设置

现在单击以编辑行设置并更新以下内容：

在设计选项卡下...

使用自定义宽度：是
自定义宽度：1366px

在高级选项卡下...

将以下自定义 CSS 添加到 Column 1 Main Element 框：

z-index: 999;

保存设置

复制您的行并更新它

第一行就是这样。 为了节省创建第二行的时间，复制您刚刚创建的行。

编辑重复的行设置如下：

在高级选项卡下...

取出 Column 1 Main Element 中的 Custom CSS 并将其添加到 Column 2 Main Element 框中：

z-index: 999;

由于我们的图像将位于右列，我们需要该列位于左侧动画文本的顶部。

保存设置

更新第二行中的图像模块和号召性用语模块

接下来将图像模块拖到右列，并将分隔器模块和号召性用语模块拖到左列。

本节将有一个略有不同的列结构。 单击更改列结构行图标（在重复行图标旁边）并选择三分之二和三分之一的列布局。

现在我们需要做的就是重新访问行内的每个模块并进行一些更改。

首先，更新分频器模块设置如下：

在设计选项卡下...

模块对齐：右
动画方向：左

保存设置

接下来更新号召性用语模块设置，如下所示：

书名：《为自己说话》
文字方向：右
标题文本对齐方式：右
宽度：700px（输入）
动画方向：左

保存设置

接下来使用新的 790×880 图像更新右列中的图像模块。

这就是第 3 节的内容！

看看你的结果。

构建演示的第 4 部分

第 4 节通过一些高级 CSS 技巧将图像模块的设计提升到另一个层次。 而且，堆叠文本模块以将它们折叠在铰链上与交付结合得很好。 让我们潜入。

使用 Visual Builder，添加一个包含两列（二分之一）行的常规部分。 在我们添加第一个模块之前，让我们为我们的部分添加背景颜色。 单击以编辑部分设置。

在内容选项卡下，选择背景颜色选项卡并输入颜色#262938。

保存设置

添加第一个文本模块

在左栏中添加一个文本模块并更新文本设置，如下所示：

在内容选项卡下...

在内容框的文本选项卡中输入以下 html：

<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>

在设计选项卡下...

文字颜色：浅
标题字体：Playfair Display，粗体 (B)
标题字体大小：38px
标题行高度：1.3em
自定义边距：底部 20px
动画：折叠
动画方向：向上

添加第二个文本模块

接下来直接在当前文本模块下添加另一个文本模块。 然后按如下方式更新设置：

在内容选项卡下...

内容：“Lorem ipsum dolor sat amet，consectetur adipiscing 精英。 Phasellus bibendum est vitae felis rhoncus gravida。 Sed nec purus tempus, sagittis mi id, efficitur nisl。 Sed nec purus tempus、sagittis mi id、efficitur nisl。”

在设计选项卡下...

文字颜色：浅
文字字体大小：18px
文字文字颜色：rgba(255,255,255,0.66)
文本行高：1.9em
自定义边距：40px 底部
动画风格：折叠
动画方向：下
动画延迟：150ms

保存设置

添加按钮模块

在最后一个文本模块下添加一个按钮模块，更新设置如下：

按钮文字：了解更多
按钮网址：#

为按钮使用自定义样式：是

按钮文字大小：15px
按钮文字颜色：#01254c
按钮背景颜色：#ffffff
按钮边框半径：0px
按钮字体：粗体 (B)、大写 (TT)

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

动画风格：幻灯片
动画方向：下
动画持续时间：1600ms
动画延迟：150ms
动画强度：20%

保存设置

将图像模块添加到右列

这就是那个列。 现在我们需要在右栏中添加一个图像模块。 然后按如下方式更新设置：

在内容选项卡下...

图片网址：[插入您的 600×400 图片]

在设计选项卡下...

强制全角：是

动画风格：幻灯片
动画方向：右
动画延迟：800ms
动画强度：20%

保存设置

更新行设置

现在单击以编辑行设置并更新以下内容：

在设计选项卡下...

使用自定义宽度：是
自定义宽度：1366px

自定义填充：顶部 27 像素，右侧 0 像素，底部 170 像素，左侧 0 像素
第 1 列自定义填充：顶部 6%

在高级选项卡下...

将以下自定义 CSS 添加到 Column 1 Main Element 框：

z-index: 999;

这个 css 添加确保文本在动画期间保持在图像的顶部。

然后将以下自定义 CSS 添加到 Column 2 Main Element 框：

transform: scale(1.3);
transform-origin: top right;

这个 css 添加了一个巧妙的设计来放大（增加）第 2 列（图像）中所有内容的大小。 变换原点属性告诉列从行的右上角缩放。 这会创建左侧文本和图像的轻微重叠。

保存设置

复制和更新您的行

现在就像我们在第 3 节中所做的那样，我们将复制该行。 复制行后，将2个文本模块和按钮模块从左列拖到右列。 并将图像模块从右列拖到左侧。 现在我们需要做的就是对重复的行及其内容进行一些小的更新。

首先，让我们使用以下内容更新行设置：

在设计选项卡下...

自定义填充：顶部 40 像素，右侧 0 像素，底部 40 像素，左侧 0 像素
第 1 列自定义填充：[恢复为默认值； 擦除 6% 顶部]
第 2 列自定义填充：顶部 6%

在高级选项卡下...

从 Column 1 Main Element Box 和 Column 2 Main Element Box 中删除自定义 CSS。 这是从重复中延续下来的，我们不再需要它了。

更新图像模块

接下来，使用以下内容更新图像模块（现在在左列中）：

在内容选项卡下...

图片网址：[插入新的 600×400 图片]

在设计选项卡下...

动画方向：左

在高级选项卡下...

如果您认为此图像已经模糊。 再想想！ 添加此模糊效果所需要做的就是将以下自定义 CSS 行添加到 Main Element 框：

filter: blur(5px) opacity(.6);

除了模糊效果，这个 css 还使图像半透明，不透明度为 60%。

保存设置

更新右栏中的文本模块

移至右列，使用较短的 h1 标题更新顶部文本模块内容：

<h1>Consectetur adipiscing elit</h1>

保存设置

瞧！ 我们都完成了第 4 部分。让我们看看我们的最终结果。

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

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

享受！

下载布局包

免费下载

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

下载

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

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

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

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

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

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

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

包起来

除了让我对碳水化合物有点饥渴之外，本节还展示了显示和动画图像的创造性方法。 此外，带有延迟按钮滑动的铰链上折叠的文本模块进一步吸引用户单击 CTA。

接下来

在本系列的第 3 部分中，我将向您展示一种设计和动画模糊模块的漂亮方法。 此部分布局可用于多种目的。 我可以看到这是展示您的服务流程或您的服务或产品列表的一种方式。

期待它。

不要忘记在下面的评论中联系！