如何在 Divi 中为部分/行添加动画效果

已发表: 2017-08-11

在今天的 Divi 教程中，我们将向您展示如何在 Divi 中为部分和行添加动画效果。 Divi 主题本身提供了一些相关的动画效果，可帮助您为网站带来额外级别的交互。 在“高级”选项卡的“动画”子类别中，可以轻松地将这些效果分配给 Divi Builder 中的图像。

但是，如果您正在寻找一种方法将这些动画效果添加到您网站的其他模块、部分或行，那也是可能的。 在这篇文章中，我们将向您展示如何做到这一点。 除了向您展示如何添加内置动画效果外，我们还将向您展示如何将 wow.js 和 animate.css 集成到您的 Divi 网站中。

在这篇文章的最后，您将能够为行和部分添加漂亮的效果。 为了帮助您可视化该过程，我们想分享以下示例（我们将在本文末尾向您展示如何实现）：

动画效果

Divi Animations 还是 Wow.js 和 Animate.css？

你可能想知道在什么情况下你应该考虑使用 Divi 动画，在什么情况下 wow.js 和 animate.css 会做得更好。 如果您不想创建一些高级动画效果，使用 Divi 内置动画是最简单的解决方案，但 wow.js 和 animate.css 效果肯定也会为您的网站带来巨大的附加值。

何时使用 Divi 动画

您可以使用 Divi 中的五种可用动画效果：

  • 淡入
  • 底部幻灯片
  • 左侧滑入
  • 正确的滑入
  • 顶部滑入

虽然只有五种可能，但它们也是最常用的。 它们简单明了。 如果您想在不付出太多努力的情况下为您的网站提供不错的额外效果，Divi 动画效果就是您的最佳选择。 从您滚动并查看已添加效果的模块、行或部分的那一刻起，这些效果中的每一个都会被激活。 这样，您的访问者就不会错过位于页面底部的效果，例如。

要集成 Divi 动画效果，您不必在您的网站上上传子主题。 您可以在处理父主题的同时轻松添加这些效果。

何时使用 Wow.js 和 Animate.css

将 wow.js 和 animate.css 集成到您的网站中是您可能非常喜欢的，因为您有很多选择。 有 14 个动画效果类别，其中包含与该类别相关的不同效果。 您可以选择的类别如下：

  • 希望引人关注的人
  • 弹跳入口
  • 弹跳退出
  • 淡入淡出
  • 淡出退出
  • 脚蹼
  • 光速
  • 旋转入口
  • 轮换出口
  • 滑动入口
  • 滑动出口
  • 缩放入口
  • 缩放退出
  • 特价商品

您可以通过单击以下链接查看所有可用的效果。 滚动时也会出现这些动画效果。

如何在 Divi 中为部分/行添加动画效果

订阅我们的 YouTube 频道

使用内置动画效果

我们将向您展示的第一种可能性是内置动画效果。 我们将向您展示如何将效果应用于部分和行。 打开您要进行修改的页面。

在我们的示例中，我们将向页面的第一部分和第一行添加动画效果。 为部分或行添加动画在两种情况下都是相同的。 不同动画效果的 CSS 类代码如下：

  • 淡入 CSS 类： et-waypoint et_pb_animation_fade_in
  • 底部滑入 CSS 类： et-waypoint et_pb_animation_bottom
  • 左滑入 CSS 类： et-waypoint et_pb_animation_left
  • 右侧滑入：CSS 类： et-waypoint et_pb_animation_right
  • 顶级滑入式 CSS 类： et-waypoint et_pb_animation_top

向行添加动画效果

要将动画添加到某一行，请打开该行的设置并转到“高级”选项卡。 在高级选项卡中，将动画效果 CSS 类放置在 CSS 类字段中。 在这种情况下，我们将向您展示如何添加淡入动画。

动画效果

为部分添加动画效果

将动画效果添加到行的相同方法也适用于部分。 转到“高级”选项卡，将您选择的动画效果 CSS 类放置在“CSS 类”字段中。 在本例中，我们将向您展示如何添加顶部滑入动画效果。

结果

将效果添加到部分和行后，您将看到以下结果：

将 Wow.js 和 Animate.css 添加到您的子主题

在下一部分中，我们将向您展示如何将 wow.js 和 animate.css 添加到您的 WordPress 网站，以及如何在整个 Divi 主题中使用它。

首先，我想感谢 Jeremy Cookson 关于如何将 wow.js 和 animate.css 集成到 WordPress 的这篇文章。 在这篇文章的这一部分中，我们将向您展示如何为使用 Divi 主题构建的 WordPress 网站进行集成。

