The Lottier Gutenberg block has straightforward and simple settings. The Gutenberg block settings allow you to configure animation speed, looping, or playback mode. Besides, you can edit the background colors of the layers and width/height of the animation. And of course, you can independently use to draw, load, and use your unique animation.
Open or create a page using Gutenberg to start using the Lottier block. You will find the block in the Media section:
Click on the name or icon of the block to add it to the page and get animated images. Select just added section and go to the Block tab on the side navigation. Here you will find the General plugin settings.
Animation content URL
Enter the URL of the animated image. Select the link to the JSON file from the https://lottiefiles.com/ site or upload the JSON file on your site and specify the internal link.
Animation speed
Specify the animation speed using the slider. You can adjust the value at intervals of 0.1.
Playback
Select a way to playback the animation. The available options: Auto play, Hover, On click.
Play mode
Select animation loop mode. The available options: Normal, Bounce. The option is available when the checkbox Loop is enabled.
Renderer
Renderer to use.
- SVG
- Canvas
Loop
A toggle to enable/disable the animation loop.
Controls
A toggle to enable/disable the control display.
Enable link
A toggle to enable/disable the animation link. As soon as you enable this option, a new settings tab will be displayed where you can add your link.
Height (px)
Specify the height of the animated image.
Background color
Choose the color of the animation background from the prepared ones or add the custom color.
Hosting for Elementor websites
Fast and reliable hosting is significant for any WordPress site. We recommend all our customers use SiteGround WordPress Hosting. Many unique settings and features make this hosting the number 1 for WordPress: Free Website Transfer, Staging Tools, Free SSL, CDN, and much more for 3.95/mo.