{"id":40565,"date":"2022-09-25T15:00:59","date_gmt":"2022-09-25T13:00:59","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=40565"},"modified":"2022-10-05T08:37:56","modified_gmt":"2022-10-05T06:37:56","slug":"how-to-add-lottie-animations-to-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-add-lottie-animations-to-wordpress\/","title":{"rendered":"How to Add Lottie Animations to WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\" id=\"wpb-content-root\"><p>[vc_row][vc_column][vc_column_text]Modern online audiences are spoilt for choice. Creating a website is easier than it ever was, and, with WordPress, almost anyone can build almost anything they want\u2013 and a lot of it for no money at all, investing only personal talent, skill, and flair for design. Building your brand authority through <a href=\"https:\/\/qodeinteractive.com\/magazine\/ultimate-guide-to-content-marketing\/\">content marketing<\/a> is all well and good, but good content isn\u2019t everything. Sometimes you need an eye-catching special feature if you want to attract new visitors. And that is exactly what we\u2019re here to talk to you about: Lottie animations and WordPress.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We will briefly discuss what Lottie WordPress animations are, how they can be created, accessed, and used, and how they can impact the user experience and impression of your WordPress website. Here\u2019s what we\u2019ll be talking about:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-are-lottie-animations\">What Are Lottie Animations<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-create-lottie-animations\">How to Create Lottie Animations<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#stock-lottie-animations\">Stock Lottie Animations<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#add-lottie-animations-using-plugin\">How to Add Lottie Animations Using a WordPress Plugin<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-are-lottie-animations\"><\/a>What Are Lottie Animations<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"2472\" height=\"1170\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Lottie-Animation.gif\" class=\"attachment-full size-full\" alt=\"Lottie Animation\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Lottie animations are animations belonging to <a href=\"https:\/\/lottiefiles.com\/\" target=\"_blank\" rel=\"noopener\">LottieFiles<\/a>, <strong>a library of animated assets<\/strong>. It works with Windows, iOS and Android equally well, it is free, and open source. As far as the technical aspects are concerned, in short, animations are produced by rendering Adobe After Effects animation data as JSON files. Lottie animations may be simple, but the upside is that they are <strong>minuscule in size<\/strong> and the library itself contains elements that can readily be converted into animated buttons, headers, or simple background elements.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This means that you can replace some or all (though we advise against visual clutter) of your statical assets with dynamic ones at almost no expense with regards to storage space and loading times. Basically, you get a (scalable!) <em>.gif<\/em> or <em>.mp4<\/em> for the price of a <em>.json<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-create-lottie-animations\"><\/a>How to Create Lottie Animations<\/h2>\n<p>[\/vc_column_text][vc_column_text]As we have mentioned before, <strong>Lottie animations are made using Adobe After Effects<\/strong>. Similar animations can, conceivably, be created using other software, but Adobe After Effects is the industry standard.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]With Lottie animations, <strong>you don\u2019t need to convert an animation into a web format<\/strong>, which is usually what a developer did. You do need a designer trained in the use of Adobe After Effects to create animations from your static graphic elements and export them as <em>.json<\/em> files using the appropriate Adobe After Effects extension.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However, you don\u2019t need to do anything from scratch: <strong>you can use stock animations<\/strong> from the Lottie Files website, as discussed in the following section.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"stock-lottie-animations\"><\/a>Stock Lottie Animations<\/h2>\n<p>[\/vc_column_text][vc_column_text]If you want exactly what you want, that\u2019s bound to cost you. Custom jobs are always expensive. You may have great insights into the cutting edge of design aesthetics and <a href=\"https:\/\/qodeinteractive.com\/magazine\/beginners-guide-to-neuromarketing\/\">neuromarketing<\/a>, but no budget to implement that knowledge when designing animations for your website. That doesn\u2019t mean that your website is condemned to static assets: you can use <a href=\"https:\/\/lottiefiles.com\/\" target=\"_blank\" rel=\"noopener\">Lottie Files\u2019s<\/a> <strong>library of stock animations, both free and paid<\/strong>, to make your website richer.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The website itself also gives you tools to edit Lottie animations without having access to a designer. Designers can also offer their own animations for sale, while web developers and designers can buy independently produced animations or hire animators as needed.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"add-lottie-animations-using-plugin\"><\/a>How to Add Lottie Animations Using a WordPress Plugin<\/h2>\n<p>[\/vc_column_text][vc_column_text]There are ways to add Lottie animations to WordPress using a custom HTML widget, but there are easier ways of going about it. For instance, if you are using Elementor (and why wouldn\u2019t you); specifically, <strong>Elementor Pro<\/strong>, you already have a Lottie widget that lets you introduce animations on the back end with ease.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you are a Gutenberg user, you can use <a href=\"https:\/\/wordpress.org\/plugins\/ultimate-addons-for-gutenberg\/\" target=\"_blank\" rel=\"noopener\">Spectra<\/a>. The plugin, formerly known as Ultimate Addons For Elementor, also <strong>offers a Lottie animation block<\/strong> with which you can easily add an animation. There are other plugins that have the same functionality, but this one is what we will be doing for this demonstration.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You need to have Gutenberg installed and activated. This should be available by default, unless you have <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-disable-gutenberg-in-wordpress\/\">disabled Gutenberg<\/a>. You also have to have a Lottie account. Lottie accounts are free, and registration is easy. All you need is a working email address. Next, <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-install-a-wordpress-plugin\/\">install and activate<\/a> Spectra.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We will begin by creating a page and giving it a title. Next, click on the <strong>plus<\/strong> sign to add a block, and select the Lottie block.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Add-Lottie-Block.jpg\" class=\"attachment-full size-full\" alt=\"Add Lottie Block\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Add-Lottie-Block.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Add-Lottie-Block-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Add-Lottie-Block-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Add-Lottie-Block-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]There are several ways to populate this block. You can <strong>Upload<\/strong> a <em>.json<\/em> file, select one from your <strong>Media Library<\/strong>, or <strong>Insert from URL<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you are a registered Lottie user, you can easily download a<em> .json<\/em>. Simply find an animation in the library (we have gone for this cute little blue octopus) and click on the <strong>Download<\/strong> button and select the <strong>Lottie JSON<\/strong> option from the drop-down menu.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Download-Dropdown.jpg\" class=\"attachment-full size-full\" alt=\"Download Dropdown\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Download-Dropdown.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Download-Dropdown-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Download-Dropdown-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Download-Dropdown-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you prefer not to add files to your WordPress website for whatever reason, you can get the animation URL from the menu below. Here, you can also access options to increase the<strong> Animation Speed<\/strong>, change or remove <strong>Background Color<\/strong>, get an <strong>oEmbed<\/strong> or <strong>iFrame<\/strong> code, <strong>Edit Layer Colors<\/strong>, and more.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can also access the developers\u2019 <a href=\"https:\/\/lottiefiles.com\/interactivity\" target=\"_blank\" rel=\"noopener\">Interactivity Guide<\/a>, though we recommend this option to the advanced users. This is where you turn your animation into an interactive element; this is where you make it a button or play it or loop it conditionally. If you are a seasoned developer, you may also try creating a custom HTML widget as discussed above.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"616\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Tweak.jpg\" class=\"attachment-full size-full\" alt=\"Tweak\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Tweak.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Tweak-300x191.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Tweak-768x488.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Tweak-620x394.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We have downloaded our octopus animation and will upload it by clicking the <strong>Upload<\/strong> button. Simply find its location on your hard drive and upload the file.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"572\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Upload-JSON.jpg\" class=\"attachment-full size-full\" alt=\"Upload JSON\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Upload-JSON.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Upload-JSON-300x177.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Upload-JSON-768x453.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Upload-JSON-620x366.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, the octopus now swims the treacherous waters of our test website.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"510\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Preview.jpg\" class=\"attachment-full size-full\" alt=\"Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Preview-300x158.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Preview-768x404.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Preview-620x326.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">In Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]As you can see, adding animations to your website is (or can be) quick and easy, and needn\u2019t cost you a single penny. Creating animations and making them interactive is a whole different kettle of fish \u2013 or octopodes. Still, if you are looking for a way to make your website a little more colorful and a little more eye-catching, you can do it in just a couple of clicks of the mouse, and at no additional cost to you. There is a whole library of simple, but high-quality animations at your fingertips. All you have to do is install a plugin and you can start testing the waters.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Enhance your user&#8217;s experience of your WordPress website with Lottie animations. We will show you how. <\/p>\n","protected":false},"author":16990,"featured_media":40585,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[128,4,36,13],"class_list":["post-40565","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-animations","tag-tips","tag-ux","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/40565","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/16990"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=40565"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/40565\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/40585"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=40565"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=40565"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=40565"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}