要将 wow.js 和 animate.css 添加到您的网页，您必须在您的网站上使用子主题。 如果您想知道如何创建子主题，请查看这篇文章。 创建子主题的主文件后，您需要添加另外两个文件以完成带有动画效果的子主题。

下载文件并将它们添加到您的孩子主题

让您的孩子主题触手可及，同时点击以下两个链接下载以下两个文件：

  • 动画.min.css
  • 哇.min.js

下载这两个文件后，在您的子主题中创建子文件夹。 将其中一个命名为 CSS，另一个命名为 JS。 之后，将 animate.min.css 放在 CSS 文件夹中，将 wow.min.js 放在 JS 文件夹中。

动画效果

上传子主题

您需要做的下一件事是上传并激活您刚刚添加 wow.js 和 animate.css 的子主题。 转到您的WordPress 仪表板 > 外观 > 主题 > 然后单击页面顶部的“添加新”。

将 PHP 代码添加到您的 Functions.php 文件中

上传子主题后，将以下 PHP 代码行添加到子主题的 functions.php 文件中：

//* 将 Animate.CSS 和 WOW.js 入队
add_action('wp_enqueue_scripts', 'sk_enqueue_scripts');
函数 sk_enqueue_scripts() {
wp_enqueue_style('animate', get_stylesheet_directory_uri() .'/css/animate.min.css');
wp_enqueue_script( '哇', get_stylesheet_directory_uri() . '/js/wow.min.js', array(), ”, true );
}
//* 入队脚本以激活 WOW.js
add_action('wp_enqueue_scripts', 'sk_wow_init_in_footer');
函数 sk_wow_init_in_footer() { add_action('print_footer_scripts', 'wow_init');}
//* 在 </body>function wow_init() { ?> 之前添加 JavaScript
<脚本类型=”文本/javascript”>
新哇().init(); </script><?php }

向行和节添加动画

将 wow.js 和 animate.css 效果添加到行和部分的系统与 Divi 动画效果相同。 您必须打开要添加动画效果的行或部分的设置。 接下来，您可以将分配给动画的 CSS 类放入您的部分或行的 CSS 类字段中。

向行添加动画

对于我们将向您展示行的示例，我们使用了在动画效果列表中找到的fadeInRight 效果。 转到“行”设置的“高级”选项卡，并将“哇淡入淡出”添加到“CSS 类”字段。 每次您想为网站的某个部分添加效果时，请确保在您使用的效果前加上“哇”。

结果

添加 CSS 类并预览您正在处理的页面后，您应该获得以下结果：

动画效果

将动画添加到部分

相同的方法适用于向部分添加动画效果。 转到“高级”选项卡，将“wowbounceInDown”CSS 类添加到您部分的“CSS 类”字段。

结果

如果您正确地遵循了所有步骤，您应该获得以下结果：

动画效果

高级选项

如果您想为动画添加一些额外的规范，您也可以这样做。 例如，您可以为您的动画效果之一添加延迟时间。 当您在同一部分中将部分动画与行动画相结合时，这可能会派上用场。 这样，您可以确保动画效果不会相互重叠。

为了向您展示如何添加此延迟时间，我们将结合本文前一部分中使用的两种效果。 一种动画效果分配给该部分，另一种分配给该行。 为了确保行动画效果不会丢失，我们将为其添加 2 秒的延迟时间。

打开行设置并返回到高级选项卡。 在 CSS Class 字段中，添加另一个名为“delay”的类。 该类尚不存在，但我们将在下一步中添加它。

现在，通过单击以下按钮将延迟 CSS 类添加到您正在处理的页面的设置中：

接下来，将带有 CSS 代码行的 CSS 类添加到自定义 CSS 字段。 如果你想添加 2 秒的延迟时间，就像我们在这个例子中要做的那样，你将需要以下 CSS 代码行： 

.delay {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-ms-animation-delay: 2s;
-o-animation-delay: 2s;
}

结果

添加延迟时间后，结果应如下所示：

动画效果

最后的想法

在这篇文章中，我们向您展示了如何向您的 Divi 网站添加动画效果。 我们为您提供了两种可能性。 第一个向您展示如何使用 Divi 提供的标准动画效果。 第二种可能性允许您集成 wow.js 和 animate.css。 在您的网站上使用动画效果可以帮助您强调要与访问者共享的内容。 除此之外，它看起来也很棒。 如果您有任何问题或建议； 确保您在下面的评论部分发表评论。

请务必订阅我们的电子邮件通讯和 YouTube 频道，这样您就不会错过重大公告、有用提示或 Divi 免费赠品！

精选图片由 Stocker 顶部/shutterstock.com 提供