关于Divi 5的Lottie模块，您需要了解的一切

Divi 5的Lottie模块为您的页面带来了动态，轻量级的动画，使您的页面更具吸引力和互动性。正确的视觉效果是吸引注意力并保持访客参与的关键。借助Lottie模块，Divi 5允许您添加表演友好的专业动画。

在这篇文章中，我们将说明您需要了解的有关Lottie模块的所有信息，包括其功能，设置过程，自定义选项以及使用它的方法。让我们跳入吧！

什么是Lottie文件？

Lottie动画是轻巧的，基于JSON的图形，可作为可扩展向量。他们提供可扩展的视觉效果，而无需大量的视频或gif。由于它能够将性能与灵活性相结合，洛蒂（Lottie）在现代网络设计中获得了流行。与传统动画不同，Lottie文件使用基于矢量的JSON数据，确保视觉效果清晰，并在所有设备和屏幕尺寸上进行平稳播放。

订阅我们的YouTube频道

在Divi 5中，Lottie模块将这些动画无缝集成到视觉构建器中，使用户可以单击几下在其Divi网站上添加动态的现代触摸。无论是突出CTA还是在英雄部分中增加天赋，Lottie模块都可以使动画毫不费力地合并动画。

借助Lottie模块，Divi 5将您如何将运动带入网页设计，使其令人着迷和高效。

关键功能

Divi 5中的Lottie模块是一种多功能工具，具有功能，使创建动态，优化的动画变得容易。它提供了对动画行为的控制，使您可以调整速度，方向，触发器等。让我们看一下它的一些关键功能。

易用性

Divi 5中的Lottie模块的设计考虑了简单性，使其对所有技能水平的用户都可以易于访问。您无需成为编码专家即可在Divi网站上添加专业的，引人注目的动画。

由于在线可用的资源数量，采购动画很容易。 Lottiefiles和Lordicon等平台提供了广泛的免费和优质洛蒂动画的库，从微妙的装载图标到充满活力的图形。

对于那些寻求独特触摸的人，您可以使用BodyMovin插件等工具来创建自定义动画。该插件将动画导出与Lottie模块兼容的JSON文件。无论您选择预制还是自定义动画，该过程都很简单。

自定义选项

Divi 5中的Lottie模块提供自定义选项，可控制Lottie文件的几个方面。对于交互式体验，请使用触发动画选择何时激活动画，例如载荷，何时进入视口，悬停，单击或滚动。您可以启用循环动画​​，以便在lottie文件上连续运动，调整动画速度，选择方向（向前或向后），然后在播放模式字段中进行正常或在弹跳之间进行选择。

上传JSON动画

向Divi 5添加Lottie动画需要上传JSON文件，这是Lottie文件的标准格式。但是，WordPress不在本地支持其媒体库中的JSON上传，因此您需要采取其他步骤以确保可以上传它们。

第一个选项是创建一个子主题，并在您的子主题函数的函数上添加PHP片段。此方法是轻巧的，可确保安全处理动画文件。另外，您可以使用类似插件的文件上传类型来允许JSON上传而无需触摸任何代码，非常适合喜欢插件解决方案的用户。有关实施这两种方法的逐步指南，请查看我们的支持文章，该文章将带您完成整个过程，以设置Divi 5网站以进行JSON上传。

如何在Divi 5中使用Lottie模块

在Divi 5中添加Lottie动画很简单。从Lottiefiles或Lordicon等来源创建或下载Lottie动画。查找并单击Visual Builder中的Lottie模块以将其添加到您的页面中。

上传JSON文件或将其定位在您的WordPress媒体库中。

选择触发动画。您可以将其设置为在加载，查看，悬停，单击或滚动以动画中进行动画。

如果您希望Lottie动画具有交互式元素，请使用模块的滚动来动画触发。

使用此触发器提供了创造动态和引人入胜的用户体验的好方法。页面加载时，不要使用动画，而是滚动以将动画的进度直接与用户的滚动行为联系起来。当用户向下滚动页面时，动画会逐帧进行。这使动画成为一种交互元素，使体验更加动态。

如果您希望动画无休止地循环，请启用循环动画​​切换。您还可以设置动画速度，控制方向（向前或向后），然后选择“正常”或“弹跳”以进行游戏模式。

在“设计”选项卡中，您可以控制尺寸，对齐，高度，间距等。

尽管您无法在Divi 5中更改Lottie文件的颜色，但大多数Lottie网站都可以在下载之前选择特定的颜色和触发宽度。

如您所见，在Divi 5网站中添加Lottie文件需要几秒钟，并在您的网页中增加了一些天气，而不必担心性能。

使用Lottie模块的实际示例

Divi 5中的Lottie模块提供了广泛的应用程序，从而增加了具有动态动画的网站的才能。从增强接触页面到引人注目的英雄部分，其灵活性都适合所有类型的设计。

凭借其无缝集成和自定义选项，Divi用户可以在整个网站上创建引人入胜的性能友好体验。

联系页面

添加Lottie动画可以使您的联系页面更具吸引力。例如，在工作时间，电话号码和其他联系信息旁边放置Loopie Lottie模块，以创建交互式和诱人的体验，从而增强转化措施而不减慢您的网站。

404页

通过嬉戏的Lottie动画将令人沮丧的404个错误变成令人难忘的时刻。将旋转的指南针或动画搜索图标添加到您的404页面，并配上简短的消息。

使用循环动画​​设置保持运动连续，并在负载上触发它以立即引起注意。这使得404页的感觉不像死胡同，而更像是一个创意的接触点。

特色产品

展示您最喜欢的Woo产品或类别，其中包括Lottie动画，以突出出售产品。例如，将销售徽章Lottie Animation放在特色产品旁边以突出显示。

首先，将动画设置为触发负载。然后，它会随着用户浏览，将目光吸引到产品上并提高视觉吸引力。

服务部分

通过视觉代表您的产品的Lottie动画将您的服务部分带入生活。例如，为您的营销机构使用循环动画​​，调整速度以匹配音调。

此外，将视图触发器设置为激活动画在用户探索时，以确保动态，专业的演示文稿。

英雄部分

通过大胆的Lottie动画为您的网站定下基调，使您的英雄部分令人难以置信。首先，使用Divi的Lottie模块添加平滑的背景动画。然后，将其放在行和模块后面，并具有Divi的位置设置。

例如，流动，现代的动画或微妙的粒子效应几乎没有努力为您的网站增加深度。使用加载扳机即时撞击，并调整播放模式以弹跳以产生迷人的效果。

下载文件

免费下载

加入Divi新闻通讯，我们将向您发送终极Divi着陆页布局包的副本，以及大量其他惊人和免费的Divi资源，提示和技巧。跟进，您将立即成为Divi大师。如果您已经订阅，则只需在下面的电子邮件地址中输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

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

结论

在Divi 5中，Lottie模块简化了为网站添加轻巧的动态动画。无缝集成到视觉构建器中，它可以以最小的努力实现专业动画。灵活的控件，广泛的自定义和免费的Lottie文件平台使您的网站变得容易。

准备尝试Lottie模块了吗？在评论或社交媒体上分享您的想法或创作。