Elementor , Lottier

Use Lottier widget to add Animated Images

This Lottier(called “Animated images” in the Selection pack) 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 and drag the widget to a page using the Elementor 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:

Content Tab

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

Was this article helpful to you?