如何使用 Divi 的新动画效果

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

动画可以使页面栩栩如生。 如果有效地完成，用户可以参与并更倾向于探索您页面上的内容。 如果做得不好，动画会完全分散用户的注意力，并使他们在茫然失望的状态下离开。 当用户向下滚动页面时，动画的速度、时间和强度都在这种运动交响乐中发挥着重要作用。

Divi 的高级动画功能允许您为网站的任何元素添加动画。 您可以结合这些动画元素来创建无数的运动组合，使您的部分变得生动。

在本系列的第 1 部分中，我将向您展示如何使用视觉构建器来构建和动画演示我们现场演示页面的前两个部分，展示 Divi 动画功能的强大功能。

让我们开始吧。

这是我们将在本系列中构建的内容的先睹为快

系列的第 1 部分

第 1 节

第 2 节

系列的第 2 部分

第 3 节

第 4 节

系列的第 3 部分

第 5 节

系列的第 4 部分

第 6 节

系列的第 5 部分

第 7 节

系列的第 6 部分

第 8 节

第 9 节

准备设计元素

对于第一部分，您将需要两个图像。 第一个是尺寸约为 1280×800 的全屏背景图像。 这是我正在使用的一个：

第二张图像是同一图像的编辑版本，已垂直翻转并向底部淡出。 第二张图片将作为主要标题的背景，大小应在 800×400 左右。

要创建颠倒的图像，请在“预览”中打开图像并选择“工具”>“垂直翻转”或在 Photoshop 中打开图像，选择“图像”>“图像旋转”>“垂直翻转画布”。 为了给图像底部添加淡出效果，我在画笔模式下使用了橡皮擦工具，大小为 800px，硬度为 0%。 然后我按住 shift 并沿着底部边缘拖动画笔。

确保将其导出为 png 文件。

如果您没有 Photoshop，您可以尝试使用 gimpshop 等免费照片编辑解决方案来完成许多相同的设计编辑。 如果您不知道如何使用照片编辑软件（并且此时不想学习），请暂时忽略第二张图片，或使用下面的一张（单击并将其拖到您的桌面）。

对于第二部分，您将需要两张图片。 第一个应该是像这个这样的 730×490 左右。

第二个应该是 525×660 左右，如下图所示。

理解动画术语

如果您还没有，请继续阅读介绍高级动画的功能更新帖子。 在帖子的最后，尼克给出了一个有用的定义/描述，您将在整个构建器中找到每个动画功能。 了解这些动画功能的实际作用对于创建过程很重要。

一旦您了解了这些动画功能是什么，让我们深入研究。

如何使用 Divi 的新动画效果

订阅我们的 YouTube 频道

添加您的新页面设置

从 WordPress 仪表板，转到页面 > 添加新。 然后为您的页面添加标题。 接下来，在页面右上角的框中找到Divi Page Settings，然后选择Dot Navigation“ON”。 在页面属性框中，为页面模板选择空白页面。 最后，单击“使用 Divi Builder”按钮并部署 Visual Builder 以开始构建布局。

构建部分 1：全屏标题设计和动画

此标题部分的行为很像设置为全屏的全宽标题模块。 换句话说，当站点加载时，无论窗口大小如何，该部分都将填充浏览器窗口的整个宽度和高度。 但是我们将使用标准部分并将高度设置为 100vh，而不是使用全宽头模块。 这样我们就可以在其中添加一个文本模块。

使用可视化构建器，单击 编辑启动构建器时默认已显示的标准截面的截面设置。 更新以下内容：

在内容选项卡下...

背景图片：[输入您的 1280×800 背景图片]
使用视差效果：是
视差法：真视差

在设计选项卡下...

自定义填充：顶部 5%，右侧 0px，底部 5%，左侧 0px

在高级选项卡下...

在 Main Element 框中添加以下自定义 CSS：

min-height: 100vh

这一行 css 告诉该部分显示 100% 的视口高度。

保存设置

接下来在您的行中插入一个单列结构，并向该列添加一个文本模块。 更新文本模块设置如下：

在“内容”选项卡下...

只需在内容框中添加“Divi”一词即可。

在设计选项卡下...

文本字体：Oswald，大写 (TT)
文字字体大小：14px
文字文字颜色：#08408e
文本字母间距：1.5em（您需要输入）
文字方向：居中
自定义保证金：2%
动画风格：翻转
动画重复：一次
动画方向：右
动画持续时间：2000ms
动画延迟：1100ms
动画强度：100%
动画开始不透明度：0%
动画速度曲线：渐入渐出

