- With the latest release from Elementor, designers gained access to hundreds of customisable Lottie Animations to use in their projects. Website designers have long relied on gifs and videos to introduce movement, but these embedded file types are limited to operating within a restricted framework.
- The Lottie widget offers many settings and controls for customizing your animation, including reverse play and loop Create Animations for Mobile Devices Add versatile, responsive animations that work on every browser and device Upload Your Own Original Animation.
- A Lottie file is a JSON-based animation file format that uses a textual, descriptive representation of the animation elements and movement towards a smaller file size and platform-independence, resolution independence and variable frame-rate during animation playback.
Elementor, Web Design This guide to Lottie Animations will show you a creative way to use the Lottie widget as a button and set it to play an animation and download a free eBook upon clicking it. You may have noticed lately that UI animations are gaining a lot of popularity in the web design domain.
Description
Browse from 221 animated SVG icons and 50 Lottie animations in Elementor Page Builder for your next project.
Try live demo or visit our website to view icon library and features.
Lottie Elementor
SVG animation features:
- 3 types of animations
- Customizable stroke colors
- Scaling of icons to any size, padding adjustment
- Custom setting of animation duration time
- Option to upload and animate your own SVG icon
- On hover draw interaction option
- Entrance animation effects (36)
- Add link to icon (column)
Lottie animation features:
- 5 types of play settings: auto play, on hover, on click, on scroll, on mouse out
- Custom animation timing
- Scroll based display option
- Adjustable animation speed
- Alignment and margin settings
- CSS filter settings with transition duration on hover
- Opacity settings options – also on hover
- Hover animation effects (27)
- Border styling options
- Upload your own or enter Lottie animation URL
- One click customization
Installation
From within WordPress’ dashboard:
- Go to Plugins -> Add New
- Search for “Animated SVG”
- Click “Install”
- Click “Activate”
- Open Elementor > Start using widgets
Manually via FTP:
- Upload the folder ‘animated-svg/’ into the ‘/wp-content/plugins/’ directory
- Activate the plugin through the Plugins tab in WordPress
- Navigate to Elementor > Start using widgets
FAQ
I can’t upload my own images, what should I do?
– In rare cases hosting providers restrict the upload of SVG files. You should install an SVG support plugin like Easy SVG support https://wordpress.org/plugins/easy-svg/ to solve the issue.
Do I need Elementor Pro to use the widgets?
– No, the plugin works fine with the free version of Elementor. Minimum version required: 2.9.14
Can I use the icons without limitations?
– Yes, you may display the icons on your website. The source code of each SVG file contains the list of credits and/or the license copyright information. See license.txt for more information.
Reviews
INTRODUCE: Lottie Animation
You can adding and managing animated pictures using the Elementor by this WordPress plugin. Want to add light and eye-catching animations to your WordPress website and increase the conversion and engagement of your customers? The Lottie is excellent for this mission. The selection and installation of animations no longer make it difficult for you. In just 2 clicks, your website can own an animation that suits itsself and its customers. The animation library includes thousands of exciting animations made by professional designers from around the world.
About Lottie Animation
Includes templates for elementor
Full control of animation options
Online editor for styling animation
Crafted for elementor builder
Perfect for popular elementor themes
Suitable for all kind of layouts and templates
Completely cross-browser support Where to download softwares for pc.
Features of Lottie Animation 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
Bittorrent pc software free download. 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
How to use Lottie Animation for Elementor?
Open or create a page using WPBakery to start using the plugin. 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 tab
Animation speed – specify the animation speed using the slider. You can adjust the value at intervals of 0.1.
Linux macos windows. 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.
Lottie Elementor Contact
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.
Toolwp always guarantee to provide the best products!
You May Also Like
You must log in and be a buyer of this download to submit a review.