Lottiefiles Animation

Lottiefiles Animation

Block Used
Lottiefiles Animation
Knowledge Required
Novice

Add animations to your website to increase more Engagement using the Lottiefiles Animation block. You will not only get multiple designs to choose from but also several animations you can use for your designs. The UX of your website will be unmatched, once you are able to use the Lottiefiles Animation block to its full potential.

Pro tip
Why not add animation to important parts of your content using this block. Add animations just by using the JSON code made from Lottiefiles. Make sure not to over add animations on your website this affect the website performance.

How to use the Lottiefiles Animation Block of The Plus Addons For Elementor

The Lottiefiles Animation block comes with multiple functions. Let’s understand how to use this block in the tutorial below. 

Table Of Contents

Setting Up

Gutenberg gives multiple ways to add Lottiefiles into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing Lottiefiles after “/” sign, eg.“/Lottiefiles”, in the content area. Gutenberg also provides drag & drop after opening the list of blocks panel.

After placing the block you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.

1. Layout

Lottie Content

JSON Input

Either download a JSON file (example link) and import Its Code/URL here.

JSON URL

Enter the JSON URL here.

JSON Code

Enter the JSON Code here.

Load in Backend 

Slide right to load in the backend too.

Main Settings

Play on

Specify which action to play the animation.

Loop Animation

Slide right to enable Loop Animation.

Total Loops

Enter the number of loops you want to add to the animation.

Animation Play Speed

Set the Animation Play speed here.

Custom Animation Start Time 

Enable and set a custom start time for the animation. (You need to enter Custom Start Time and End Time from Lottiefiles Web Player. You need to use the same format e.g. 30,239, 699, etc.)

Custom Animation End Time 

Enable and set a custom end time for the animation. (You need to enter Custom Start Time and End Time from Lottiefiles Web Player. You need to use the same format e.g. 30,239, 699, etc.)

URL

Enable URL here.

Type

Specify the type of URL you want to use, either Normal or Dynamic.

URL

Enter the URL here.

Click Delay

Specify how long after the click you want the link to open.

Animation Renderer 

Select the type of Animation you want to render. You will get three options:
SVG
Canvas
HTML

Heading 

Slide to enable the Animation Heading.

Heading 

Enter the Animation Heading here.

Description 

Slide to enable the Animation Description.

Description 

Enter the Animation Description here.

Layout Options

Alignment

Set the Alignment here.

Maximum Width

Set the Maximum Width here.

Minimum Height

Set the Minimum Height here.

2. Style

The Style tab is used for customizing the appearance of all the Lottiefiles block components. All these styling options include customizing the fonts, colors, background, margins and padding which are common across all the blocks. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article

Heading Options

Typography

Assign a size, weight, spacing, and much more to fonts.

Margin

Put in some outer space to the heading.

Padding

Put in some inner space to the heading.

Text Color

A color picker to assign a suitable color to the heading text.

Background Color

A color picker to assign a suitable background to the heading text.

Description Options

Typography

Assign a size, weight, spacing, and much more to fonts.

Margin

Put in some outer space to the description.

Padding

Put in some inner space to the description.

Text Color

A color picker to assign a suitable color to the description text.

Background Color

A color picker to assign a suitable background to the description text.

Lottie Style

Set and specify the CSS Filters, Opacity, and Transition Duration here.

3. Advanced

Advanced Tab Options are common across all the blocks. So, we have written a detailed tutorial explaining how to use these options.

View The Advanced Tab Tutorial

Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.