超时... 让我们暂停一分钟，以便我向您展示手动添加此类似动画需要什么。

这是动画所需的内联样式的 html：

<div class="et_animated flipLeft" style="position: absolute; animation-duration: 2000ms; animation-delay: 1100ms; opacity: 0; animation-timing-function: ease-in-out; transform: perspective(2000px) rotateY(-90deg);">
<div style="position:relative;">Divi</div>
</div>

这是动画所需的 CSS：

@keyframes et_pb_flipLeft {
    from {
        transform-origin: center
    }

    to {
        opacity: 1;
        transform: rotateY(0)
    }
}

.et_animated.flipLeft {
    animation-name: et_pb_flipLeft
}

.et_animated {
    animation-fill-mode: both!important;
}

这不包括当动画在浏览器窗口中可见时激活动画所需的代码。 无论如何，所有这些都说明拥有这些内置动画功能可以节省大量时间。 并且能够在编辑动画选项时实时查看动画是相当可观的。

现在让我们继续更新我们的文本模块设置：

在高级选项卡下...

将以下自定义 CSS 行添加到 Main Element 框中：

text-indent: 1.5em

保存设置

接下来直接在您刚刚创建的文本模块下添加另一个文本模块，并按如下方式更新设置：

在内容选项卡下...

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

<p><span>Believing</span><br />is  Seeing</p>

在设计选项卡下...

文字颜色：浅
文本字体：Oswald，大写 (TT)
文本字体大小：8vw（你必须输入它；这使得字体大小为视口宽度的 8%）
文字文字颜色：rgba(255,255,255,0.79)
文本行高：1.4em
文字方向：居中
动画风格：折叠
动画方向：向上
动画持续时间：1800ms
动画延迟：0ms
动画强度：60%

保存设置

此动画效果将通过从看似平坦的位置折叠（或站立）来显示主要标题。 现在我们已经完成了主要的标题文本，让我们将颠倒的背景图像添加到行中。

现在转到包含您刚刚创建的两个文本模块的行的行设置，并按如下方式更新设置：

在内容选项卡下...

背景图片：[插入您的 800×440 图片]
背景图片尺寸：适合
背景图片位置：顶部中心
背景图像重复：不重复

在设计选项卡下...

使用自定义宽度：是
单元： ％
自定义宽度：50%
自定义填充：顶部 12%，右侧 0%，底部 5%，左侧 0%
动画风格：幻灯片
动画方向：向上
动画延迟：300ms
动画强度：20%

此动画效果将图像向上滑动，几乎就像从山后升起一样。

这就是第一部分。 让我们看看我们的最终设计和动画。

这里的三个动画元素包括 Row（向上滑动）、带有文本“Believing is Seeing”（从其中心向外折叠）的文本模块以及带有文本“Divi”（延迟）的文本模块在其他元素停止后向右翻开）。 这种组合通过有目的地和及时地展示不同的内容来真正吸引访问者。

建筑第 2 部分

我们动画演示页面的第二部分展示了一种微妙但非常酷的方式来显示页面上的内容。 事实上，几乎不可能一眼就认出所有的动作。

要构建第二部分，请在上一部分下添加一个常规部分。 在该部分中添加一个两列（一半一半）的行。

在左栏中，添加具有以下设置的文本模块：

在内容选项卡下...

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

<h1>Time is money</h1>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus hendrerit pretium felis, sit amet sollicitudin eros dignissim at. Cras molestie nisl enim.</span></p>

在设计选项卡下...

文字颜色：浅
文字字体：蒙特塞拉特
文字字体大小：18px
文本行高：1.8em
标题字体：Montserrat，粗体 (B)，大写 (TT)
标题字体大小：39px（桌面）
标题行高度：2.2em
底部边距：50px
动画风格：幻灯片
动画方向：向上
动画强度：10%

此动画效果将通过将文本块向上滑动到视图中来显示文本块。

保存设置

接下来在刚刚创建的 Text 模块下添加一个按钮模块。 更新按钮模块设置如下：

在内容选项卡下...

按钮文字：了解更多
按钮 URL：#（或任何你想要的）

在设计选项卡下...

按钮对齐：左
文字颜色：浅
为按钮使用自定义样式：是
按钮文字大小：15px
按钮边框半径：0
按钮字母间距：3px
按钮字体：Montserrat，粗体 (B)，大写 (TT)
显示按钮图标：是
自定义填充：顶部 10 像素，右侧 30 像素，底部 10 像素，左侧 30 像素
动画风格：幻灯片
动画方向：下
动画延迟：100ms
动画强度：10%

