Lottie animations can be a excellent way to include some pizzazz to your web site. They are effortless to use and can genuinely make your website stand out. In this tutorial, we will present you how to include Lottie animations to a Breakdance Builder web site.
What is Lottie
Advantages of Utilizing Lottie in WordPress
Lottie animations are modest, light-weight, and effortless to use. They can be additional to any web site without having the want for coding or animation abilities. Lottie animations can be employed to enhance consumer encounter and engagement on a web site. Plus, they appear excellent!
Include Lottie to Breakdance in Visual Builder
Breakdance has a native visual block for Lottie files. To use it, drag the component from the visual builder into your articles location. Use the animation library to locate an asset URL, just paste it into the block, and your component ought to be very good to go
Include Lottie to Breakdance with a Customized Code Block
Stage one: Uncover your animation
The initial stage is to locate the Lottie animation that you want to use. There are a number of distinct spots that you can locate these. The best way is to browse by means of their library of animations. As soon as you locate one particular that you like, scroll down and press “Use animation in html”. Customize the alternatives to your deciding on (we advocate turning of controls so you just see the animation). Copy the whole code with the two the script and animation tag.
<script src="https://unpkg.com/@lottiefiles/lottie-player@most recent/dist/lottie-player.js"> </script> <lottie-player src="https://assets9.lottiefiles.com/packages/lf20_pghdouhq.json" background="transparent" velocity="one" design="width: 300px height: 300px" loop autoplay> </lottie-player>
Stage three: Preview Positioning
That is it! Make confident to conserve to see how it seems to be on your website. You can use the positioning alternatives in the customized code block editor to move it close to if necessary. And that is it! You have efficiently additional a Lottie animation to your Breakdance Builder web site. If you want to find out much more about Lottie animations and how to use them, check out out their courses.
Have you employed Lottie animations on your web site? Allow us know in the feedback beneath!