{"id":4194,"date":"2021-09-15T19:33:11","date_gmt":"2021-09-15T19:33:11","guid":{"rendered":"https:\/\/flowragency.com\/?p=4194"},"modified":"2021-09-21T13:39:07","modified_gmt":"2021-09-21T13:39:07","slug":"lottie-elementor","status":"publish","type":"post","link":"https:\/\/flowragency.com\/en\/lottie-elementor\/","title":{"rendered":"Lottie Elementor animations, how to make your web pages dynamic?"},"content":{"rendered":"<div data-elementor-type=\"wp-post\" data-elementor-id=\"4194\" class=\"elementor elementor-4194\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-75b188d9 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"75b188d9\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-537bd48d\" data-id=\"537bd48d\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5f780bb elementor-align-center elementor-widget elementor-widget-lottie\" data-id=\"5f780bb\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;source_json&quot;:{&quot;url&quot;:&quot;https:\\\/\\\/flowragency.com\\\/wp-content\\\/uploads\\\/2021\\\/09\\\/74268-cute-tiger.json&quot;,&quot;id&quot;:10317,&quot;size&quot;:&quot;&quot;,&quot;alt&quot;:&quot;&quot;,&quot;source&quot;:&quot;library&quot;},&quot;source&quot;:&quot;media_file&quot;,&quot;caption_source&quot;:&quot;none&quot;,&quot;link_to&quot;:&quot;none&quot;,&quot;trigger&quot;:&quot;arriving_to_viewport&quot;,&quot;viewport&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:{&quot;start&quot;:0,&quot;end&quot;:100}},&quot;play_speed&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:1,&quot;sizes&quot;:[]},&quot;start_point&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:0,&quot;sizes&quot;:[]},&quot;end_point&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:100,&quot;sizes&quot;:[]},&quot;renderer&quot;:&quot;svg&quot;}\" data-widget_type=\"lottie.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"e-lottie__container\"><div class=\"e-lottie__animation\"><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-51e52086 elementor-widget elementor-widget-text-editor\" data-id=\"51e52086\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2>Lottie Elementor: custom animations in 3 clicks<\/h2>\nYou want to create movement, to illustrate your words in a creative way, to make the experience of your visitors pleasant and dynamic, but do not know how? Lotties are for you if you want a dynamic layout, easily!\n<ul>\n \t<li>The <a href=\"https:\/\/lottiefiles.com\/\" target=\"_blank\" rel=\"noopener\" data-schema-attribute=\"\">Lotties<\/a> allow to create dynamic animations with your colors, in a few minutes<\/li>\n \t<li>No widgets or extensions, Elementor bundles now integrate natively with the Elementor page builder<\/li>\n \t<li>Drag and drop compatible<\/li>\n \t<li>A flexible solution to create movement on your web pages, 100% compatible responsive design<\/li>\n<\/ul>\nReady for a step-by-step Lottie tutorial to make your website unique?\n<h2>What is a lottie animation?<\/h2>\n\n\nOpen source, Lottie animations are dynamic content created in JavaScript (JSON) that allow webmasters to integrate attractive and animated visuals on their sites for easy customization.\n\nThe Lottie format is named after Charlotte Lotte Reiniger, film director and pioneer of the animated silhouette concept.\nWe owe the democratization of the Lottie format to <a href=\"https:\/\/airbnb.io\/lottie\/#\/\" target=\"_blank\" rel=\"noopener\" data-schema-attribute=\"\"><strong>Airbnb<\/strong><\/a>. The company specializing in rental and booking between individuals launched this open source solution in 2017. It is Salih Abdul-Karim who is at the origin of the concept that allows to integrate in a few minutes dynamic animations on its site.\n\nOver time, banks of Lottie were born. The most famous being Lottiefiles. The website provides hundreds of illustrations created by freelance web designers and allows anyone to bring vitality to his site in a way that is easy to use. <strong>simple and intuitive<\/strong>.\n<h3>PNG, GIF and Lottie Elementor: which is the lightest format?<\/h3>\nThe weight of the files is an element <a href=\"https:\/\/flowragency.com\/en\/reussir-ses-posts-instagram\/\">key to<\/a> the proper functioning of a website. Whether it is for the indexing robots or for your visitors, if your site takes time to load, it will inevitably be impacted.\n\nFrom an SEO point of view, the indexing robots take this parameter into account.  As a general rule, the slower a web page is, the less favorable it will be in terms of positioning: loading speed is a guarantee of quality in order to offer the best possible user experience.\n\nFor the Internet user, a loading time of more than 3 seconds is enough to make him leave your site. In<strong> 80% of cases<\/strong>the user never returns.\n<script src=\"https:\/\/unpkg.com\/@lottiefiles\/lottie-player@latest\/dist\/lottie-player.js\"><\/script>\n\nTherefore, <strong>choosing the right image format <\/strong>is essential since it is one of the parameters that has the most impact on the heaviness and slowness of a site.\n\nYou probably think that an animated content is necessarily heavier than a static image?<strong> Not at all! <\/strong>Lottie animations are actually much lighter than a PNG or GIF image.\n<h3>Why choose a Lottie Elementor animation?<\/h3>\nIn addition to making your page dynamic and better engaging your visitor, Lottie animations offer many benefits:\n<ol>\n \t<li><strong>These are lightweight files<\/strong> that will not slow down your site or create bugs: two real hindrances for the Internet user and for your referencing<\/li>\n \t<li><strong>They are responsive and adapt to the interface<\/strong> Lottie animations are mobile-friendly and adjust to the screen size (computer, tablet, phone)<\/li>\n \t<li><strong>They can be integrated into different CMS and site-builders <\/strong>: WordPress, Shopify, Wix, Divi, <a class=\"wpil_keyword_link\" href=\"https:\/\/flowragency.com\/en\/services\/creation-de-site-internet-wordpress\/\" title=\"Elementor\" data-wpil-keyword-link=\"linked\">Elementor<\/a>... Lottie's dynamic content integrates perfectly with these platforms and plugins<\/li>\n \t<li><strong>They are cross-platform and fully native<\/strong>s (you don't need to code, the integration is done automatically)<\/li>\n \t<li>On any interface, the <strong>visual quality of the animations does not change<\/strong><\/li>\n \t<li>It is possible to<strong> make them interactive and dynamic<\/strong> according to one or more elements you can define.<\/li>\n<\/ol>\n<h2>How do I integrate Lottie animations with the Elementor site-builder?<\/h2>\nAs we said before, these Lottie animations can be integrated directly with <a href=\"https:\/\/console.elementor.com\/?ref=3300&amp;campaign=lottie-elementor\" target=\"_blank\" rel=\"noopener\" data-schema-attribute=\"\">site-builders like Elementor<\/a>.\n\nAt the agency, when we choose to use a page builder, Elementor is our preference. If you are still hesitating between the different page builders available, you can read our <a href=\"https:\/\/flowragency.com\/en\/elementor-ou-visual-composer\/\" target=\"_blank\" rel=\"noopener\" data-schema-attribute=\"\">Elementor VS. Visual Composer<\/a>.\n\n<strong>No need for coding<\/strong> or <strong>complex manipulations<\/strong>With just a few clicks, you can integrate dynamic content into your site and reinforce your branding through illustrations adapted to your needs.\n\nBefore we start explaining how to integrate animations into Elementor, you should know that Lottie offers<strong> free content, but<\/strong>\u00a0also premium content with varying rates from 0.99$ to 6.99$. In case you have specific needs, you can <strong>hire a designer<\/strong> who will make the animation you want.\n\n<strong>What you need before integration:<\/strong>\n<ul>\n \t<li><a href=\"https:\/\/console.elementor.com\/?ref=3300&amp;campaign=lottie-elementor\" target=\"_blank\" rel=\"noopener\" data-schema-attribute=\"\">Elementor<\/a> (freemium or pro - the free version allows you to integrate the animations)<\/li>\n<\/ul>\n<h3>How to embed a Lottie Elementor animation in minutes<\/h3>\n<ol>\n \t<li>Start by visiting the<a href=\"https:\/\/lottiefiles.com\/\" target=\"_blank\" rel=\"noopener\" data-schema-attribute=\"\"> official website of Lottie\u00a0<\/a>and choose the animation of your choice (paid, free or personalized)<\/li>\n \t<li>Once you have chosen your animation, you can make changes before downloading: change the colors, animation speed<\/li>\n \t<li>Download the animation in JSON format<\/li>\n \t<li>Go to the page on which you want to integrate the animation and drag the \"Lottie\" widget to the location of your choice<\/li>\n \t<li>Now that you have your \"Lottie\" tab in front of you, click on \"datafile\".<\/li>\n \t<li>Upload the JSON file you downloaded in step<\/li>\n \t<li>Your animation is displayed on your insert!<\/li>\n<\/ol>\n<h3>Need some help? Here is a step by step tutorial<\/h3>\n<h3 class=\"LC20lb DKV0Md\">\ud83d\ude0a\ud83d\udc47<\/h3>\n<a href=\"https:\/\/youtu.be\/BvgVkIUtuYE\" target=\"_blank\" rel=\"noopener\"><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone wp-image-10333 size-full\" src=\"https:\/\/flowragency.com\/wp-content\/uploads\/2020\/10\/Cover-videos-Flowr-lottie-files-tuto.jpeg\" alt=\"lottie elementor tutorial\" width=\"1920\" height=\"1080\" title=\"\" srcset=\"https:\/\/flowragency.com\/wp-content\/uploads\/2020\/10\/Cover-videos-Flowr-lottie-files-tuto.jpeg 1920w, https:\/\/flowragency.com\/wp-content\/uploads\/2020\/10\/Cover-videos-Flowr-lottie-files-tuto-300x169.jpeg 300w, https:\/\/flowragency.com\/wp-content\/uploads\/2020\/10\/Cover-videos-Flowr-lottie-files-tuto-1024x576.jpeg 1024w, https:\/\/flowragency.com\/wp-content\/uploads\/2020\/10\/Cover-videos-Flowr-lottie-files-tuto-768x432.jpeg 768w, https:\/\/flowragency.com\/wp-content\/uploads\/2020\/10\/Cover-videos-Flowr-lottie-files-tuto-1536x864.jpeg 1536w, https:\/\/flowragency.com\/wp-content\/uploads\/2020\/10\/Cover-videos-Flowr-lottie-files-tuto-18x10.jpeg 18w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/a>\n\nAfter integrating your Lottie animation with Elementor, you can make some adjustments:\n<ul>\n \t<li>Speed of animation<\/li>\n \t<li>Setting up a repetition loop<\/li>\n \t<li>Inversion of the direction of the animation<\/li>\n \t<li>Autoplay or Mouse over (animation on mouse over)<\/li>\n<\/ul>\nIntegrating a Lottie Elementor animation is extremely simple and accessible to anyone.\n\nWith this builder and these Lottie files, you don't need to be a developer or web designer to work on the frontend of your site. What's more, you don't have to<strong> no need to pay a single euro<\/strong> to insert these animations with the site builder.\n<h2>Lottie Elementor: a web design solution accessible to all<\/h2>\nIf you feel ready to design your site yourself, the Lottie Elementor association can be a great help in bringing life and activity to your digital platform.\n\nAs I told you in the video, 65% of people are visual learners: this means that they are first sensitive to what they see before what they read. It is therefore essential to take care of the visuals on your web pages! If you're looking for free resources to illustrate what you're saying, we've compiled an article with the <a href=\"https:\/\/flowragency.com\/en\/images-libres-de-droit\/\" target=\"_blank\" rel=\"noopener\" data-schema-attribute=\"\">best sites to find royalty free images<\/a>.\n\nHave fun and customize your animations to be in line with your graphic charter! And don't hesitate to ask us your questions if you get stuck in the creation and design of your web pages!\n\nYou want more tutorials ? Take a look at our <a href=\"https:\/\/www.youtube.com\/channel\/UCn2WQoYEWr10q5GFsaj-18w\" target=\"_blank\" rel=\"noopener\" data-schema-attribute=\"\">YouTube channel<\/a> !\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>No more static and non-interactive web pages! More than ever, visitors expect a beautiful, functional, interactive and dynamic site! <\/p>\n<p>Whether it is a question of webdesign or UI\/UX experience, the integration of dynamic animations in a web page brings a touch of interactivity and reduces the bounce rate on your site.<\/p>\n<p>Inserting Elementor Lottie is a simple and effective way to reinforce your brand image and have a visually pleasing and animated navigation interface.<\/p>\n<p>With Lottie animations, it is now possible to integrate dynamic content to your pages, and this, in a free and simple way.<\/p>","protected":false},"author":2,"featured_media":10324,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7570,7571],"tags":[7669,7670,7661,7667,7668],"class_list":["post-4194","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor","category-wordpress","tag-animation","tag-animation-web","tag-elementor","tag-lottie","tag-lottie-files"],"_links":{"self":[{"href":"https:\/\/flowragency.com\/en\/wp-json\/wp\/v2\/posts\/4194","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flowragency.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flowragency.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flowragency.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/flowragency.com\/en\/wp-json\/wp\/v2\/comments?post=4194"}],"version-history":[{"count":1,"href":"https:\/\/flowragency.com\/en\/wp-json\/wp\/v2\/posts\/4194\/revisions"}],"predecessor-version":[{"id":15524,"href":"https:\/\/flowragency.com\/en\/wp-json\/wp\/v2\/posts\/4194\/revisions\/15524"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flowragency.com\/en\/wp-json\/wp\/v2\/media\/10324"}],"wp:attachment":[{"href":"https:\/\/flowragency.com\/en\/wp-json\/wp\/v2\/media?parent=4194"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flowragency.com\/en\/wp-json\/wp\/v2\/categories?post=4194"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flowragency.com\/en\/wp-json\/wp\/v2\/tags?post=4194"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}