为了抵消上面之前文本的效果，此动画效果将通过将按钮向下滑动到视图中来显示按钮，并稍有延迟。

您还看不到文本和按钮，因为它目前是白底白字。 没关系。 我们将很快添加我们的背景。

接下来将一个分隔模块添加到右列。

然后更新设置如下：

在设计选项卡下...

高度：260px

在高级选项卡下...

禁用桌面上的可见性

在此处添加分隔线将有助于背景图像在移动设备上保持可见。

保存设置

现在让我们为每一列添加背景。 转到行设置并更新以下内容：

在内容选项卡下...

第 1 列背景渐变颜色：#fe8840，rgba(238,78,78,0.9)
第 1 列梯度方向：135deg
第 2 列背景图片：[输入您的 730×490 图片]
第 2 列背景图像位置：左上角
第 2 列背景图像重复：无重复

在设计选项卡下...

使用自定义宽度：是
自定义宽度：1366px
使用自定义装订线宽度：是
天沟宽度：1
均衡柱高：是
自定义填充：顶部 0px、右侧 0px、底部 0px、左侧 0px
第 1 列自定义填充：顶部 5%，右侧 7%，底部 5%，左侧 7%
动画风格：折叠
动画方向：向上
动画持续时间：800ms

此动画效果将通过折叠（或站立）将整行显示在视野中。

在高级选项卡下...

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

box-shadow: -20px 0px 60px -20px rgba(255, 130, 65, 0.88);

保存设置

接下来在您刚刚完成创建的行下添加一个两列（三分之一三分之二）的行。

在左栏中添加一个分隔模块并更新设置如下：

在设计选项卡下...

高度：400px

在高级选项卡下...

禁用桌面上的可见性

在此处添加分隔线将有助于背景图像在移动设备上保持可见。

保存设置

为了节省时间，请继续右键单击并复制上方行左列中包含文本“时间就是金钱”的文本模块。 然后将其粘贴到下方行的右侧（三分之二）列中。

更新新的文本模块设置如下：

在内容选项卡下...

在内容框中将 h1 标题文本更改为“像专业人士一样通勤”。

在设计选项卡下...

文字文字颜色：#a8a8a8
标题文本颜色：#414159
动画风格：幻灯片
动画方向：下
动画强度：10%

此动画效果通过将文本块向下滑动到视图中来显示文本块。

现在右键单击并复制上一行左列中的按钮模块，然后将其粘贴到您刚刚完成编辑的文本模块下。

更新按钮模块设置如下：

按钮文字颜色：#ff4823
按钮边框颜色：#ff4823
按钮悬停文本颜色：#ff2323

保存设置

对于最后一步，通过更新以下内容来编辑您的行设置：

在内容选项卡下...

背景颜色：#ffffff
第 1 列背景图片：[插入您的 525×660 图片]
第 1 列背景图像位置：左上角
第 1 列背景图像重复：无重复
第 2 列背景渐变颜色：rgba(255,255,255,0.91), #ffffff
第 2 列梯度方向：135deg

在设计选项卡下...

使用自定义宽度：是
自定义宽度：1040px
使用自定义装订线宽度：是
天沟宽度：1
均衡柱高：是
自定义填充：顶部 0px、右侧 0px、底部 0px、左侧 0px
第 2 列自定义填充：顶部 5%，右侧 7%，底部 5%，左侧 7%
动画风格：折叠
动画方向：下
动画持续时间：800ms

此动画效果将通过将其折叠到视图中来显示整行。

在高级选项卡下...

在 Main Element 框下添加以下自定义 CSS：

box-shadow: 0 40px 90px -35px rgba(0,0,0,.3);

这就是本节。 看看你的结果。

因为本节的动画和设计元素很微妙，我认为它是大多数页面可以使用的设计和动画类型的一个很好的例子。 顶行和底行打开，就像您从后面看打开的书一样。 文本和按钮在顶行稍微向上移动，在底行向下移动。 一个很棒的组合。

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

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

享受！

下载布局包

免费下载

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

下载

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

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

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

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

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

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

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

包起来

我希望这两个部分将成为使用 Divi 动画功能的未来构建的灵感。 设计理念本身就很棒，只需稍作调整，布局就可以轻松适应任何网站。 请继续关注，因为我们将在本系列中介绍更多内容。

接下来

在本系列的下一部分中，我将通过构建动画演示页面的第 3 部分和第 4 部分来继续探索 Divi 的高级动画功能。

这是您可以期望构建的内容。

第 3 节：

第 4 节：

请在下面留下您的任何意见。

干杯!