如何使用Elementor的Lottie功能

Lottie这个词不太好翻译，用谷歌翻译过来是“乐透”的意思。所以很难从字面上看出来这个Elementor编辑器具有什么样的功能，但是当你尝试着用这个功能元素去创建自己网站页面的某些内容的时候，你会发现原来这小玩意还有这么强大的功能。在这里我先简单剧透一下，Lottie它的功能是生成类似活跃画面的一种动态效果。那么它具体是怎么操作的呢？接下来，Jack老师就和同学们一起去学习如何使用Elementor的Lottie功能。

第一步：将Elementor编辑器的Lottie功能元素添加到内容编辑区域

如上图所示，我们在左侧的Elementor编辑器中找到箭头1所指的“Facebook Page”功能元素，然后按住鼠标左键不松开，慢慢的拖到上图箭头2所指的地方，也就是内容编辑版块中。注意在没有将“Facebook Page”功能元素添加到内容编辑版块区域之前，内容编辑版块外面是一个灰色的虚线框，只有当出现了一个蓝色的虚线外边框之后才代表着我们已经成功的将“Facebook Page”功能元素添加到了内容编辑版块中！

第二步：对Lottie的主体功能进行设置

Lottie主体功能分两大板块，分别是source和setting，我们先说source部分。

2.1、“Source”：指的是动态图像的资源来源，有两种方式，一种是media File也就是视频类型，还有一种是External URL。我个人是比较偏好第二种External URL的，下面的内容讲解也将以此为主。在选择了source类型为External URL之后，我们进行下一步的操作

2.2、“External URL”：指的就是动态图片的来源链接地址了，这时候我们要去找一个网站—xxx_dkll=?f=d?._okg 然后在这个网站上门找到你想要的动态文件，比方说现在已经是2021年了，那么Jack老师就找一个和2021年有关的动态图片元素来为大家进行实操演示。

点击右下角的Elementor图标之后，这时候会跳出来一个网站账号注册，我们可以用谷歌账号通用一下（不得不说谷歌确实牛逼啊！），账号注册完成之后，我们会发现多了一个文件链接，如下图所示：

然后复制这个链接黏贴到我们自己网站后台Elementor编辑器中那个External URL中即可，这样我们就成功的将这个2021年的动态元素添加到自己网站上了。

2.3、“Alignment”：指的就是我们刚引入的这个内容对齐方式，有左对齐、居中对齐和右对齐三种方式！

2.4、“Custom Caption”：指的就是我们对这个引入的动态效果图设置一个自定义标题，当然你也可以留空不填

2.5、“Link”:指的是访客点击该动态图像之后是否需要页面跳转，如果不需要，那么选择None，如果选择需要跳转，那么选择custom Link，然后输入对应的跳转页面地址，甚至可以是非自己站点的页面链接，也可以是弹窗效果哦！

2.6、“Trigger”：指的是动态效果的触发条件。系统预设了4种触发条件，分别是“Viewport—窗口出现该图片产生动态效果”、“on click—鼠标点击该图片产生动态效果”、“on over—鼠标悬停该图片上产生动态效果”和“scroll—这个我也不是很理解，有兴趣的同学自己去尝试一下”。

2.7、“Viewport”：指的是显示窗口占整个动态效果图片百分之多少的时候，该元素进行动态展示

2.8、“Loop”：指的是动态效果是否需要循环展现，如果我们点击了loop，那么下面会多出来一个times选项，让我们设置循环展现的次数

2.9、“Play speed”：指的是动态效果的播放速度

2.10、“Star Point”：指的是动态效果的起始点，因为有些动态文件会比较长，开始阶段的某一部分可能不是我们需要的，所以我们可以设置动态效果起始点以节约访客时间

2.11、“End Point”：指的是动态效果的结束点，和上面的起始点一样的意思，这里不解释了

2.12、“Reverse”：指的是动态效果是否需要逆向播放。比方说动态画面是一个人从A点走向B点，那么点击reverse之后，动态效果就是这个人从A点走到B点，然后倒退着从B点走到A点

2.13、“Renderer”：指的是渲染器效果，除了我们常见的SVG之外还有还有canvas效果，同学们可以自己去产生一下，这两者之间的区别还是蛮大的

2.14、“Lazy Load”：指的是懒惰加载。这个是页面速度优化里面的相关内容，有兴趣的同学可以去翻翻我对这方面的相关文章，点击这里查看网页加速优化文章

第三步：对Lottie的样式功能进行设置