如何使用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”：指的就是动态图片的来源链接地址了，这时候我们要去找一个网站—
点击右下角的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的样式功能进行设置
3.1、“Width”：指的是该动态图片的展示宽度
3.2、“Max width”：指的是该动态图片的最大展示宽度。这两者的区别在于，假设动态图片的最大宽度是500px，如果你在Max width中设置了300px，那么你在width中即使设置为400或者450px都不产生效果，只能展现300px的宽度
3.3、“Opacity”：指的是不透明度，它有正常显示和鼠标悬停两种效果，这个功能在其他的Elementor功能元素中已经讲解过很多次了，这里不再赘述
3.4、“Transition Duration”：指的是过渡时间，也就是从完全透明度到自己预设透明度之间两种效果转换的时长。这样的设置好处在于，从不透明到透明不会显得很突兀。
好了，以上就是本章关于 如何使用Elementor的Lottie功能 的全部内容。Lottie是一个非常出色的能够动态展示和表达网站内容的Elementor功能。合理的利用Lottie的动态图片展示效果功能，能够更好的吸引访客的注意力，提升页面停留时间和后续的点击转化！
如果还有不理解的地方，请使用百度或者谷歌浏览器搜索关键词--“Jack外贸建站”，排名首页首位的就是我的网站，网站上有更多外贸建站、谷歌SEO优化、外贸客户开发等实操干货内容在等着你哦!
