如何在 WordPress 中添加 Lottie 动画（4 个简单步骤）

在 WordPress 中使用 Lottie 动画是美化页面的好方法。 它们通常是轻量级和可定制的，因此可以帮助您创建引人入胜的内容，而不会损害您的用户体验 (UX)。 但是，您可能正在寻找一种轻松的方式将它们添加到您的站点。

幸运的是，这个过程比您想象的要容易。 通过使用像 Otter Blocks 这样的插件，您只需点击几下即可添加和自定义 Lottie 动画。 您还可以设置可见性条件，以便它们在正确的时间播放。

Lottie 动画简介

Lottie 是一种用于网络动画的开源文件格式。 它使您能够为您的品牌创建自定义动画并在您的网站上使用它们：

当然，您始终可以选择 GIF，但这些文件会拖累您的网站。 Lottie 动画比 GIF 小得多。 因此，它们可以帮助您让您的网站更有趣，同时保持您的用户体验并提供快速加载时间。

此外，Lottie 动画带有很多自定义选项。 图书馆本身内容广泛，可以访问数以千计的元素、人物和插图。 但是，您还可以交换颜色、更改显示设置和添加可见性条件。

自定义动画可以帮助您给访问者留下深刻印象。 此外，它们还可以使您的网站看起来清新独特。

如何将 Lottie 动画添加到 WordPress（4 个步骤）

现在您对 Lottie Animations 有了更多的了解，让我们看看如何将它们添加到您的 WordPress 网站：

第 1 步：安装并激活 Otter Blocks

有很多方法可以在 WordPress 中添加 Lottie 动画。 例如，您可以使用 HTML 和 JavaScript。 但是，此方法可能相当复杂。

或者，您可以使用 Lottie 动画插件，尽管这可能与所有页面构建器不兼容。 另外，它没有提供很多风格选择。

将 Lottie Animations 添加到您的站点的最简单方法是使用像 Otter Blocks 这样的插件：

此插件向您的站点添加新的内容块和模板，包括用于 Lottie 动画的块。 它还通过自定义 CSS、动画、可见性条件等扩展了块编辑器的功能。 因此，它可以帮助您更有效地设计页面并减少对页面构建器的需求。

如果您升级到 Otter Blocks Pro，您将可以使用高级功能，例如特殊的 WooCommerce 块和其他样式设置。 但是，您不需要 Pro 版本即可使用 Lottie 动画功能。

如果您想使用免费版本，请前往 WordPress 仪表板中的插件>添加新插件并搜索“Otter Blocks：”

然后，单击Install > Activate 。 您现在应该在块编辑器中看到一系列新块。

第 2 步：从 Lottie 库中选择一个动画

现在您已经在您的网站上设置了 Otter Blocks，您可以前往 Lottie 库选择一个动画。 要访问这些设计，您需要创建一个免费帐户。

创建个人资料后，导航至“发现”并选择“免费即用型动画” ：

在这里，您可以浏览可用于网站、应用程序和社交媒体的 Lottie 元素库：

当您找到要使用的动画时，单击该设计。 将出现一个弹出窗口，您可以在其中对动画的外观进行一些更改：

例如，您可以调整动画速度并更改背景颜色。 如果你点击Edit Layer Colors ，你将被带到 Lottie Editor：

在这里，您可以自定义设计任何部分的颜色。 只需单击您想要更改的元素部分，转到所有颜色并使用颜色选择器应用新色调：

如果您进行了不喜欢的更改，请单击屏幕左上角的撤消箭头。

第 3 步：将 Lottie 动画 URL 粘贴到您的 Otter Block 或上传 Lottie 文件

对设计感到满意后，您可以通过两种方式将其添加到 WordPress：

1. 您可以复制 Lottie Animation URL 以将来自 LottieFiles 服务器的版本添加到您的站点。 您会在设计下方的动画弹出窗口中找到它。
2. 您可以通过单击右上角的下载按钮并选择dotLottie格式，将完成的 LottieFile 下载到您的计算机。 这将使您可以在服务器上托管文件。

然后，返回您的 WordPress 网站并打开页面或张贴您要插入动画的位置。

单击以添加新块并搜索“Lottie Animations：”

将块添加到您的页面。 然后，选择以下选项之一：

• 从 URL 插入——如果你想在 LottieFiles 的服务器上输入 Lottie 文件的链接，请使用它。 您需要做的就是粘贴您从 LottieFiles 网站复制的Lottie 动画 URL链接。
• 上传——如果您从 LottieFiles 下载了实际的 dotLottie 文件，请使用它。 然后您可以将该文件上传到您的 WordPress 网站。

接下来，按Enter键，动画将出现在页面上：

您现在可以保存更改并继续执行最后一步。

第 4 步：使用 Otter Blocks 自定义您的动画

现在您已经在 WordPress 中添加了 Lottie 动画，您可以自定义设计和布局了。 在“阻止”设置中，您会看到一系列显示选项。

在TRIGGER下，您可以选择自动播放、滚动、悬停或单击。 在页面上完成以下操作之一之前，动画不会播放：

您还可以选择切换动画以循环播放。 此外，您可以使用滑块调整动画速度、反转方向并更改设计的宽度。

如果要更改背景颜色，请单击“背景”选项卡。 在这里，您可以选择默认的纯色选项之一，使用颜色选择器，或选择渐变背景：

如果您前往Visibility Conditions ，您将能够将动画配置为仅在特定情况下出现：

例如，您可能希望该块仅对登录用户可见，或者在特定日期显示。 为此，请单击添加规则组。 然后，选择箭头以打开设置：

在CONDITION下，使用下拉菜单配置您的可见性设置。 您可以添加多个条件并创建其他规则组。

开始使用 WordPress 中的 Lottie 动画

回顾一下，以下是在 WordPress 中添加 Lottie 动画的四个步骤：

如需更多改进原生 WordPress 编辑器的方法，您可以查看我们最好的 WordPress 块插件的完整集合。

您对在 WordPress 中添加 Lottie 动画有任何疑问吗？ 在下面的评论部分让我们知道！