Lottier is a WordPress plugin for adding and managing animated pictures using the Elementor. The Lottier is excellent for adding light and eye-catching animations to your WordPress website and increase the conversion and engagement of your customers.
This plugin uses the library of JSON animations from lottefiles.com. The animation library includes thousands of exciting animations made by professional designers from around the world. You can easily pick up an animation that suits your site and your customers and use it in just two clicks.
Includes Templates for ElementorFull control of animation optionsOnline editor for styling animationCrafted for Elementor BuilderPerfect for Popular Elementor ThemesSuitable for all kind of Layouts and TemplatesCompletely cross-browser support
We made sure that it was easy for you to get started with Lottier. With the plugin, you get 5 unique stylized and go-to-use templates. These are just some examples that can inspire you to create your style. It provides you a quick start in a few clicks.
The plugin has straightforward but powerful settings. Inside the Elementor, you can configure everything about the size, position, animation speed, looping, or playback mode. Besides, you can edit the colors of the layers inside the animation, for this on the animation library website there is a very functional editor of animated pictures online. And of course, you can independently use to draw, load, and use your unique animation.
This Lottier represents the future of web animations because it uses the SVG and JSON code to animate SVG paths & shapes. An animation image is thinner than any static image(jpg or png), and several times smaller than an animated image or video. Also, the loading of such an animation occurs instantly without blur or pixelation.
Lottier for Elementor is exceptionally compatible with all modern browsers. It does not matter which browser users view your site: Chrome, Firefox, Opera, Safari, or Edge. Everything will look great on all devices and in all browsers.
Features of the Lottier for Elementor
Lottie library with over a thousand free animations
Custom animation options
Included 5 Lottier templates
Three-component block layout
Customizable fonts, colors, borders, backgrounds, gradient, etc.
Online animation styles editor
Responsiveness settings
Works well with all WordPress themes built on Elementor
Perfect for Elementor 2.5 and higher
Seo Friendly
Included pot file for quick translation on any language
Perfect for RTL direction
Fast and smooth installing
Tested and compatible up to WordPress 5+
Lightweight and Fast
All major browsers supported Chrome, Firefox, Safari, Opera, and Edge
Easy to use and customize with modern User Interface
Installation Guide and detailed Users Manual
Six months Included Support for CodeCanyon buyers
The plugin installation takes only a few seconds. Also, you do not need to make any additional settings. The plugin is ready to work immediately after installation – you only need to install and activate it in WordPress. Read more about capabilities and settings in the Online Documentation.
Installing
Installing the WordPress plugin is quick and straightforward. After you have downloaded the archive with the plugin, you will see the file with the plugin inside. Unzipped purchased the product you will see inside the archive with the plugin pluginname.zip There are two ways to install it:
Installation of the Plugin through the WordPress Admin panel ( Recommended for most users )
STEP 1
First of all, open WordPress admin area login page and login in into WordPress as Admin. To do this visit http://yoursitename/wp-admin
STEP 2
Go to Plugins > Add New
Add New Plugin to WordPress
STEP 3
Click Upload Plugin Button
Upload New Plugin to WordPress
STEP 5
Choose archive with Plugin and press Install Now Button
STEP 6
After Installing go back to the Plugins page and click Activate below plugin title
Activate Installed Plugin
Installation the plugin through FTP or build-in File manager
STEP 1
Use Login and Password to connect to your web-server via FTP or use your hosting file manager.
STEP 2
Upload archive with plugin to /wp-content/plugins
STEP 3
On next step Unzip the archive with the plugin
STEP 4
Installing WordPress Plugin is almost finished. Go to the Plugins page and click Activate below plugin title. You can find out your username and password on the website of your hosting provider.
Activate Installed Plugin
After installing and activating the plugin, you can go to settings of the Plugin. Also, you can read more helpful articles about WordPress Themes and WordPress Plugins.
Settings
This Lottier widget uses the library of JSON animations from lottefiles.com. The animation library includes thousands of exciting animations made by professional designers from around the world. You can easily pick up an animation that suits your site and your customers and use it in just two clicks.
The Lottier widget is excellent for adding light and eye-catching animations to your WordPress website and increase the conversion and engagement of your customers.
For further work, you need the Elementor to be installed on your site. You can download it from wordpress.org
Open or create a page using Elementor to start using the Lottier widget. You will find the widget at the end of the general section.
Widget icon
Drag the widget to a page using the Element editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:
On the Content tab of the Lottier widget, you can manage the animation properties, enter the header and description or change the animation content.
Properties settings
Properties settings of the Lottier
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, SVG hover, Section hover, On click.
Loop – a toggle to enable/disable the animation loop.
Play mode – select animation loop mode. The available options: Normal, Bounce.
Controls – a toggle to enable/disable the control display.
Header – a toggle to enable/disable the header display of the animation block.
Description – a toggle to enable/disable the description display of the animation block.
Enable link – a toggle to enable/disable the animation link.
Header settings
Header – enter the header text of the animation block.
HTML tag – select one of the available tags from the list for the header text. Depending on the selected tag, the text display style will be changed. These tags also help to make your page more SEO friendly.
Show subheader – the toggle to enable/disable the display of the subheader text.
Subheader Position – select the position for the subheader display. It can be Top or Bottom.
Subheader – enter the subheader text of the animation block.
Description settings
Description Position – select the position for the description display. It can be After header or Footer of the animation block.
HTML tag – select one of the available tags from the list for the description text. Depending on the selected tag, the text display style will be changed. These tags also help to make your page more SEO friendly.
Description – enter the description text of the animation block.
Link settings
Link Position – select a position to add the link. It can be applied to the SVG image or to the animation Box.
URL – enter the link URL of the animation.
Animation content settings
Source – select an animated image source. The available options: Media library, URL, JSON
URL – enter the URL of the animated image from https://lottiefiles.com/. The option is available when selecting the Source “URL”.
JSON – paste the code of the JSON file received from the https://lottiefiles.com/. The option is available when selecting the Source “JSON”
Style tab
On the Lottie widget styles tab, you can configure everything related to the visual style of elements: colors, typography, backgrounds, gradients, and more.
Header
There are many options in the section to change the style of the header text and background to create your own design.
Header style settings of the Lottie
Margin – manage the margin of the header text in different units(px, em, %) for desktop, tablets or phones.
Padding – manage the padding of the header text in different units(px, em, %) for desktop, tablets or phones.
Color– specify the font color and opacity for the header text using the color picker.
Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
Shadow – this setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Background Type – this setting changes the background of the current section. You can choose a color, gradient, or background image.
Alignment – manage header text alignment (left, center, right) for desktop, tablet or mobile.
SUBHEADER
Margin – manage the margin of the subheader text in different units(px, em, %) for desktop, tablets or phones.
Padding – manage the padding of the subheader text in different units(px, em, %) for desktop, tablets or phones.
Color– specify the font color and opacity for the subheader text using the color picker.
Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
Shadow – this setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Description
Margin – manage the margin of the description text in different units(px, em, %) for desktop, tablets or phones.
Padding – manage the padding of the description text in different units(px, em, %) for desktop, tablets or phones.
Color– specify the font color and opacity for the description text using the color picker.
Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
Shadow – this setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Background Type – this setting changes the background of the current section. You can choose a color, gradient, or background image.
Alignment – manage description text alignment (left, center, right) for desktop, tablet or mobile.
Animation
Margin – manage the margin of the animation in different units(px, em, %) for desktop, tablets or phones.
Padding – manage the padding of the animation in different units(px, em, %) for desktop, tablets or phones.
Width – specify the width of the animation box.
Custom height – the toggle to enable/disable the custom height of the animation box. Disable the option to set the height automatically.
Background Type – this setting changes the background of the current section. You can choose a color, gradient, or background image.
Alignment – manage animation alignment (left, center, right) for desktop, tablet or mobile.
Advanced Tab
The settings in the advanced tab Lottier widget allow you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.
Save changes
Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.
Update page in the Elementor
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.