Lottier - Lottie Animated Images for WPBakery

Lottier is a WordPress plugin for adding and managing animated pictures using the WPBakery. 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. Such a tool can improve any type of WordPress site and design, whether it be Blog, Portfolio, Corporate Website, Creative Agency, eCommerce Project, Personal CV, a Restaurant, or Magazine.

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. The WPBakery element settings allow you to 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 WPBakery 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 WPBakery

• 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 WPBakery
• 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 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

STEP 3

Click Upload Plugin Button

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

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.

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.

Lottier is a WordPress plugin for adding animated images using the WPBakery. The Lottier is excellent for adding light and eye-catching animations to your WordPress website and increase the conversion and engagement of your customers.

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 of animated images.  These are just some examples that can inspire you to create your style. It provides you a quick start in a few clicks.

For further work, you need the WPBakery to be installed on your site.

Open or create a page using WPBakery to start using the Lottier WPBakery addons. You will find the widgets on the Content section:

Click on the name or icon of the addon to add it to the page and get animated images. Each of the tabs presented a specific group of settings:

• Properties
• Animation
• Header
• Description
• Link
• Style Header
• Style SubHeader
• Style Description
• Style Animation

Properties tab

• 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.
• Play mode – select animation loop mode. The available options: Normal, Bounce. The option is available when the checkbox Loop is enabled.
• Loop – a checkbox to enable/disable the animation loop.
• Controls – a checkbox to enable/disable the control display.
• Header – a checkbox to enable/disable the header and subheader display of the animation block.
• Description – a checkbox to enable/disable the description display of the animation block.
• Enable link – a checkbox to enable/disable the animation link.

Animation tab

• Select 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.

Header tab

• 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.
• Subheader Position – select the position for the subheader display. It can be Top or Bottom.
• Subheader – enter the subheader text of the animation block. Delete the text to remove the subheader.

Description tab

• 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 tab

• 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.

Style Header

• Border color – specify the color of the image border using the color picker.
• Border style – select one of the available border styles(Solid, Dotted, Dashed, Hidden, Double, Groove, Ridge, Inset, Outset, Initial, Inherit). Select None to disable the border.
• Border radius – the option allows you to adjust the border radius for the image.
• Background – choose a color or image for the header background and select the background display mode.
• Font Family – select the font family for the header of the current block.
• Font style – select the font style for the header of the current block.
• Font size – select the font size for the header of the current block.
• Line height – select the line height for the header of the current block.
• Text color – specify the font color and opacity for the header text using the color picker.
• Alignment – manage header text alignment (left, center, right, justify).

Style SubHeader tab

• Border color – specify the color of the image border using the color picker.
• Border style – select one of the available border styles(Solid, Dotted, Dashed, Hidden, Double, Groove, Ridge, Inset, Outset, Initial, Inherit). Select None to disable the border.
• Border radius – the option allows you to adjust the border radius for the image.
• Background – choose a color or image for the subheader background and select the background display mode.
• Font Family – select the font family for the subheader of the current block.
• Font style – select the font style for the subheader of the current block.
• Font size – select the font size for the subheader of the current block.
• Line height – select the line height for the subheader of the current block.
• Text color – specify the font color and opacity for the subheader text using the color picker.
• Alignment – manage subheader text alignment (left, center, right, justify).

Style Description

• Border color – specify the color of the image border using the color picker.
• Border style – select one of the available border styles(Solid, Dotted, Dashed, Hidden, Double, Groove, Ridge, Inset, Outset, Initial, Inherit). Select None to disable the border.
• Border radius – the option allows you to adjust the border radius for the image.
• Background – choose a color or image for the description background and select the background display mode.
• Font Family – select the font family for the description of the current block.
• Font style – select the font style for the description of the current block.
• Font size – select the font size for the description of the current block.
• Line height – select the line height for the description of the current block.
• Text color – specify the font color and opacity for the description text using the color picker.
• Alignment – manage description text alignment (left, center, right, justify).

Style Animation tab

• Border color – specify the color of the image border using the color picker.
• Border style – select one of the available border styles(Solid, Dotted, Dashed, Hidden, Double, Groove, Ridge, Inset, Outset, Initial, Inherit). Select None to disable the border.
• Border radius – the option allows you to adjust the border radius for the image.
• Background – choose a color or image for the description background and select the background display mode.
• Width – specify the width of the animation box.
• Custom height – a checkbox to enable/disable the custom height of the animation box. Disable the option to set the height automatically.

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.