Lottie Widget

The Lottie Widget from RTMKit allows you to add lightweight, scalable animations to your Elementor website using Lottie animation files. You can use Lottie animations to make your website more engaging without relying on traditional GIFs or video files.

With the Lottie Widget, you can control how the animation plays, customize its appearance, and create interactive animation effects based on user interaction.

Step 1 — Make Sure RTMKit & RTMElements Activated

Make sure RTMKit & RTMElements Addon is installed and activated on your WordPress website. RTMElements Addon is available exclusively in Rometheme Hub.

How to Get Addons?

Go to WordPress Dashboard → RTMKit → Features → Addons and ensure that RTMKit & RTMElements marked as Active.

Step 2 — Add the Lottie Widget

• Open the page with Elementor.
• Find RTM Elemenets → Lottie.
• or Search for Lottie in the Elementor widget panel.
• Drag and drop the widget into your desired section or container.

Step 3 — Setting the Lottie Widget

• In the Content tab, you will find three sections: Lottie, Settings, and Interactive Icon.
• This section is where you add the animation file and set its basic display.
• Source: Choose where the animation comes from. Select Media File to upload a Lottie JSON file from your computer or Media Library.
• Upload JSON File: Click the upload icon to add your .json file. To replace it, upload a new file, or click the trash icon to remove it.
• Alignment: Sets the animation position to left, center, or right. You can set a different alignment for desktop, tablet, and mobile.
• Caption: Adds a caption below the animation. Select None if you don’t need one.
• Link: Makes the animation clickable. Select None if you don’t need a link.
  

Note: If WordPress blocks your JSON upload, your site may not allow JSON files by default. Allow JSON uploads first, or use a plugin that enables it.

Settings

This section controls how and when the animation plays.

• Trigger: Choose what starts the animation, for example On Hover to play it when visitors hover over it.
• Loop: Enable this to repeat the animation continuously.
• On Hover Out: Sets what the animation does when the cursor leaves the hover area.
• Hover Area: Sets which area detects the hover. Select Animation to use the animation itself as the hover area.
• Play Speed (x): Controls the playback speed. A value of 1 is normal speed, lower values play slower, and higher values play faster.
• Start Point: Sets where the animation starts, from 0 to 100.
• End Point: Sets where the animation ends, from 0 to 100.
• Renderer: Choose how the animation is rendered. SVG is the default and keeps the animation sharp at any size.
• Lazy Load: Loads the animation only when it is about to appear on screen, which helps improve page speed.

Interactive Icon

These options only apply when the loaded file is an interactive icon, meaning an icon that provides color, stroke, and state controls. They are ignored for regular Lottie files.

• State: Enter the name of the icon state you want to play, for example hover-check. Leave it empty to use the icon’s default state.
• Primary Color: Changes the main color of the icon.
• Secondary Color: Changes the second color of the icon. This only works on icons that have a secondary color, which is common in outline styles.
• Stroke: Sets the line thickness of the icon.

Step 4 — Custom Style the Lottie Widget

Go to the Style tab to customize the animation’s appearance.

• Alignment: Sets the animation position to left, center, or right.
• Width / Max Width: Controls the size of the animation. You can set different values for desktop, tablet, and mobile.
• Opacity: Adjusts the transparency of the animation. You can set separate values for Normal and Hover states.
• CSS Filters: Applies effects such as blur, brightness, contrast, or saturation.
• Border & Border Radius: Adds a border around the animation and rounds its corners.
• Box Shadow: Adds a shadow effect behind the animation.
• Padding / Background: Adds spacing and a background color around the animation.

Step 5 — Publish the Template

Once your design is complete, click Publish.