{"id":19959,"date":"2020-08-13T07:03:51","date_gmt":"2020-08-13T07:03:51","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&#038;p=19959"},"modified":"2026-02-13T18:43:06","modified_gmt":"2026-02-13T18:43:06","slug":"jetelements-how-to-use-lottie-widget","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-use-lottie-widget\/","title":{"rendered":"Lottie Files Widget Overview"},"content":{"rendered":"<div class=\"note-banner d-flex border-bold border-jetthemecore rounded overflow-hidden p-20\"><div class=\"mr-12\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M9 21C9 21.5 9.4 22 10 22H14C14.6 22 15 21.5 15 21V20H9V21ZM12 2C8.1 2 5 5.1 5 9C5 11.4 6.2 13.5 8 14.7V17C8 17.5 8.4 18 9 18H15C15.6 18 16 17.5 16 17V14.7C17.8 13.4 19 11.3 19 9C19 5.1 15.9 2 12 2Z\" fill=\"#F2D23C\"\/><\/svg><\/div><div class=\"d-flex flex-column\"><div class=\"text-900 mb-12\">Things to know<\/div><p class=\"m-0\">Lottie is a file format created especially for animation files. It is JSON-based and designed to simplify applying animations across different platforms. The Lottie file is smaller than files in other formats, so it doesn\u2019t affect page load speed. Additionally, it is easily scalable without sacrificing image quality. The <strong>Lottie Files<\/strong> widget within the <a href=\"https:\/\/crocoblock.com\/plugins\/jetelements\/\" target=\"_blank\" rel=\"noopener\"><i>JetElements<\/i><\/a> plugin allows you to insert Lottie files to your page in the Elementor page builder quickly and easily.<\/p><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"enabling-the-lottie-widget\"><strong>Enabling the Lottie Widget<\/strong><\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>The widget can be enabled in the <strong><em>WordPress > Crocoblock > JetPlugins > <\/em><\/strong><a href=\"https:\/\/crocoblock.com\/plugins\/jetelements\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><em>JetElements<\/em><\/strong><\/a><strong><em> >Widgets &amp; Extensions<\/em><\/strong> tab by activating the <strong>Lottie Files<\/strong> toggle in the <strong>Available Widgets<\/strong> section.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/activation-of-the-lottie-files-widget.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/activation-of-the-lottie-files-widget-1024x640.webp\" alt=\"activation of the lottie files widget\" class=\"wp-image-50931\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/activation-of-the-lottie-files-widget-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/activation-of-the-lottie-files-widget-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/activation-of-the-lottie-files-widget-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/activation-of-the-lottie-files-widget-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/activation-of-the-lottie-files-widget-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/activation-of-the-lottie-files-widget.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>Once enabled, the changes will be saved automatically.<\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"lottie-widget-adding\"><strong>Lottie Widget Adding<\/strong><\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>The widget can be added to a page or post by searching for the<strong> Lottie Files<\/strong> widget and dragging it to the page.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/inserting-the-Lottie-widget.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/inserting-the-Lottie-widget-1024x640.webp\" alt=\"inserting the Lottie widget\" class=\"wp-image-50930\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/inserting-the-Lottie-widget-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/inserting-the-Lottie-widget-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/inserting-the-Lottie-widget-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/inserting-the-Lottie-widget-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/inserting-the-Lottie-widget-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/inserting-the-Lottie-widget.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>The default animation is the one with the Crocoblock logo, but it can be changed to any other you like.\u00a0<\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"settings\"><strong>Settings<\/strong><\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>The widget has the standard <strong>Content<\/strong>, <strong>Style<\/strong>, and <strong>Advanced<\/strong> settings tab.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"content-settings\"><strong>Content settings<\/strong><\/h3>\n\n\n\n<p>The <strong>Content <\/strong>settings are presented by the <strong>Content<\/strong> and <strong>Settings<\/strong> tab. In the <strong>Content <\/strong>tab, the following fields are available:<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/the-context-settings-of-the-lottie-widget.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/the-context-settings-of-the-lottie-widget-1024x640.webp\" alt=\"the content settings of the lottie files widget\" class=\"wp-image-50928\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/the-context-settings-of-the-lottie-widget-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/the-context-settings-of-the-lottie-widget-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/the-context-settings-of-the-lottie-widget-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/the-context-settings-of-the-lottie-widget-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/the-context-settings-of-the-lottie-widget-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/the-context-settings-of-the-lottie-widget.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<ul>\n<li><strong>Source<\/strong> \u4e00 a set of two buttons: \u201c<strong>JSON File<\/strong>\u201d and \u201c<strong>External URL<\/strong>\u201d. If pressed, the \u201c<strong>JSON File<\/strong>\u201d button opens the <strong>JSON File<\/strong> bar for picking a file from the media library for uploading. If the \u201c<strong>External URL<\/strong>\u201d button is pressed, the <strong>External URL<\/strong> bar opens to insert a link;<\/li>\n\n\n\n<li><strong>Link <\/strong>\u4e00 a text field to insert a link to a page that will be opened after clicking the <strong>Lottie Files<\/strong> widget. The additional \u201cOpen in a new window\u201d and \u201cAdd nofollow\u201d checkbox, and the <strong>Custom Attributes<\/strong> text fields will be opened after pressing the \u201c<strong>Link Options<\/strong>\u201d button.<\/li>\n<\/ul>\n\n\n\n<p>The <strong>Settings<\/strong> tab is the second block in the <strong>Content<\/strong> tab. The following fields are presented:<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/the-settings-tab-of-the-lottie-widget.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/the-settings-tab-of-the-lottie-widget-1024x640.webp\" alt=\"the settings tab of the lottie widget\" class=\"wp-image-50927\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/the-settings-tab-of-the-lottie-widget-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/the-settings-tab-of-the-lottie-widget-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/the-settings-tab-of-the-lottie-widget-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/the-settings-tab-of-the-lottie-widget-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/the-settings-tab-of-the-lottie-widget-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/the-settings-tab-of-the-lottie-widget.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<ul>\n<li><strong>Renderer<\/strong> \u4e00 a drop-down menu to choose how the animation file will be rendered \u2013 as an \u201cSVG\u201d or a \u201cCanvas\u201d. If the \u201cSVG\u201d is set, the animation element will be built with HTML and animated with JavaScript, which is better suited for small animated icons and buttons. If the \u201cCanvas\u201d is set, both the element creation and animation will be performed by JavaScript, which is better suited for complex animation;<\/li>\n\n\n\n<li><strong>Play Action<\/strong> \u4e00 a drop-down menu to select a way of playing the animation, and each of them has some additional settings:\n<ul>\n<li><strong>Autoplay<\/strong> \u4e00 an option that allows animation to be played automatically without any custom actions. Once selected, the<strong> Autoplay Delay<\/strong> bar will be displayed to set the gap that specifies the delay in milliseconds before the animation starts playing;<\/li>\n\n\n\n<li><strong>On Hover<\/strong> \u4e00 an option that plays an animation when the user hovers the pointer over it. If set, the <strong>On Hover Out<\/strong> drop-down menu will be shown with options to specify the behavior of the animation once it is moused over:\n<ul>\n<li><strong>No Action<\/strong> \u4e00 the animation will finish playing and stop;<\/li>\n\n\n\n<li><strong>Pause<\/strong> \u4e00 when users move the pointer out of the animation area, the animation stops at that moment. When they move the pointer back to it, it will start playing from the paused moment;<\/li>\n\n\n\n<li><strong>Stop<\/strong> \u4e00 the animation will completely stop playing and turn back to its starting point;<\/li>\n\n\n\n<li><strong>Reverse <\/strong>\u4e00 the animation will be played backward when the user moves the pointer out of it;<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>On Click <\/strong>\u4e00 an option that allows the animation to play only after the user clicks it;<\/li>\n\n\n\n<li><strong>On click Reversible<\/strong> \u4e00 an option that allows the animation to play in reverse on the second click. On the third click, the animation plays as usual, and so on;<\/li>\n\n\n\n<li><strong>Scroll <\/strong>\u4e00 an option that allows the animation to play while the user scrolls the page. In this case, the playing speed will be similar to the page scrolling speed. Once the option is set, the <strong>Viewport<\/strong> slider will be enabled to choose when the animation starts playing. In particular, the slider sets the portion of the screen the animation must fill before it starts or stops moving.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>The following fields are available when the \u201cAutoplay,\u201d \u201cOn Hover,\u201d \u201cOn Click,\u201d and \u201cViewpoint\u201d <strong>Play Action<\/strong> are set:<\/p>\n\n\n\n<ul>\n<li><strong>Loop<\/strong> \u4e00 a toggle to enable the animation looping, which can create an impression of infinite movement. If the toggle is activated, the <strong>Loop Times<\/strong> field will be displayed to insert the needed number of loops;<\/li>\n\n\n\n<li><strong>Reversed<\/strong> \u4e00 a toggle to enable the uploaded animation to be played backward;<\/li>\n\n\n\n<li><strong>Play Speed<\/strong> \u4e00 a field to make the animation move faster or slower. On \u201c1\u201d, the animation will move at its original speed.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"style-settings\"><strong>Style settings<\/strong><\/h3>\n\n\n\n<p>The <strong>Style<\/strong> settings are intended to customize the <strong>Alignment<\/strong>, <strong>Width<\/strong>, <strong>Opacity<\/strong>, <strong>CSS Filters<\/strong>, <strong>Border Type<\/strong>, <strong>Border Radius<\/strong>, and <strong>Box Shadow<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/the-style-settings-of-the-lottie-widget.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/the-style-settings-of-the-lottie-widget-1024x640.webp\" alt=\"the style settings of the lottie widget\" class=\"wp-image-50926\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/the-style-settings-of-the-lottie-widget-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/the-style-settings-of-the-lottie-widget-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/the-style-settings-of-the-lottie-widget-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/the-style-settings-of-the-lottie-widget-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/the-style-settings-of-the-lottie-widget-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/the-style-settings-of-the-lottie-widget.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"advanced-settings\"><strong>Advanced settings<\/strong><\/h3>\n\n\n\n<p>The <strong>Advanced<\/strong> settings are intended to manage the <strong>Layout<\/strong>, <strong>Dynamic Visibility<\/strong>, <strong>Background<\/strong>, <strong>Border<\/strong>, <strong>Motion Effect<\/strong>, and more.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/the-advanced-settings-of-the-lottoie-widget.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/the-advanced-settings-of-the-lottoie-widget-1024x640.webp\" alt=\"\" class=\"wp-image-50929\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/the-advanced-settings-of-the-lottoie-widget-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/the-advanced-settings-of-the-lottoie-widget-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/the-advanced-settings-of-the-lottoie-widget-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/the-advanced-settings-of-the-lottoie-widget-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/the-advanced-settings-of-the-lottoie-widget-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/the-advanced-settings-of-the-lottoie-widget.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n<\/div><\/div>\n\n\n\n<p>That\u2019s all. You now know how to add the Lottie animation file to a WordPress site and customize it according to your needs using the <em>JetElements<\/em> plugin.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This overview reveals all the details of Lottie widget applications. You will learn how to enable it, upload the animation file, and fit it into your website design.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[513],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Lottie Files Widget Full Overview \u4e00 JetElements | Crocoblock<\/title>\n<meta name=\"description\" content=\"Learn how to add the Lottie animation file to a WordPress site and customize it according to your needs.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-use-lottie-widget\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Lottie Files Widget Full Overview \u4e00 JetElements | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Learn how to add the Lottie animation file to a WordPress site and customize it according to your needs.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-use-lottie-widget\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-13T18:43:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/activation-of-the-lottie-files-widget-1024x640.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-use-lottie-widget\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-use-lottie-widget\/\",\"name\":\"Lottie Files Widget Full Overview \u4e00 JetElements | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2020-08-13T07:03:51+00:00\",\"dateModified\":\"2026-02-13T18:43:06+00:00\",\"description\":\"Learn how to add the Lottie animation file to a WordPress site and customize it according to your needs.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-use-lottie-widget\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-use-lottie-widget\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-use-lottie-widget\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Lottie Files Widget Overview\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Lottie Files Widget Full Overview \u4e00 JetElements | Crocoblock","description":"Learn how to add the Lottie animation file to a WordPress site and customize it according to your needs.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-use-lottie-widget\/","og_locale":"en_US","og_type":"article","og_title":"Lottie Files Widget Full Overview \u4e00 JetElements | Crocoblock","og_description":"Learn how to add the Lottie animation file to a WordPress site and customize it according to your needs.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-use-lottie-widget\/","og_site_name":"Help Center","article_modified_time":"2026-02-13T18:43:06+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/activation-of-the-lottie-files-widget-1024x640.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-use-lottie-widget\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-use-lottie-widget\/","name":"Lottie Files Widget Full Overview \u4e00 JetElements | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2020-08-13T07:03:51+00:00","dateModified":"2026-02-13T18:43:06+00:00","description":"Learn how to add the Lottie animation file to a WordPress site and customize it according to your needs.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-use-lottie-widget\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-use-lottie-widget\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-use-lottie-widget\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"Lottie Files Widget Overview"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/19959"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=19959"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=19959"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=19959"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}