{"id":1674,"date":"2024-03-22T15:59:55","date_gmt":"2024-03-22T15:59:55","guid":{"rendered":"https:\/\/docs.wpblockart.com\/blockart-blocks\/?post_type=docs&#038;p=1674"},"modified":"2024-04-10T08:22:39","modified_gmt":"2024-04-10T08:22:39","slug":"lottie","status":"publish","type":"docs","link":"https:\/\/docs.wpblockart.com\/blockart-blocks\/lottie\/","title":{"rendered":"Lottie"},"content":{"rendered":"\n<p>Lottie Block, provided by the BlockArt plugin, allows you to add the Lottie animation on your end. Moreover, you can customize the animation based on how it plays, control the speed, loops, etc.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"402\" src=\"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-add-lottie-block-1024x402.png\" alt=\"Adding Lottie Animation\" class=\"wp-image-2058\" srcset=\"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-add-lottie-block-1024x402.png 1024w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-add-lottie-block-300x118.png 300w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-add-lottie-block-768x302.png 768w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-add-lottie-block-1536x603.png 1536w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-add-lottie-block-360x141.png 360w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-add-lottie-block.png 1795w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Adding Lottie Animation<\/figcaption><\/figure>\n\n\n\n<p>After you have chosen the Lottie block, you&#8217;ll get a block editing panel on the right-hand side. It has three options, i.e., <strong>General<\/strong>, <strong>Style<\/strong>, and <strong>Advanced<\/strong>. These options customize the design and other elements of the block. Let\u2019s explore one by one below:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">General<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Layout<\/h3>\n\n\n\n<ul>\n<li><strong>Source<\/strong> &#8211; Under the option, you can upload the animation JSON file or add the URL of the JSON to display animations with the Lottie block. You can get the animation JSON URL via the link: <a href=\"https:\/\/lottiefiles.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/lottiefiles.com\/<\/a><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1815\" height=\"812\" src=\"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-adding-animation-via-external-url.gif\" alt=\"Adding Animation JSON URL\" class=\"wp-image-2059\"\/><figcaption class=\"wp-element-caption\">Adding Animation JSON URL<\/figcaption><\/figure>\n\n\n\n<ul>\n<li><strong>Width<\/strong> &#8211; It sets the width of the animation added.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"369\" src=\"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-animation-width-1024x369.png\" alt=\"Set Animation Width\" class=\"wp-image-2060\" srcset=\"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-animation-width-1024x369.png 1024w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-animation-width-300x108.png 300w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-animation-width-768x277.png 768w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-animation-width-1536x554.png 1536w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-animation-width-360x130.png 360w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-animation-width.png 1742w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Set Animation Width<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Lottie<\/h3>\n\n\n\n<ul>\n<li><strong>Play On<\/strong> &#8211; It refers to the triggering of an animation to play and comes up with the following options:\n<ul>\n<li><strong>Auto<\/strong> &#8211; It plays the animation automatically without the need for any external actions.<\/li>\n\n\n\n<li><strong>Hover<\/strong> &#8211; It plays the animation on hover.<\/li>\n\n\n\n<li><strong>ViewPort<\/strong> &#8211; It plays the animation&nbsp;when it enters the&nbsp;viewport.<\/li>\n\n\n\n<li><strong>On Scroll<\/strong> &#8211; It plays the animation when the site is scrolled.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"380\" src=\"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-play-on-mode-1024x380.png\" alt=\"Manage Play On Mode\" class=\"wp-image-2063\" srcset=\"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-play-on-mode-1024x380.png 1024w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-play-on-mode-300x111.png 300w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-play-on-mode-768x285.png 768w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-play-on-mode-1536x569.png 1536w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-play-on-mode-360x133.png 360w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-play-on-mode.png 1713w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Manage Play On Mode<\/figcaption><\/figure>\n\n\n\n<ul>\n<li><strong>Mode<\/strong> &#8211; It refers to a specific effect or alternation in the moment of animation and comes up with the following options:\n<ul>\n<li><strong>Normal<\/strong> &#8211; In this mode, the animation plays from start to finish without any external effects.<\/li>\n\n\n\n<li><strong>Bounce &#8211; <\/strong>In this mode, when the animation reaches the end, instead of stopping, it<strong> <\/strong>overshoots slightly and then returns.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"382\" src=\"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-animation-mode-1024x382.png\" alt=\"Add Mode to Animation\" class=\"wp-image-2064\" srcset=\"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-animation-mode-1024x382.png 1024w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-animation-mode-300x112.png 300w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-animation-mode-768x287.png 768w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-animation-mode-1536x574.png 1536w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-animation-mode-360x134.png 360w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-animation-mode.png 1692w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Add Mode to Animation<\/figcaption><\/figure>\n\n\n\n<ul>\n<li><strong>Loop <\/strong>&#8211; Looping in animation refers to an animation&#8217;s ability to repeat itself continuously. Once the option is enabled, the animation plays from start to finish and then starts again from the beginning, creating a repetitive motion.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1692\" height=\"632\" src=\"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-animation-mode-1.png\" alt=\"Adding Loop Effect\" class=\"wp-image-2067\" srcset=\"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-animation-mode-1.png 1692w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-animation-mode-1-300x112.png 300w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-animation-mode-1-1024x382.png 1024w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-animation-mode-1-768x287.png 768w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-animation-mode-1-1536x574.png 1536w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-animation-mode-1-360x134.png 360w\" sizes=\"(max-width: 1692px) 100vw, 1692px\" \/><figcaption class=\"wp-element-caption\">Adding Loop Effect<\/figcaption><\/figure>\n\n\n\n<ul>\n<li><strong>Show Control<\/strong> &#8211; Enabling this option displays various animation controls, such as Play, Stop, Range, and Toggle.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"369\" src=\"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-display-control-1024x369.png\" alt=\"Display Animation Control\" class=\"wp-image-2068\" srcset=\"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-display-control-1024x369.png 1024w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-display-control-300x108.png 300w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-display-control-768x277.png 768w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-display-control-1536x554.png 1536w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-display-control-360x130.png 360w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-display-control.png 1791w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Display Animation Control<\/figcaption><\/figure>\n\n\n\n<ul>\n<li><strong>Speed<\/strong> &#8211; It controls the speed of the animation, which determines how slowly or quickly the animation moves.<\/li>\n\n\n\n<li><strong>Delay<\/strong> &#8211; It refers to the pause or waiting period between the start of an animation.<\/li>\n\n\n\n<li><strong>Animation Loop Count<\/strong> &#8211; It refers to the number of times an animation should play before stopping.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"448\" src=\"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-speed-delay-and-animation-loop-count-1024x448.png\" alt=\"Manage Speed, Delay and Animation Loop Count\" class=\"wp-image-2069\" srcset=\"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-speed-delay-and-animation-loop-count-1024x448.png 1024w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-speed-delay-and-animation-loop-count-300x131.png 300w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-speed-delay-and-animation-loop-count-768x336.png 768w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-speed-delay-and-animation-loop-count-1536x673.png 1536w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-speed-delay-and-animation-loop-count-360x158.png 360w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-speed-delay-and-animation-loop-count.png 1715w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Manage Speed, Delay and Animation Loop Count<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Styling<\/h2>\n\n\n\n<p>It provides the following styling options for the Block. These are listed below:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Properties<\/h3>\n\n\n\n<ul>\n<li><strong>Alignment<\/strong> -It sets the alignments for the animation. You can set the alignments as&nbsp;<strong>Left<\/strong>,&nbsp;<strong>Center, Right<\/strong>, and<strong> Justify<\/strong>. Moreover, you can also set the alignment position on different devices (Desktop, Tablet, and Mobile).<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"343\" src=\"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-text-alignments-1024x343.png\" alt=\"Manage Text Alignment\" class=\"wp-image-2072\" srcset=\"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-text-alignments-1024x343.png 1024w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-text-alignments-300x100.png 300w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-text-alignments-768x257.png 768w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-text-alignments-1536x514.png 1536w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-text-alignments-360x121.png 360w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-text-alignments.png 1750w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Manage Text Alignment<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Background <\/h3>\n\n\n\n<ul>\n<li><strong>Type<\/strong> &#8211; It sets the background color of the animation. You can change the visual appearance of the background by changing its color or adding an image. Moreover, you can set the different background colors on Normal and Hover Modes.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"356\" src=\"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-set-animation-background-1024x356.png\" alt=\"Change Background Color\" class=\"wp-image-2075\" srcset=\"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-set-animation-background-1024x356.png 1024w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-set-animation-background-300x104.png 300w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-set-animation-background-768x267.png 768w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-set-animation-background-1536x534.png 1536w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-set-animation-background-360x125.png 360w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-set-animation-background.png 1727w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Change Background Color<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Advanced<\/h2>\n\n\n\n<p>The Advanced section consists of four customization options for the Lottie Block.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"21-toc-title\">Spacing<\/h3>\n\n\n\n<p>Under the spacing section, you can find the following options available:<\/p>\n\n\n\n<ul>\n<li><strong>Block Margin<\/strong>&nbsp;\u2013 According to the site requirement, you can assign a specific margin value to the block along with units like px, em, %, and rem. Moreover, you can set different margin values for various devices (Desktop, Tablet, and Mobile).<\/li>\n\n\n\n<li><strong>Block Padding \u2013\u00a0<\/strong>According to the site requirement, you can assign a specific padding value to the block along with units like<strong>\u00a0<\/strong>px, em, %, and rem. Moreover, you can set different padding values for various devices (Desktop, Tablet, and Mobile).<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"372\" src=\"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-margin-and-padding-spacing-1024x372.png\" alt=\"Manage Margin and Padding Space\" class=\"wp-image-2076\" srcset=\"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-margin-and-padding-spacing-1024x372.png 1024w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-margin-and-padding-spacing-300x109.png 300w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-margin-and-padding-spacing-768x279.png 768w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-margin-and-padding-spacing-1536x558.png 1536w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-margin-and-padding-spacing-360x131.png 360w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-manage-margin-and-padding-spacing.png 1713w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Manage Margin and Padding Space<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"6-toc-title\">Z-Index<\/h3>\n\n\n\n<p>It allows you to set the priority of the Lottie block according to the site requirement.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"7-toc-title\">Responsive Condition<\/h3>\n\n\n\n<p>Using the option, you can enable\/disable displaying the block on various screen sizes:<\/p>\n\n\n\n<ul>\n<li><strong>Hide on Desktop<\/strong>&nbsp;\u2013 It hides the Lottie block on the Desktop.<\/li>\n\n\n\n<li><strong>Hide on Tablet<\/strong>\u00a0\u2013 It hides the Lottie block on the Tablet.<\/li>\n\n\n\n<li><strong>Hide on Mobile<\/strong>\u00a0\u2013 It hides the Lottie block on the Mobile.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"416\" src=\"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-enable-disable-responsive-condition-1024x416.png\" alt=\"Enable\/Disable Block Responsive Condition\" class=\"wp-image-2078\" srcset=\"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-enable-disable-responsive-condition-1024x416.png 1024w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-enable-disable-responsive-condition-300x122.png 300w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-enable-disable-responsive-condition-768x312.png 768w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-enable-disable-responsive-condition-1536x624.png 1536w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-enable-disable-responsive-condition-360x146.png 360w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-enable-disable-responsive-condition.png 1680w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Enable\/Disable Block Responsive Condition<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"13-toc-title\">Advanced<\/h3>\n\n\n\n<p>Under the option, you can set the CSS ID and Classes for this particular Lottie block. The available options are listed below:<\/p>\n\n\n\n<ul>\n<li><strong>CSS ID<\/strong>&nbsp;\u2013 It allows you to set specific IDs to style this particular block. Once you have set the ID, you can write the CSS Code to style the block using that particular ID.<\/li>\n\n\n\n<li><strong>Additional CSS Class(es)<\/strong>&nbsp;\u2013 It allows you to add a CSS class to your block and write custom CSS to style this particular block.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"450\" src=\"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-add-css-id-and-additional-css-class-1024x450.png\" alt=\"Add CSS ID and Additional CSS Class\" class=\"wp-image-2081\" srcset=\"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-add-css-id-and-additional-css-class-1024x450.png 1024w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-add-css-id-and-additional-css-class-300x132.png 300w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-add-css-id-and-additional-css-class-768x337.png 768w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-add-css-id-and-additional-css-class-1536x675.png 1536w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-add-css-id-and-additional-css-class-360x158.png 360w, https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-content\/uploads\/sites\/3\/2024\/03\/blockart-blocks-lottie-block-add-css-id-and-additional-css-class.png 1700w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Add CSS ID and Additional CSS Class<\/figcaption><\/figure>\n\n\n\n<p>After creating the separate ID and Classes, visit your CSS editor and write a style for the ID and class.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Lottie Block, provided by the BlockArt plugin, allows you to add the Lottie animation on your end. Moreover, you can customize the animation based on how it plays, control the speed, loops, etc. After you have chosen the Lottie block, you&#8217;ll get a block editing panel on the right-hand side. It has three options, i.e.,[&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":[],"doc_category":[7],"doc_tag":[],"_links":{"self":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/1674"}],"collection":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/comments?post=1674"}],"version-history":[{"count":26,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/1674\/revisions"}],"predecessor-version":[{"id":2758,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/1674\/revisions\/2758"}],"wp:attachment":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/media?parent=1674"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/doc_category?post=1674"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/doc_tag?post=1674"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}