{"id":10035,"date":"2024-10-22T23:47:59","date_gmt":"2024-10-22T23:47:59","guid":{"rendered":"https:\/\/www.kadencewp.com\/help-center\/?post_type=docs&#038;p=10035"},"modified":"2024-11-06T05:22:18","modified_gmt":"2024-11-06T05:22:18","password":"","slug":"using-gifs-and-lottie-animations-with-kadence-blocks","status":"publish","type":"docs","link":"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-blocks\/using-gifs-and-lottie-animations-with-kadence-blocks\/","title":{"rendered":"Using GIFS and Lottie Animations with Kadence Blocks"},"content":{"rendered":"\n<p>Using <strong>GIFs<\/strong> can effectively demonstrate information visually. Kadence Blocks supports GIF images, enabling you to display animated content across your website for a more engaging user experience. Additionally, Kadence Blocks offers the <a href=\"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-blocks\/lottie-animation-block\/\" target=\"_blank\" rel=\"noreferrer noopener\">Lottie Animation Block<\/a>, which allows you to incorporate <strong>Lottie<\/strong> <strong>Animations<\/strong> into your website, providing lightweight, scalable, and interactive animations for enhanced visual appeal.<\/p>\n\n\n<style>.kb-table-of-content-nav.kb-table-of-content-id10035_2d836e-eb .kb-table-of-content-wrap{padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-right:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);padding-left:var(--global-kb-spacing-sm, 1.5rem);}.kb-table-of-content-nav.kb-table-of-content-id10035_2d836e-eb .kb-table-of-contents-title-wrap{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.kb-table-of-content-nav.kb-table-of-content-id10035_2d836e-eb .kb-table-of-contents-title{font-weight:regular;font-style:normal;}.kb-table-of-content-nav.kb-table-of-content-id10035_2d836e-eb .kb-table-of-content-wrap .kb-table-of-content-list{font-weight:regular;font-style:normal;margin-top:var(--global-kb-spacing-sm, 1.5rem);margin-right:0px;margin-bottom:0px;margin-left:0px;}<\/style>\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading10035_c37d6c-88, .wp-block-kadence-advancedheading.kt-adv-heading10035_c37d6c-88[data-kb-block=\"kb-adv-heading10035_c37d6c-88\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading10035_c37d6c-88 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading10035_c37d6c-88[data-kb-block=\"kb-adv-heading10035_c37d6c-88\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading10035_c37d6c-88 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading10035_c37d6c-88[data-kb-block=\"kb-adv-heading10035_c37d6c-88\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 class=\"kt-adv-heading10035_c37d6c-88 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading10035_c37d6c-88\">GIFs vs Lottie Animations<\/h2>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading10035_462fe1-95, .wp-block-kadence-advancedheading.kt-adv-heading10035_462fe1-95[data-kb-block=\"kb-adv-heading10035_462fe1-95\"]{margin-bottom:0px;font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading10035_462fe1-95 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading10035_462fe1-95[data-kb-block=\"kb-adv-heading10035_462fe1-95\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading10035_462fe1-95 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading10035_462fe1-95[data-kb-block=\"kb-adv-heading10035_462fe1-95\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading10035_462fe1-95 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading10035_462fe1-95\">Both GIFs and Lottie Animations offer unique advantages depending on the scenario. While GIFs are great for simple looped animations, Lottie Animations shine with their high-quality visuals and interactivity. Understanding when to use one over the other can enhance your website&#8217;s user experience. It\u2019s also important to note that GIFs are distinct from videos, each serving different purposes.<em> (If you wish to use a Video Background instead of a GIF image, <a href=\"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-blocks\/adding-video-backgrounds-to-row-layout\/\" target=\"_blank\" rel=\"noreferrer noopener\">Click here<\/a> to learn about using videos with Row Layout Backgrounds.)<\/em><\/p>\n\n\n<style>.kb-row-layout-id10035_32219b-1f > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id10035_32219b-1f > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id10035_32219b-1f > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:repeat(2, minmax(0, 1fr));}.kb-row-layout-id10035_32219b-1f > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id10035_32219b-1f > .kt-row-column-wrap{grid-template-columns:repeat(2, minmax(0, 1fr));}}@media all and (max-width: 767px){.kb-row-layout-id10035_32219b-1f > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id10035_32219b-1f alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-2-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column10035_afcb8f-bc > .kt-inside-inner-col{display:flex;}.kadence-column10035_afcb8f-bc > .kt-inside-inner-col,.kadence-column10035_afcb8f-bc > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column10035_afcb8f-bc > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column10035_afcb8f-bc > .kt-inside-inner-col{flex-direction:column;justify-content:center;}.kadence-column10035_afcb8f-bc > .kt-inside-inner-col > .aligncenter{width:100%;}.kt-row-column-wrap > .kadence-column10035_afcb8f-bc{align-self:center;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column10035_afcb8f-bc{align-self:auto;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column10035_afcb8f-bc > .kt-inside-inner-col{flex-direction:column;justify-content:center;}.kadence-column10035_afcb8f-bc > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column10035_afcb8f-bc{position:relative;}@media all and (max-width: 1024px){.kt-row-column-wrap > .kadence-column10035_afcb8f-bc{align-self:center;}}@media all and (max-width: 1024px){.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column10035_afcb8f-bc{align-self:auto;}}@media all and (max-width: 1024px){.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column10035_afcb8f-bc > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 1024px){.kadence-column10035_afcb8f-bc > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kt-row-column-wrap > .kadence-column10035_afcb8f-bc{align-self:center;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column10035_afcb8f-bc{align-self:auto;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column10035_afcb8f-bc > .kt-inside-inner-col{flex-direction:column;justify-content:center;}.kadence-column10035_afcb8f-bc > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column10035_afcb8f-bc\"><div class=\"kt-inside-inner-col\"><style>.wp-block-kadence-advancedheading.kt-adv-heading10035_1a41a9-db, .wp-block-kadence-advancedheading.kt-adv-heading10035_1a41a9-db[data-kb-block=\"kb-adv-heading10035_1a41a9-db\"]{margin-bottom:var(--global-kb-spacing-xxs, 0.5rem);font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading10035_1a41a9-db mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading10035_1a41a9-db[data-kb-block=\"kb-adv-heading10035_1a41a9-db\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading10035_1a41a9-db img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading10035_1a41a9-db[data-kb-block=\"kb-adv-heading10035_1a41a9-db\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading10035_1a41a9-db wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading10035_1a41a9-db\">Example of a GIF Image.<\/p>\n\n\n<style>.kb-image10035_be67b7-5d .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image10035_be67b7-5d size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"592\" height=\"453\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/10\/kadence.gif\" alt=\"Kadence Gif\" class=\"kb-img wp-image-10039\" \/><\/figure>\n<\/div><\/div>\n\n\n<style>.kadence-column10035_4a78d5-3f > .kt-inside-inner-col,.kadence-column10035_4a78d5-3f > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column10035_4a78d5-3f > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column10035_4a78d5-3f > .kt-inside-inner-col{flex-direction:column;}.kadence-column10035_4a78d5-3f > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column10035_4a78d5-3f > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column10035_4a78d5-3f{position:relative;}@media all and (max-width: 1024px){.kadence-column10035_4a78d5-3f > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column10035_4a78d5-3f > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column10035_4a78d5-3f\"><div class=\"kt-inside-inner-col\"><style>.wp-block-kadence-advancedheading.kt-adv-heading10035_888d11-27, .wp-block-kadence-advancedheading.kt-adv-heading10035_888d11-27[data-kb-block=\"kb-adv-heading10035_888d11-27\"]{margin-bottom:var(--global-kb-spacing-xxs, 0.5rem);font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading10035_888d11-27 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading10035_888d11-27[data-kb-block=\"kb-adv-heading10035_888d11-27\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading10035_888d11-27 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading10035_888d11-27[data-kb-block=\"kb-adv-heading10035_888d11-27\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading10035_888d11-27 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading10035_888d11-27\">Example of a Lottie Animation.<\/p>\n\n\n<style>.kb-lottie-container10035_d47f87-7f dotlottie-player{max-width:auto;}<\/style>\n\t\t\t\t<script>\n\t\t\t\t\t\t\n\t\t\t\t\t\tvar waitForLoittieInteractivekblottieplayer10035_d47f877f = setInterval(function () {\n\t\t\t\t\t\t\tlet lottiePlayerkblottieplayer10035_d47f877f = document.getElementById( 'kb-lottie-player10035_d47f87-7f');\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\tif (typeof LottieInteractivity !== 'undefined') {\t\t\t\t\t\n\t\t\t\t\t\t\t\tlottiePlayerkblottieplayer10035_d47f877f.addEventListener('ready', () => {\n\t\t\t\t\t\t\t\t  LottieInteractivity.create({\n\t\t\t\t\t\t\t\t\t  player: lottiePlayerkblottieplayer10035_d47f877f.getLottie(),\n\t\t\t\t\t\t\t\t\t  mode: 'scroll',\n\t\t\t\t\t\t\t\t\t    actions: [\n\t\t\t\t\t\t\t\t\t        {\n\t\t\t\t\t\t\t\t\t            visibility: [0,1.0],\n\t\t\t\t\t\t\t\t\t\t\t\ttype: 'play',\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t        }\n\t\t\t\t\t\t\t\t\t    ]\n\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t});\n\t                            clearInterval(waitForLoittieInteractivekblottieplayer10035_d47f877f);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}, 125);\n\n\t\t\t\t<\/script><div class=\"kb-lottie-container kb-lottie-container10035_d47f87-7f\"><dotlottie-player speed=\"1\" autoplay=\"true\" mode=\"bounce\" src=\"https:\/\/assets10.lottiefiles.com\/packages\/lf20_rqcjx8hr.json\"\n\t\t\t\t\t\t\tid=\"kb-lottie-player10035_d47f87-7f\"\n\t\t\t\t\t\t><\/dotlottie-player><\/div><\/div><\/div>\n\n<\/div><\/div>\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading10035_3a97e8-9c, .wp-block-kadence-advancedheading.kt-adv-heading10035_3a97e8-9c[data-kb-block=\"kb-adv-heading10035_3a97e8-9c\"]{margin-bottom:var(--global-kb-spacing-xxs, 0.5rem);font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading10035_3a97e8-9c mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading10035_3a97e8-9c[data-kb-block=\"kb-adv-heading10035_3a97e8-9c\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading10035_3a97e8-9c img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading10035_3a97e8-9c[data-kb-block=\"kb-adv-heading10035_3a97e8-9c\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading10035_3a97e8-9c wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading10035_3a97e8-9c\">Find more information below related to how GIFs and Lottie Animations work.<\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading10035_99b145-fb, .wp-block-kadence-advancedheading.kt-adv-heading10035_99b145-fb[data-kb-block=\"kb-adv-heading10035_99b145-fb\"]{margin-top:0px;margin-bottom:0px;font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading10035_99b145-fb mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading10035_99b145-fb[data-kb-block=\"kb-adv-heading10035_99b145-fb\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading10035_99b145-fb img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading10035_99b145-fb[data-kb-block=\"kb-adv-heading10035_99b145-fb\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h3 class=\"kt-adv-heading10035_99b145-fb wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading10035_99b145-fb\">File Size<\/h3>\n\n\n\n<p><strong>Lottie Animations<\/strong>: Lottie files are lightweight and optimized, often resulting in smaller file sizes compared to GIFs. This leads to faster loading times and improved website performance, making them ideal for mobile devices where speed and efficiency can be crucial for delivering a smooth user experience.<br><br><strong>GIF Images<\/strong>: GIFs are generally larger in file size, especially for high-quality or lengthy animations, which can slow down website loading times and impact performance negatively. However, there are still valid scenarios where using a GIF might be preferable over a Lottie animation. For instance, if you&#8217;re looking to display a frame-by-frame animation, such as images of a person in sequence or showing how a process looks on-screen, GIFs are ideal. Lottie animations, while highly optimized and interactive, are better suited for vector-based, text-driven, or cartoon-style animations. For detailed, photographic, or image-based sequences, GIFs remain the better option<\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading10035_d09555-18, .wp-block-kadence-advancedheading.kt-adv-heading10035_d09555-18[data-kb-block=\"kb-adv-heading10035_d09555-18\"]{margin-top:0px;margin-bottom:0px;font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading10035_d09555-18 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading10035_d09555-18[data-kb-block=\"kb-adv-heading10035_d09555-18\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading10035_d09555-18 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading10035_d09555-18[data-kb-block=\"kb-adv-heading10035_d09555-18\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h3 class=\"kt-adv-heading10035_d09555-18 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading10035_d09555-18\">Animation Quality<\/h3>\n\n\n\n<p><strong>Lottie Animations<\/strong>: These animations are vector-based, ensuring high-quality visuals at any resolution without pixelation. They maintain clarity on both desktop and mobile devices.<br><br><strong>GIF Images:<\/strong> GIFs are pixel-based, which can cause graininess or pixelation, especially when scaled up or displayed at higher resolutions. WordPress helps mitigate this by automatically resizing GIFs to fit various screen sizes. However, it&#8217;s important to upload GIFs with sufficiently large dimensions to ensure they display well across devices. If the original GIF is too small, resizing it for larger screens can result in pixelation. To avoid this, always use a high-quality, appropriately sized GIF file to maintain clarity, especially on larger or high-resolution displays.<\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading10035_2e2181-9d, .wp-block-kadence-advancedheading.kt-adv-heading10035_2e2181-9d[data-kb-block=\"kb-adv-heading10035_2e2181-9d\"]{margin-top:0px;margin-bottom:0px;font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading10035_2e2181-9d mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading10035_2e2181-9d[data-kb-block=\"kb-adv-heading10035_2e2181-9d\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading10035_2e2181-9d img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading10035_2e2181-9d[data-kb-block=\"kb-adv-heading10035_2e2181-9d\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h3 class=\"kt-adv-heading10035_2e2181-9d wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading10035_2e2181-9d\">Customization<\/h3>\n\n\n\n<p><strong>Lottie Animations<\/strong>: Lottie files support advanced customizations. Additionally, the Kadence Lottie Block offers various options for customizing the interactivity of Lottie Animation in WordPress.<br><br><strong>GIF Images<\/strong>: GIFs are static loops and do not offer interactivity; they simply play continuously. This is ideal for visually demonstrating how to accomplish tasks, such as those seen in many Kadence documentation examples where GIF images are used to guide users step-by-step.<\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading10035_4a59d0-9f, .wp-block-kadence-advancedheading.kt-adv-heading10035_4a59d0-9f[data-kb-block=\"kb-adv-heading10035_4a59d0-9f\"]{margin-top:0px;margin-bottom:0px;font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading10035_4a59d0-9f mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading10035_4a59d0-9f[data-kb-block=\"kb-adv-heading10035_4a59d0-9f\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading10035_4a59d0-9f img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading10035_4a59d0-9f[data-kb-block=\"kb-adv-heading10035_4a59d0-9f\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h3 class=\"kt-adv-heading10035_4a59d0-9f wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading10035_4a59d0-9f\">Use Cases<\/h3>\n\n\n\n<p><strong>Lottie Animations:<\/strong> Ideal for interactive elements, high-quality vector-based visuals, and complex designs that need to remain sharp and lightweight. They provide greater flexibility and improved performance but are generally more challenging to create compared to basic GIFs.<br><br><strong>GIF Images:<\/strong> Best suited for simple, looped animations like icons, banners, or quick visual tutorials. GIFs are easier to produce and require less effort than Lottie animations, making them perfect for straightforward demonstrations and basic animated content.<\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading10035_8e96a3-0c, .wp-block-kadence-advancedheading.kt-adv-heading10035_8e96a3-0c[data-kb-block=\"kb-adv-heading10035_8e96a3-0c\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading10035_8e96a3-0c mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading10035_8e96a3-0c[data-kb-block=\"kb-adv-heading10035_8e96a3-0c\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading10035_8e96a3-0c img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading10035_8e96a3-0c[data-kb-block=\"kb-adv-heading10035_8e96a3-0c\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 class=\"kt-adv-heading10035_8e96a3-0c wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading10035_8e96a3-0c\">Using GIFs with Kadence Blocks<\/h2>\n\n\n\n<p>GIFs can be utilized within Kadence Blocks wherever applicable. For instance, you can incorporate them into an Advanced Image Block or set them as a background image in a Row Layout Block. To use a GIF, simply upload it to your Media Library and select it in the appropriate Kadence Block.<br><br>Here are some Blocks that support GIFs:<br>-Advanced Image Block<br>-Row Layout Block Background Images<br>-Image Overlay Blocks<br>-Advanced Gallery Blocks<\/p>\n\n\n<style>.kb-image10035_619146-bc.kb-image-is-ratio-size, .kb-image10035_619146-bc .kb-image-is-ratio-size{max-width:623px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image10035_619146-bc.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image10035_619146-bc .kb-image-is-ratio-size{align-self:unset;}.kb-image10035_619146-bc figure{max-width:623px;}.kb-image10035_619146-bc .image-is-svg, .kb-image10035_619146-bc .image-is-svg img{width:100%;}.kb-image10035_619146-bc .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image10035_619146-bc\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1770\" height=\"882\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/10\/Kadence-Demo-GIF.gif\" alt=\"Kadence Demo GIF\" class=\"kb-img wp-image-10041\" \/><\/figure><\/div>\n\n\n\n<p>If you select a GIF image to use in a Kadence Block and the animation doesn&#8217;t play, make sure the Image File Size is set to <strong>Full<\/strong>. This is the only file size that allows GIFs to animate correctly.<\/p>\n\n\n<style>.kb-image10035_1f32e7-54.kb-image-is-ratio-size, .kb-image10035_1f32e7-54 .kb-image-is-ratio-size{max-width:566px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image10035_1f32e7-54.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image10035_1f32e7-54 .kb-image-is-ratio-size{align-self:unset;}.kb-image10035_1f32e7-54 figure{max-width:566px;}.kb-image10035_1f32e7-54 .image-is-svg, .kb-image10035_1f32e7-54 .image-is-svg img{width:100%;}.kb-image10035_1f32e7-54 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image10035_1f32e7-54\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"838\" height=\"700\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/10\/Image-File-Size-Full.gif\" alt=\"Image File Size Full\" class=\"kb-img wp-image-10042\" \/><\/figure><\/div>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading10035_adf2c0-71, .wp-block-kadence-advancedheading.kt-adv-heading10035_adf2c0-71[data-kb-block=\"kb-adv-heading10035_adf2c0-71\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading10035_adf2c0-71 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading10035_adf2c0-71[data-kb-block=\"kb-adv-heading10035_adf2c0-71\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading10035_adf2c0-71 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading10035_adf2c0-71[data-kb-block=\"kb-adv-heading10035_adf2c0-71\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 class=\"kt-adv-heading10035_adf2c0-71 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading10035_adf2c0-71\">Using Lottie Animations with Kadence<\/h2>\n\n\n\n<p><a href=\"https:\/\/lottiefiles.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Lottie<\/a> is a separate platform from KadenceWP and WordPress that allows you to create and use high-quality animations across the web. It provides a wide range of pre-made animations (free and pro) that you can easily incorporate into your website. You can also create your own custom animations using the <a href=\"https:\/\/lottiefiles.com\/lottie-creator\" target=\"_blank\" rel=\"noopener\">Lottie Creator Tool<\/a> or other popular design tools like Adobe After Effects.<br><br>To obtain a <strong>Lottie<\/strong> <strong>File<\/strong> <strong>Link<\/strong> or <strong>download<\/strong> <strong>one<\/strong>, you must create an account on <a href=\"https:\/\/lottiefiles.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">LottieFiles.com<\/a>. From there, you can download a Lottie file or obtain a file URL. Once you have the file or URL, you can integrate the animation into your site using the <a href=\"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-blocks\/lottie-animation-block\/\">Kadence Lottie Animation Block<\/a>.<\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading10035_83781d-21, .wp-block-kadence-advancedheading.kt-adv-heading10035_83781d-21[data-kb-block=\"kb-adv-heading10035_83781d-21\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading10035_83781d-21 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading10035_83781d-21[data-kb-block=\"kb-adv-heading10035_83781d-21\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading10035_83781d-21 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading10035_83781d-21[data-kb-block=\"kb-adv-heading10035_83781d-21\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h3 class=\"kt-adv-heading10035_83781d-21 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading10035_83781d-21\">Downloading Lottie Files<\/h3>\n\n\n<style>.kb-row-layout-id10035_b269a4-e3 > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id10035_b269a4-e3 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id10035_b269a4-e3 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);grid-template-columns:repeat(2, minmax(0, 1fr));}.kb-row-layout-id10035_b269a4-e3 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id10035_b269a4-e3 > .kt-row-column-wrap{grid-template-columns:repeat(2, minmax(0, 1fr));}}@media all and (max-width: 767px){.kb-row-layout-id10035_b269a4-e3 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id10035_b269a4-e3 alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-2-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column10035_039fae-5a > .kt-inside-inner-col,.kadence-column10035_039fae-5a > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column10035_039fae-5a > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column10035_039fae-5a > .kt-inside-inner-col{flex-direction:column;}.kadence-column10035_039fae-5a > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column10035_039fae-5a > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column10035_039fae-5a{position:relative;}@media all and (max-width: 1024px){.kadence-column10035_039fae-5a > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column10035_039fae-5a > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column10035_039fae-5a\"><div class=\"kt-inside-inner-col\">\n<p>You can download Lottie files directly from the Lottie website by logging into your account, selecting the desired animation, and clicking the <strong>Download<\/strong> button on the top right corner of the animation popup.<\/p>\n<\/div><\/div>\n\n\n<style>.kadence-column10035_a75f0a-cc > .kt-inside-inner-col{display:flex;}.kadence-column10035_a75f0a-cc > .kt-inside-inner-col,.kadence-column10035_a75f0a-cc > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column10035_a75f0a-cc > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column10035_a75f0a-cc > .kt-inside-inner-col{flex-direction:column;justify-content:flex-start;}.kadence-column10035_a75f0a-cc > .kt-inside-inner-col > .aligncenter{width:100%;}.kt-row-column-wrap > .kadence-column10035_a75f0a-cc{align-self:flex-start;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column10035_a75f0a-cc{align-self:auto;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column10035_a75f0a-cc > .kt-inside-inner-col{flex-direction:column;justify-content:flex-start;}.kadence-column10035_a75f0a-cc > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column10035_a75f0a-cc{position:relative;}@media all and (max-width: 1024px){.kt-row-column-wrap > .kadence-column10035_a75f0a-cc{align-self:flex-start;}}@media all and (max-width: 1024px){.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column10035_a75f0a-cc{align-self:auto;}}@media all and (max-width: 1024px){.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column10035_a75f0a-cc > .kt-inside-inner-col{flex-direction:column;justify-content:flex-start;}}@media all and (max-width: 1024px){.kadence-column10035_a75f0a-cc > .kt-inside-inner-col{flex-direction:column;justify-content:flex-start;}}@media all and (max-width: 767px){.kt-row-column-wrap > .kadence-column10035_a75f0a-cc{align-self:flex-start;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column10035_a75f0a-cc{align-self:auto;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column10035_a75f0a-cc > .kt-inside-inner-col{flex-direction:column;justify-content:flex-start;}.kadence-column10035_a75f0a-cc > .kt-inside-inner-col{flex-direction:column;justify-content:flex-start;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column10035_a75f0a-cc\"><div class=\"kt-inside-inner-col\"><style>.kb-image10035_4dfcde-b5 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image10035_4dfcde-b5\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"933\" height=\"965\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/10\/Download-Lottie.gif\" alt=\"\" class=\"kb-img wp-image-10043\" \/><\/figure><\/div>\n<\/div><\/div>\n\n<\/div><\/div>\n\n<style>.kb-row-layout-id10035_d05168-4f > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id10035_d05168-4f > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id10035_d05168-4f > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:repeat(2, minmax(0, 1fr));}.kb-row-layout-id10035_d05168-4f > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id10035_d05168-4f > .kt-row-column-wrap{grid-template-columns:repeat(2, minmax(0, 1fr));}}@media all and (max-width: 767px){.kb-row-layout-id10035_d05168-4f > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id10035_d05168-4f alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-2-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column10035_4d8e7f-d3 > .kt-inside-inner-col,.kadence-column10035_4d8e7f-d3 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column10035_4d8e7f-d3 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column10035_4d8e7f-d3 > .kt-inside-inner-col{flex-direction:column;}.kadence-column10035_4d8e7f-d3 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column10035_4d8e7f-d3 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column10035_4d8e7f-d3{position:relative;}@media all and (max-width: 1024px){.kadence-column10035_4d8e7f-d3 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column10035_4d8e7f-d3 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column10035_4d8e7f-d3\"><div class=\"kt-inside-inner-col\">\n<p>This will open the selected Lottie animation, allowing you to choose a downloadable option. Consider using an <strong>optimized<\/strong> <strong>format<\/strong> for <strong>faster<\/strong> loading times.<\/p>\n<\/div><\/div>\n\n\n<style>.kadence-column10035_e71bde-24 > .kt-inside-inner-col,.kadence-column10035_e71bde-24 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column10035_e71bde-24 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column10035_e71bde-24 > .kt-inside-inner-col{flex-direction:column;}.kadence-column10035_e71bde-24 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column10035_e71bde-24 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column10035_e71bde-24{position:relative;}@media all and (max-width: 1024px){.kadence-column10035_e71bde-24 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column10035_e71bde-24 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column10035_e71bde-24\"><div class=\"kt-inside-inner-col\"><style>.kb-image10035_ba01c0-a9:not(.kb-image-is-ratio-size) .kb-img, .kb-image10035_ba01c0-a9.kb-image-is-ratio-size{padding-bottom:var(--global-kb-spacing-xl, 4rem);}.kb-image10035_ba01c0-a9 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image10035_ba01c0-a9 size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"780\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/10\/Donwload-1024x780.jpg\" alt=\"Download Lottie\" class=\"kb-img wp-image-10048\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/10\/Donwload-1024x780.jpg 1024w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/10\/Donwload-300x228.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/10\/Donwload-768x585.jpg 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/10\/Donwload-1536x1169.jpg 1536w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/10\/Donwload-2048x1559.jpg 2048w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/10\/Donwload-360x274.jpg 360w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><\/div>\n\n<\/div><\/div>\n\n<style>.kb-row-layout-id10035_1dbf20-cc > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id10035_1dbf20-cc > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id10035_1dbf20-cc > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var(--global-kb-spacing-xs, 1rem);grid-template-columns:repeat(2, minmax(0, 1fr));}.kb-row-layout-id10035_1dbf20-cc > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id10035_1dbf20-cc > .kt-row-column-wrap{grid-template-columns:repeat(2, minmax(0, 1fr));}}@media all and (max-width: 767px){.kb-row-layout-id10035_1dbf20-cc > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id10035_1dbf20-cc alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-2-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column10035_e5cb3b-38 > .kt-inside-inner-col,.kadence-column10035_e5cb3b-38 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column10035_e5cb3b-38 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column10035_e5cb3b-38 > .kt-inside-inner-col{flex-direction:column;}.kadence-column10035_e5cb3b-38 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column10035_e5cb3b-38 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column10035_e5cb3b-38{position:relative;}@media all and (max-width: 1024px){.kadence-column10035_e5cb3b-38 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column10035_e5cb3b-38 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column10035_e5cb3b-38\"><div class=\"kt-inside-inner-col\">\n<p>To upload a downloaded Lottie file to the Lottie Animation Block, go to the <strong>Block Settings<\/strong> -&gt; <strong>General Tab<\/strong> and change the <strong>File Source<\/strong> from <strong>Remote URL<\/strong> to <strong>Local File<\/strong>.<br><br>Next, add a name for the <strong>Animation Title<\/strong> and upload your downloaded Lottie file.<br><br>Once the animation is successfully uploaded, it will automatically be selected as the <strong>Local File Source<\/strong>, making it ready for use in your block.<\/p>\n<\/div><\/div>\n\n\n<style>.kadence-column10035_7a2e8f-c6 > .kt-inside-inner-col,.kadence-column10035_7a2e8f-c6 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column10035_7a2e8f-c6 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column10035_7a2e8f-c6 > .kt-inside-inner-col{flex-direction:column;}.kadence-column10035_7a2e8f-c6 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column10035_7a2e8f-c6 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column10035_7a2e8f-c6{position:relative;}@media all and (max-width: 1024px){.kadence-column10035_7a2e8f-c6 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column10035_7a2e8f-c6 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column10035_7a2e8f-c6\"><div class=\"kt-inside-inner-col\"><style>.kb-image10035_cab09b-45 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image10035_cab09b-45 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1035\" height=\"864\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/10\/Upload-Downloaded-Lottie.jpg\" alt=\"Upload Downloaded Lottie\" class=\"kb-img wp-image-10049\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/10\/Upload-Downloaded-Lottie.jpg 1035w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/10\/Upload-Downloaded-Lottie-300x250.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/10\/Upload-Downloaded-Lottie-1024x855.jpg 1024w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/10\/Upload-Downloaded-Lottie-768x641.jpg 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/10\/Upload-Downloaded-Lottie-360x301.jpg 360w\" sizes=\"auto, (max-width: 1035px) 100vw, 1035px\" \/><\/figure>\n<\/div><\/div>\n\n<\/div><\/div>\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading10035_c1817d-c9, .wp-block-kadence-advancedheading.kt-adv-heading10035_c1817d-c9[data-kb-block=\"kb-adv-heading10035_c1817d-c9\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading10035_c1817d-c9 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading10035_c1817d-c9[data-kb-block=\"kb-adv-heading10035_c1817d-c9\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading10035_c1817d-c9 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading10035_c1817d-c9[data-kb-block=\"kb-adv-heading10035_c1817d-c9\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h3 class=\"kt-adv-heading10035_c1817d-c9 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading10035_c1817d-c9\">Generating Lottie Links<\/h3>\n\n\n<style>.kb-row-layout-id10035_7e0aea-f1 > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id10035_7e0aea-f1 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id10035_7e0aea-f1 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:repeat(2, minmax(0, 1fr));}.kb-row-layout-id10035_7e0aea-f1 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id10035_7e0aea-f1 > .kt-row-column-wrap{grid-template-columns:repeat(2, minmax(0, 1fr));}}@media all and (max-width: 767px){.kb-row-layout-id10035_7e0aea-f1 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id10035_7e0aea-f1 alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-2-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column10035_a5d2e4-85 > .kt-inside-inner-col,.kadence-column10035_a5d2e4-85 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column10035_a5d2e4-85 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column10035_a5d2e4-85 > .kt-inside-inner-col{flex-direction:column;}.kadence-column10035_a5d2e4-85 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column10035_a5d2e4-85 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column10035_a5d2e4-85{position:relative;}@media all and (max-width: 1024px){.kadence-column10035_a5d2e4-85 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column10035_a5d2e4-85 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column10035_a5d2e4-85\"><div class=\"kt-inside-inner-col\">\n<p> Click on the Lottie Animation you wish to use. Then, click the <strong>Generate<\/strong> <strong>Button<\/strong> to generate different usable asset links. Once the links are generated, copy your preferred link.<\/p>\n\n\n<style>.kb-image10035_127801-7e .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image10035_127801-7e size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1644\" height=\"1600\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/10\/Generate-Asset-Link.jpg\" alt=\"Generate Asset Link\" class=\"kb-img wp-image-10047\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/10\/Generate-Asset-Link.jpg 1644w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/10\/Generate-Asset-Link-300x292.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/10\/Generate-Asset-Link-1024x997.jpg 1024w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/10\/Generate-Asset-Link-768x747.jpg 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/10\/Generate-Asset-Link-1536x1495.jpg 1536w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/10\/Generate-Asset-Link-360x350.jpg 360w\" sizes=\"auto, (max-width: 1644px) 100vw, 1644px\" \/><\/figure>\n<\/div><\/div>\n\n\n<style>.kadence-column10035_14f493-ee > .kt-inside-inner-col{display:flex;}.kadence-column10035_14f493-ee > .kt-inside-inner-col,.kadence-column10035_14f493-ee > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column10035_14f493-ee > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column10035_14f493-ee > .kt-inside-inner-col{flex-direction:column;justify-content:center;}.kadence-column10035_14f493-ee > .kt-inside-inner-col > .aligncenter{width:100%;}.kt-row-column-wrap > .kadence-column10035_14f493-ee{align-self:center;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column10035_14f493-ee{align-self:auto;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column10035_14f493-ee > .kt-inside-inner-col{flex-direction:column;justify-content:center;}.kadence-column10035_14f493-ee > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column10035_14f493-ee{position:relative;}@media all and (max-width: 1024px){.kt-row-column-wrap > .kadence-column10035_14f493-ee{align-self:center;}}@media all and (max-width: 1024px){.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column10035_14f493-ee{align-self:auto;}}@media all and (max-width: 1024px){.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column10035_14f493-ee > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 1024px){.kadence-column10035_14f493-ee > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kt-row-column-wrap > .kadence-column10035_14f493-ee{align-self:center;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column10035_14f493-ee{align-self:auto;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column10035_14f493-ee > .kt-inside-inner-col{flex-direction:column;justify-content:center;}.kadence-column10035_14f493-ee > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column10035_14f493-ee\"><div class=\"kt-inside-inner-col\"><style>.kb-image10035_654a46-fd.kb-image-is-ratio-size, .kb-image10035_654a46-fd .kb-image-is-ratio-size{max-width:276px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image10035_654a46-fd.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image10035_654a46-fd .kb-image-is-ratio-size{align-self:unset;}.kb-image10035_654a46-fd figure{max-width:276px;}.kb-image10035_654a46-fd .image-is-svg, .kb-image10035_654a46-fd .image-is-svg img{width:100%;}.kb-image10035_654a46-fd .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image10035_654a46-fd\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"700\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/10\/Asset-Links.jpg\" alt=\"Asset Links\" class=\"kb-img wp-image-10050\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/10\/Asset-Links.jpg 720w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/10\/Asset-Links-300x292.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/10\/Asset-Links-360x350.jpg 360w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/figure><\/div>\n<\/div><\/div>\n\n<\/div><\/div>\n\n<style>.kb-row-layout-id10035_7f7167-74 > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id10035_7f7167-74 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id10035_7f7167-74 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:repeat(2, minmax(0, 1fr));}.kb-row-layout-id10035_7f7167-74 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id10035_7f7167-74 > .kt-row-column-wrap{grid-template-columns:repeat(2, minmax(0, 1fr));}}@media all and (max-width: 767px){.kb-row-layout-id10035_7f7167-74 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id10035_7f7167-74 alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-2-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column10035_0783b1-0c > .kt-inside-inner-col{display:flex;}.kadence-column10035_0783b1-0c > .kt-inside-inner-col,.kadence-column10035_0783b1-0c > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column10035_0783b1-0c > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column10035_0783b1-0c > .kt-inside-inner-col{flex-direction:column;justify-content:center;}.kadence-column10035_0783b1-0c > .kt-inside-inner-col > .aligncenter{width:100%;}.kt-row-column-wrap > .kadence-column10035_0783b1-0c{align-self:center;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column10035_0783b1-0c{align-self:auto;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column10035_0783b1-0c > .kt-inside-inner-col{flex-direction:column;justify-content:center;}.kadence-column10035_0783b1-0c > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column10035_0783b1-0c{position:relative;}@media all and (max-width: 1024px){.kt-row-column-wrap > .kadence-column10035_0783b1-0c{align-self:center;}}@media all and (max-width: 1024px){.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column10035_0783b1-0c{align-self:auto;}}@media all and (max-width: 1024px){.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column10035_0783b1-0c > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 1024px){.kadence-column10035_0783b1-0c > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kt-row-column-wrap > .kadence-column10035_0783b1-0c{align-self:center;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column10035_0783b1-0c{align-self:auto;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column10035_0783b1-0c > .kt-inside-inner-col{flex-direction:column;justify-content:center;}.kadence-column10035_0783b1-0c > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column10035_0783b1-0c\"><div class=\"kt-inside-inner-col\">\n<p>Once you have the URL copied, navigate to the <strong>Lottie Animation<\/strong> block&#8217;s <strong>General Settings<\/strong>. Set the <strong>File Source<\/strong> to <strong>Remote URL<\/strong>.<br><br>Then, paste the URL from the generated asset link into the <strong>Lottie Animation URL<\/strong> block setting to apply the animation.<\/p>\n<\/div><\/div>\n\n\n<style>.kadence-column10035_c3b783-d4 > .kt-inside-inner-col,.kadence-column10035_c3b783-d4 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column10035_c3b783-d4 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column10035_c3b783-d4 > .kt-inside-inner-col{flex-direction:column;}.kadence-column10035_c3b783-d4 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column10035_c3b783-d4 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column10035_c3b783-d4{position:relative;}@media all and (max-width: 1024px){.kadence-column10035_c3b783-d4 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column10035_c3b783-d4 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column10035_c3b783-d4\"><div class=\"kt-inside-inner-col\"><style>.kb-image10035_7109c2-04 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image10035_7109c2-04\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"216\" height=\"306\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/10\/Source-URL.jpg\" alt=\"Source URL\" class=\"kb-img wp-image-10056\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/10\/Source-URL.jpg 216w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/10\/Source-URL-212x300.jpg 212w\" sizes=\"auto, (max-width: 216px) 100vw, 216px\" \/><\/figure><\/div>\n<\/div><\/div>\n\n<\/div><\/div>\n\n\n<p>For detailed settings and options related to the Lottie Block, please refer to the <a href=\"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-blocks\/lottie-animation-block\/\" target=\"_blank\" rel=\"noreferrer noopener\">Lottie Block documentation<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Using GIFs can effectively demonstrate information visually. Kadence Blocks supports GIF images, enabling you to display animated content across your website for a more engaging user experience. Additionally, Kadence Blocks offers the Lottie Animation Block, which allows you to incorporate Lottie Animations into your website, providing lightweight, scalable, and interactive animations for enhanced visual appeal&#8230;.<\/p>\n","protected":false},"author":148263,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"doc_category":[417],"doc_tag":[],"knowledge_base":[7],"class_list":["post-10035","docs","type-docs","status-publish","hentry","doc_category-block-tutorials","knowledge_base-kadence-blocks"],"year_month":"2026-04","word_count":1014,"total_views":"3194","reactions":{"happy":"0","normal":"0","sad":"1"},"author_info":{"display_name":"victormonk","author_link":"https:\/\/www.kadencewp.com\/help-center\/author\/victormonk\/"},"doc_category_info":[{"term_name":"Block Tutorials","term_url":"https:\/\/www.kadencewp.com\/help-center\/knowledge-base\/kadence-blocks\/block-tutorials\/"}],"doc_tag_info":[],"knowledge_base_info":[{"term_name":"Kadence Blocks","term_url":"https:\/\/www.kadencewp.com\/help-center\/knowledge-base\/kadence-blocks\/","term_slug":"kadence-blocks"}],"knowledge_base_slug":["kadence-blocks"],"taxonomy_info":{"doc_category":[{"value":417,"label":"Block Tutorials"}],"knowledge_base":[{"value":7,"label":"Kadence Blocks"}]},"featured_image_src_large":false,"comment_info":0,"_links":{"self":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/10035","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/users\/148263"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/comments?post=10035"}],"version-history":[{"count":13,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/10035\/revisions"}],"predecessor-version":[{"id":10057,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/10035\/revisions\/10057"}],"wp:attachment":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/media?parent=10035"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_category?post=10035"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_tag?post=10035"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/knowledge_base?post=10035"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}