Rogan Documentation

This guide will help you purchase Animation Addons for Elementor Pro with ease, so you can start using the plugin without any hassle.

Step-by-Step Purchase Guide

Go to the official Animation Addons website and click on the ‘View Pricing’ section.

Choose a Pricing Plan 

Before you make a pick, here’s the deal:
You’ve got two options — Annual or Lifetime — just choose what works best for you.

If you go with the Annual Plan, you’ll need to renew it every year to keep using the plugin. If you don’t renew, the plugin will stop working. 

On the other hand, if you go with the Lifetime Plan, you just pay once and that’s it — no renewals, no hassle.

Nice and simple. The choice is yours!

Enter Payment Details

Once you pick your pricing plan, click on the “Get Started” button. 

Next, enter your name and email address, then choose your preferred payment method. If you have a discount code, you can apply it here as well.

Once you’ve filled in the required details, check the box to agree to our license terms, and then click “Purchase” to complete your order.

After Purchase

After purchasing your specific plans, you will receive an email from Wealcoder. The email may be found in the email inbox or the Spam Folder.  

Next, click on the wealcoder link down below. Once you click on the wealcoder link,  you can view your details and downloads.

In conclusion, if you have any questions or need a hand, feel free to reach out to our support team—we’re always here to help.

Animation Addons lets you build animated websites using the powerful features of GSAP. It makes the process faster and easier, especially when you’re working on multiple projects. Even if you have no coding experience, you can still create stunning animations with ease.

The plugin is available in both free and premium versions. If you’d like to try the free version, there are two simple ways to download it. Let’s take a look! 

Method 1: Installing Plugin From Your WordPress Dashboard 

From your WordPress dashboard, go to Plugins > Add Plugin. In the search bar, type “Animation Addons”.

Find the plugin called “Animation Addons for Elementor” with the orange icon.

Afterward, click Install Now, then activate the plugin once the installation is complete.

After activation, the plugin is all set and ready to go!

Method 2: Downloading & Installing from The WordPress Plugin Directory

To download Animation Addons as a ZIP file from an external source, follow the steps below. 

• You can find Animation Addons by browsing the WordPress plugin directory.
• One click on the download button and the Animation Addons Zip is yours.

Go to Plugins > Add New, then click the “Upload Plugin” button

Click the “Choose File” button and upload the ZIP file you just downloaded. After that, install and activate the plugin. You’re now all set to start using Animation Addons on your website.

You can explore a variety of beautifully crafted animations or create your own custom effects with ease.

That’s it! If you have any questions or need a hand, feel free to reach out to our support team—we’re always here to help.

Having trouble or need help with Animation Addons for Elementor? No worries—this page will guide you through where to find answers and how to contact support if you need one-on-one help. 

Just follow the steps below to get the support you need.

Step 1: Visit the Website 

First of all, visit the Animation Addons website and scroll down slightly—you’ll find the support section there. 

Step 2: Fill Out the Support Form 

Once you click on the Support section, the “Submit a Ticket” form will appear. Select the product “Animation Addons for Elementor Pro.”

Next, paste your license key, then enter your email, password, and name to complete the registration. After that, provide the subject of your issue and include any relevant URLs.

In the Description section, be sure to describe your issue in as much detail as possible. Finally, click “Submit Ticket” to complete the process.

We hope these steps help you easily get the support you need for Animation Addons for Elementor. However, if you have any questions or need a hand, feel free to reach out to our support team—we’re always here to help. 

Animation Addons for Elementor Pro is a premium plugin designed to work seamlessly with your website. Meanwhile, Animation Addons for Elementor’s free version offers limited features and can be installed directly from the WordPress dashboard. 

However, the Pro version isn’t available through the WordPress dashboard.

In this guide, I’ll show you step-by-step through the process of installing the Pro version on your website.

Whether you’ve just purchased it or are setting it up for the first time, this simple guide will help you get everything up and running in no time.

Step 1 

First and foremost, click on Plugins> Add Plugin> Upload Plugin, and upload the Animation Addons Pro zip file plugin that you have downloaded. 

Step 2

You must install the free version of the Animation Addons plugin first; only then can you use the Pro version properly.

Step 3

Finally, explore the Animation Addons for Elementor Pro full features and take your website to the next level. 

Conclusion 

I truly believe that by following the steps above, you can easily install Animation Addons for your Elementor Pro website. With it, you’ll be able to make your site more engaging, animated, and interactive.

To sum up,  if you have any questions or need a hand, feel free to reach out to our support team—we’re always here to help. 

Animation Addons for Elementor delivers performance-ready animation tools that enhance the user experience. Whether you’re aiming for subtle transitions or bold visual effects, setting it up is straightforward. 

This guide will take you through everything you need to know to get started. 

1. First of all, head to Animation Addons for Elementor > Setup, and then hit Continue.

2. Next, you need to activate the widgets you want to use. For example, if you want to use the Image Box widget or the Image Box Slider, simply toggle the switch to enable them.

After that, click on “Continue” and repeat the same process to activate the Extensions, just as you did with the widgets.

3. Once you’ve clicked ‘Continue,’ simply hit the ‘Go to Dashboard’ button to complete the setup and start exploring the addons.

4. After successfully completing the setup process, navigate to the Widgets and Extensions tabs. From there, you can selectively enable the widget elements and extension features that best suit your needs.

Final Verdict

Now that you’ve learned how to configure the key features of Animation Addons for Elementor, you’re ready to transform your website with smooth, high-impact animations. 

Whether you’re building a dynamic landing page or an engaging scroll-based experience, the tools are in your hands. Start exploring and bring your creative vision to life.

If you have any questions or need a hand, feel free to reach out to our support team—we’re always here to help. 

1. Yes, you can upgrade your license whenever you need. Just log in to your account at animation-addons.com, find the plugin you purchased, and click on “View Licenses” next to it. From there, you’ll see the available upgrade options.

2. If there are any upgrades for your license, you’ll see a View Upgrades link on the right. Simply click it to explore your options and make the upgrade as per your choice.

3. Afterward, you will see the total cost for each option, such as Business and Agency. Choose the one that best suits your preference to complete the purchase.

4. Next, enter your details, such as your first name, last name, and email address, and choose your preferred payment method. 

5. After completing your upgrade purchase, your license will be upgraded, allowing you to activate it on additional URLs. To view the domains where your license is activated or deactivate it from a website, head to your account page and click on the View Licenses link. 

From there, click Manage Sites, and you’ll have the option to add a new site for activation or deactivate an existing one, like this:

Before setting up the Site Logo Widget, make sure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll have access to all free Elementor widgets, including the Site Logo Widget—at no cost! Additionally, you can explore both free and pro widgets by filtering the selection options.

Introduction

The Site Logo Widget lets you upload, resize, align, and link your logo for a professional brand appearance.

Key Use Cases for the Site Logo Widget

The Site Logo Widget in Elementor is perfect for:

• Branding – Display your logo consistently across your website.
• Header/Footer Design – Easily integrate your logo in the header or footer sections.
• Clickable Logo – Link your logo to your homepage for seamless navigation.
• Responsive Design – Ensure your logo adapts perfectly to different screen sizes.
• Professional Appearance – Enhance your site’s overall design with a polished brand identity.

With the Site Logo Widget, you can showcase your brand’s logo with customization options for size, alignment, and link behavior.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Site Logo Widget?

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Site Logo Widget in the list.
• Toggle it on to enable the widget.
• Now, the Site Logo Widget is ready to use!

How to Add the Site Logo Widget in Elementor

1. Open the page where you want to add the Site Logo.
2. Launch the Elementor editor.
3. In the Elementor panel, search for “Site Logo.”
4. Drag the Site Logo widget to your desired section.
5. The Site Logo widget will now be available for customization.

You can upload your logo, adjust its size, alignment, and link it to the homepage as needed.

How to Configure the Site Logo Widget

Enable it, create a new page, set a title, choose the Elementor Full Width template, and publish. Adjust options as needed.

• In the Elementor panel, search for the “Site Logo Widget.”
• Drag and drop the widget into your desired section.
• Upload your logo and customize its size, alignment, and link using the available options.

Your Site Logo Widget is now ready to showcase your brand professionally across your site!

Configuring Site Logo Widget : A Step-by-Step Guide

Once the Site Logo Widget is added to your page, you can configure its settings under different tabs: Content, Style and Advanced.

Content Settings

There is only one option available: Site Logo.

Site Logo

• The Site Logo widget allows you to display your brand’s logo with flexible customization options, making it easier to maintain consistent branding across your website. Within the Content section, you’ll find several configurable settings:

Logo – Customization Options

Within the Logo section of the Site Logo widget, you are provided with two options to control how your site’s logo is displayed:

1. Site Logo

• This option automatically pulls the logo that is set in your WordPress site settings (Appearance → Customize → Site Identity).
  
• Ideal for maintaining consistency across multiple pages or templates.
  
• Any updates made to the default site logo in WordPress will be reflected automatically wherever this widget is used with the Site Logo option.

2. Custom Logo

• Allows you to upload and use a different logo specifically for this instance of the widget.
  
• This is useful when you want to display a variation of your logo (e.g., a white version for dark backgrounds, or a compact version for mobile layouts) without changing the global site logo.
  
• The custom logo overrides the default site logo only in the selected widget area.

When to Use Which

• Use Site Logo for consistency and centralized control.
  
• Use Custom Logo for flexibility and design variations on different sections of the site.

This dual option ensures you have both control and customization capabilities while maintaining a coherent brand identity.

Image Resolution

The Image Resolution option in the Site Logo widget controls the logo’s size and clarity, ensuring it appears sharp across all devices.

Key Functionalities:

• Default Setting (Full)
  By default, the logo displays in its original resolution as uploaded to the WordPress media library. This preserves image quality, especially for high-resolution displays like Retina screens.
  
• Custom Image Size
  You can also manually choose from predefined WordPress image sizes (thumbnail, medium, large) or enter a custom size in pixels (width × height). This allows precise control over the logo’s appearance without manually editing the image file.

Best Practices:

• Use high-resolution images (2x or SVG) to ensure clarity on all screen types.
  
• Choose image sizes that align with your layout and device responsiveness.

Link

The Link section allows you to control where users are directed when they click on the site logo. It includes three linking options:

1. Site URL – Automatically links the logo to your website’s homepage.
   
2. Custom URL – Lets you define a specific link manually, such as a landing page, external site, or any custom destination.
   
3. Media File – Opens the original uploaded logo image in full size when clicked, ideal for viewing or downloading.

Caption

The Caption option in the Site Logo widget allows you to control the visibility of image captions associated with your logo. It offers two settings:

1. None – Disables the caption entirely. No text will appear below or near the logo image.
   
2. Attachment Caption – Displays the caption text that was added to the logo image in the WordPress Media Library.

Caption

The Caption option in the Site Logo widget allows you to control the visibility of image captions associated with your logo. It offers two settings:

1. None – Disables the caption entirely. No text will appear below or near the logo image.
   
2. Attachment Caption – Displays the caption text that was added to the logo image in the WordPress Media Library.

This feature is helpful when you want to add a descriptive note or branding message below the logo, enhancing clarity or context for your visitors.

Style Settings

The Style section of the Site Logo widget offers visual customization options to adjust your logo’s appearance for a clean and responsive design.

Alignment

• Align your logo to the Left, Center, or Right of the section or column it’s placed in. This ensures it fits perfectly within your layout design.

Dimensions

• Width, Max Width, Height: Adjust these settings to define how large or small your logo should appear across different devices, helping maintain proportion and responsiveness.

Animation Effects

You can style the logo under two animation states: Normal & Hover.

Normal State

Customize how the logo appears by default using the following options:

• Opacity: Control the transparency of the logo.
  
• CSS Filter: Apply visual effects like blur, brightness, contrast, saturation and hue.
  
• Border Type: Allows you to define how the border around your logo appears. You can choose from several styles: Default, None, Solid, Double, Dotted, Dashed, and Groove to outline your logo.
  
• Border Radius: Round the corners of your logo for a softer appearance.
  
• Box Shadow: Add depth with shadow effects to make your logo stand out.

Hover State

Define how the logo behaves when users hover over it:

• Opacity: Adjust the transparency when hovered.
  
• CSS Filters: Apply hover-specific visual effects for a dynamic look.
  
• Transition Duration: Set how quickly the hover effects animate.
  
• Hover Animation: Choose from a variety of hover animation styles for added interactivity.
  
• Border Type: Same options as Normal—style the border when hovered.
  
• Border Radius: Smoothly round logo corners on hover.
  
• Box Shadow: Apply shadow effects to enhance visual feedback.

The Style section of the Site Logo widget offers visual customization options to adjust your logo’s appearance for a clean and responsive design.

Advanced Settings

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

That’s it! You’ve successfully learned how to configure the Site Logo Widget in Elementor to create dynamic and engaging event displays on your website.

For any further assistance or inquiries, feel free to contact our support team!

Before setting up the Nav Menu Widget, make sure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll have access to all free Elementor widgets, including the Nav Menu Widget—at no cost! Additionally, you can explore both free and pro widgets by filtering the selection options.

Introduction

The Nav Menu widget creates a responsive menu, organizing links with easy customization.

Key Use Cases for the Nav Menu Widget

The Nav Menu Widget in Elementor is ideal for:

• Navigation – Create a clear and easy-to-use navigation menu.
• Multi-Page Websites – Organize links to different pages, categories, or custom URLs.
• Responsive Design – Ensure the menu adapts across devices for a seamless user experience.
• User Experience – Offer a smooth and intuitive way for users to navigate your site.
• Customization – Customize the layout, style, and positioning of your menu to match your site’s design.

With the Nav Menu Widget, you can easily build and customize a navigation menu to suit your website’s needs.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Nav Menu Widget?

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Nav Menu Widget in the list.
• Toggle it on to enable the widget.

How to Add the Nav Menu Widget in Elementor

1. Open the page where you want to add the Nav Menu.
2. Launch the Elementor editor.
3. In the Elementor panel, search for “Nav Menu.”
4. Drag the Nav Menu widget to your desired section.
5. The Nav Menu widget will now be available for customization.

You can organize your menu items, customize the layout, and adjust the alignment for a seamless navigation experience.

How to Configure Nav Menu Widget

Enable it, create a new page, set a title, choose the Elementor Full Width template, and publish. Adjust options as needed.

How to Add the Nav Menu Widget in Elementor

Enable the widget, create a new page, set a title, choose the Elementor Full Width template, and publish it. Adjust options as needed.

• In the Elementor panel, search for the “Nav Menu Widget.”
• Drag and drop the widget into your desired section.
• Choose your menu from the dropdown, and customize its layout, alignment, style, and responsive behavior using the available settings.

Configuring Nav Menu Widget : A Step-by-Step Guide

Once the Nav Menu Widget is added to your page, you can configure its settings under different tabs: Content, Style and Advanced.

Content Settings

The Content section of the Nav Menu widget includes two main configuration areas:

1. Menu Settings

This panel allows you to select the WordPress menu you want to display. You can also define the layout (Horizontal, Vertical, or Dropdown), align the menu (Start, Center, or End), and control pointer effects, submenu indicators, and spacing for desktop view.

Menu Settings

In the Menu Settings panel of the Nav Menu widget, you can configure the structure and behavior of your navigation menu. Below are the available options:

• Select Menu: Choose a pre-created WordPress menu from the dropdown to display in the widget.
• Submenu Indicator: Enable or disable indicators for items with submenus, helping users identify expandable menu items easily.
  
• Layout: Set the menu orientation to Horizontal, Vertical, or Dropdown, depending on your design requirements.
  
• Menu Alignment: Align the menu items to the Start, Center, or End within the section for optimal placement.
  
• Hover Pointer: Choose how the hover effect appears when a user interacts with the menu. Options include Dot, Underline, Overline, Line Through, and Flip.
  
• Wrap Menu Item: Toggle this setting to control whether menu items wrap to the next line, enhancing layout flexibility for longer items or smaller screens.

2. Mobile Menu Settings

This section helps you customize the appearance and behavior of your menu on mobile devices. You can choose a mobile breakpoint, toggle icons (hamburger/close), define the menu layout (Dropdown or Slide), and set alignment and animation preferences to ensure an optimized mobile experience.

The Mobile Menu Settings section allows you to customize how the navigation menu behaves and appears on smaller devices. Here’s a breakdown of the available options:

• Hamburger Icon: Choose a preferred hamburger menu icon style that appears on mobile devices to toggle the menu visibility.
  
• Mobile Icon: Customize the icon that represents the collapsed mobile menu for a more tailored design experience.
  
• Breakpoint: Define the screen size at which the mobile menu activates. Available options include:
  

• All: Displays the mobile menu on all devices.
• Mobile Portrait: Activates the mobile menu only on portrait-mode mobile screens.
• Tablet Portrait: Triggers the mobile layout on tablets in portrait mode.

These settings ensure your navigation remains accessible, responsive, and visually consistent across all device types.

Style Settings

There will be additional customization options available in the style settings –  including Desktop Main Menu, Desktop Submenu Items, Submenu Indicator, Mobile Menu, Hamburger Icon, Mobile Menu Close, and Mobile Menu Back.

Desktop Main Menu

The Desktop Main Menu Settings section allows you to customize how the navigation menu behaves and appears on desktop devices. Here’s a breakdown of the available options:

Gap: Adjust the space between the menu items for a cleaner, more organized layout.

Border Type: Choose from various border styles for your menu items. The available options include:

• None: No border is applied.
• Solid: A continuous, solid border line.
• Double: A double-line border for a more pronounced appearance.
• Dotted: A dotted border for a unique look.
• Dashed: A dashed border style.
• Groove: A 3D, grooved border effect.

Padding: Customize the internal spacing around each menu item (top, bottom, left, and right) to ensure proper alignment and spacing.

Border Radius: Adjust the roundness of the corners of each menu item for a more refined, rounded appearance.

Animation Styles (Normal, Hover, Active): Customize the behavior of menu items in different states (normal, hover, and active):

• Text Color: Choose the color of the text for each state (normal, hover, and active).
  
• Background Type: Define the background style (color or gradient) for each state (normal, hover, and active).

Desktop Submenu Item

The Desktop Submenu Item Settings section allows you to customize the appearance and behavior of the submenu items in the navigation menu on desktop devices. Here’s a breakdown of the available options: 

Width
Set a custom width for the submenu container to ensure consistent alignment and spacing within your layout.

Background Type
Choose a background style for the submenu wrapper. Options include solid colors or gradients to enhance visual hierarchy and design consistency.

Border Type
Select a border style for the submenu wrapper from the following options:

• None – No border is applied.
• Solid – A single, continuous border line.
• Double – Two parallel border lines for a more pronounced appearance.
• Dotted – A dotted-line border.
• Dashed – A dashed-line border.
• Groove – A 3D grooved border effect.

Wrapper Padding
Adjust the internal spacing around the entire submenu wrapper for better content alignment and spacing.

Wrapper Border Radius
Set the border-radius of the submenu wrapper to control the curvature of the wrapper’s corners.

Submenu Item Settings:

Border Type
Choose a border style specifically for individual submenu items. Available options include:

• None
• Solid
• Double
• Dotted
• Dashed
• Groove

Item Padding
Define the internal spacing for each submenu item to ensure proper alignment and readability.

Item Border Radius
Adjust the curvature of submenu item corners for a polished and modern appearance.

Animation Styles

(Normal, Hover, Active): Customize the visual behavior of submenu items in different interaction states:

• Text Color: Set the font color for normal, hover, and active states.
• Background Type: Define the background style (solid color or gradient) for each state to enhance interactivity and user feedback.

These settings provide full control over submenu styling, allowing for a responsive, elegant, and consistent desktop navigation experience.

Submenu Indicator

The Submenu Indicator settings allow you to customize the visual indicator (such as an arrow) that appears next to menu items with submenus.

Available Options:

• Font Size: Adjust the size of the submenu indicator icon to match your menu’s design.
• Margin: Define the spacing around the indicator to ensure proper alignment and spacing within the menu layout.

These settings help maintain a clear and user-friendly navigation structure.

Mobile Menu

The Mobile Menu settings let you customize how the navigation menu looks and behaves on mobile devices. In the Position section, you can adjust layout and style for a seamless mobile experience.

Position settings let you customize the layout and appearance of the navigation menu on mobile devices, ensuring a smooth and responsive user experience.

Width
Define the width of the mobile menu panel to control how much of the screen it occupies when expanded.

Background Type
Choose a background style for the mobile menu, such as a solid color or gradient, to align with your site’s visual theme.

Typography
Customize the font family, size, weight, and style for mobile menu items to ensure readability and design consistency.

Border Type
Select the border style for the mobile menu container from the following options:

• None
• Solid
• Double
• Dotted
• Dashed
• Groove

Padding
Adjust the internal spacing of the mobile menu container to ensure a clean and well-structured layout.

Animation Styles

(Normal, Hover): Customize the appearance of mobile menu items in different interaction states:

• Text Color: Set the font color for both normal and hover states.
• Background Type: Define the background style (solid or gradient) for both normal and hover interactions.

These settings allow you to create a responsive, user-friendly, and visually appealing navigation experience across all mobile devices.

Hamburger

The Hamburger settings allow you to customize the appearance of the hamburger menu icon on mobile devices, ensuring it aligns with your site’s design.

Available Options:

• Font Size: Adjust the size of the hamburger icon for better visibility and design consistency.
• Border Type: Choose from various border styles (None, Solid, Double, Dotted, Dashed, Groove) to define the icon’s border appearance.
• Border Radius: Set the curvature of the icon’s corners for a rounded or sharp look.
• Padding: Control the internal spacing around the icon for proper alignment.
• Color: Define the color of the hamburger icon to match your brand.
• Background Type: Choose a solid color or gradient background for the icon.

These settings provide full control over the hamburger icon’s design, contributing to a cohesive and user-friendly mobile navigation experience.

Mobile Menu Close

The Mobile Menu Close settings allow you to customize the appearance and interaction of the close icon within the mobile navigation menu, enhancing both functionality and visual consistency.

Available Options:

• Font Size: Adjust the size of the close icon for optimal visibility.
• Border Type: Select from various border styles (None, Solid, Double, Dotted, Dashed, Groove) to style the icon’s border.
• Padding: Define the internal spacing around the icon for balanced alignment.
• Margin: Set the external spacing to control the icon’s position within the menu.

Animation Styles (Normal, Hover):

• Color: Choose the icon color for both normal and hover states.
• Background Type: Set a solid or gradient background for the icon in normal and hover states.

These settings ensure that the mobile menu close icon is both visually appealing and intuitive for users.

Mobile Menu Back

The Mobile Menu Back settings allow you to customize the appearance of the back navigation icon within the mobile menu, enhancing usability and visual consistency.

Available Options:

• Icon: Choose a custom icon to represent the back navigation action.
• Typography: Adjust the font properties if the back button includes text, such as font family, size, weight, and style.
• Padding: Define the internal spacing around the back icon or text for proper alignment.
• Color: Set the color of the icon and/or text to match your design.
• Background Type: Apply a solid color or gradient background to the back button element.

These settings ensure the back navigation control is intuitive, accessible, and visually aligned with the overall mobile menu design.

Advanced Settings

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Before setting up the Animated Off-Canvas Widget, make sure that the Animation Addons for Elementor plugin is installed and activated on your site. This widget is available as a paid feature. Once activated, you can explore both free and pro widgets by filtering the selection options.

Introduction

The Animated Off-Canvas Widget is a premium feature in Animation Addons for Elementor that lets you create sleek, animated off-canvas menus and panels for enhanced user engagement.

Key Use Cases for the Animated Off-Canvas Widget

The Animated Off-Canvas Widget in Elementor is perfect for:

• Mobile Menus – Create stylish, animated off-canvas menus for a better mobile user experience.
• Sidebar Content – Display additional content or widgets in an off-canvas panel for a cleaner layout.
• Navigation Enhancement – Improve website navigation with smooth slide-in animations.
• Hidden Panels – Use for hidden content that can be revealed on demand, providing a neat design.
• Interactive Design – Engage users with smooth and customizable animations on your website.

With the Animated Off-Canvas Widget, you can easily create interactive off-canvas panels with customizable animations, improving user experience and site design.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Animated Off-Canvas Widget ?

How to Activate the Animated Off-Canvas Widget?

1. Go to Animation Addons → Elements in your WordPress dashboard.
2. Locate the Animated Off-Canvas Widget in the list.
3. Toggle it on to enable the widget.

Now, the Animated Off-Canvas Widget is ready to use!

How to Add Animated Off-Canvas Widget in Elementor

1. Open the page where you want to add the Site Logo.
2. Launch the Elementor editor.
3. In the Elementor panel, search for “Site Logo.”
4. Drag the Animated Off-Canvas widget to your desired section.
5. The Animated Off-Canvas widget will now be available for customization.

You can upload your logo, adjust its size, alignment, and link it to the homepage as needed.

How to Configure the Animated Off-Canvas Widget

Enable the widget from Animation Addons → Elements, create a new page, set a title, choose the Elementor Full Width template, and publish. Adjust page settings as needed.

• In the Elementor panel, search for the “Animated Off-Canvas Widget.”
• Drag and drop the widget into your desired section.
• Customize the off-canvas content, animation style, position, and trigger options using the available settings to match your design needs.

Your Animated Off Canvas Widget is now ready to showcase your brand professionally across your site!

Configuring Animated Off-Canvas Widget : A Step-by-Step Guide

Once the Animated Off-Canvas Widget is added to your page, you can configure its settings under different tabs: Content, Style and Advanced.

Content Settings

There are two options available: Settings and Content.

Settings 

The Animated Off-Canvas widget provides customization options to adjust the behavior and appearance of the off-canvas menu, ensuring a tailored user experience.

Available Options:

• Open Button Text: Customize the text displayed on the button that triggers the opening of the off-canvas menu.
  
• Enable Icon Toggle Button: Activate or deactivate the icon toggle button, which allows users to open and close the off-canvas menu.
  
• Default Close Icon Toggle Button: Choose the default icon for the close button, allowing users to close the off-canvas menu with a single click.

These settings provide full control over the off-canvas menu’s interactive elements, offering a seamless and user-friendly navigation experience.

Content

The Content section of the Animated Off-Canvas widget allows you to further customize the content and functionality of the off-canvas menu, enhancing its interactivity and user experience

Available Options:

• Show Loop or Image Toggle Button: Enable or disable the toggle button for displaying a looping animation or image within the off-canvas menu.
  
• Add Logo or Image: Upload and display a logo or image within the off-canvas panel to enhance branding and visual appeal.
  
• Menu: Integrate a navigation menu within the off-canvas panel for seamless user navigation.
  
• Contact Information Tab: Add a contact information tab to provide users with quick access to your contact details.
  
• Language Tab: Include a language selection tab to allow users to switch between languages, improving accessibility for global audiences.
  
• Follow Information Tab: Add social media or follow information to engage users and encourage interaction with your brand’s social platforms.

These content customization options provide flexibility in creating a comprehensive and interactive off-canvas menu tailored to your site’s needs.

Style Settings

The Animated Off-Canvas widget offers a wide range of customization tools to help you design dynamic, responsive menus and content panels. Below is a detailed guide to each section and how the settings affect the layout and functionality.

Off-Canvas Settings

These settings control the main container of the off-canvas panel.

• Background Type: Set a solid color, gradient, or image background for the off-canvas panel to match your site’s theme.
• Padding: Add internal spacing within the off-canvas area to maintain a clean and balanced layout.
• Swap Column: Swap the order of left and right columns inside the off-canvas layout to adjust the structure as per design requirements.

Effect: Adjusting these settings changes the visual style and spacing of the entire off-canvas container.

Off-Canvas Left

• Display: Choose between Show or Hide to control the visibility of the left section.
• Width: Define the width of the left panel to control space allocation.
• Background Type: Apply a background (color/gradient/image) to this specific section.
• Padding: Manage internal spacing for content within the left section.
  

Effect: Enables structured layout design by controlling visibility, width, and styling of the left column.

Off-Canvas Right

• Display: Choose between Show or Hide to control the visibility of the right section.
  
• Width: Define the width of the right panel.
  
• Background Type: Customize the right section’s background for visual distinction.
  
• Padding: Adjust inner spacing to improve content layout.

Effect: Helps create dual-column or split-layout designs within the off-canvas panel.

Logo / Image

Width & Height: Define the dimensions of the logo or image added inside the off-canvas panel for better brand placement and scaling across devices.

Menu Settings

• Color: Set the default text color for menu items.
  
• Hover Color: Customize the text color on hover for improved user interaction.
  
• Border Color: Define border colors to enhance visual separation between items.
  
• Typography: Control font size, family, weight, and style for menu items.

• Height Auto: Enable or disable automatic height adjustment for the menu.
  
• Padding: Adjust internal spacing of menu items for a cleaner layout.
  
• Level Two & Three Padding: Customize padding for submenu levels to manage hierarchy and spacing.

Expand Icon (for Submenus)

• Color: Set the icon color for submenu toggles.
  
• Icon Size: Adjust the size of the expand/collapse icon.
  
• Padding Size: Manage the spacing around the icon to align it properly within the menu layout.

Contact

The Contact section within the Animated Off-Canvas widget allows you to display essential contact details in a visually appealing and organized manner. Below are the available customization options:

• Display: Toggle between Show or Hide to control the visibility of the contact section.
  
• Gap: Define the spacing between individual contact items for better layout and readability.
  
• Color: Set the text color for the contact information to match your overall design.
  
• Typography: Customize the font style, size, weight, and line height for the contact text.
  
• Label Color: Set a specific color for labels (e.g., “Phone”, “Email”) to visually differentiate them from the details.
  
• Label Typography: Adjust font properties for labels to enhance clarity and hierarchy.
  
• Margin: Control the outer spacing around the contact section to align it with other content.

These settings help present your contact details in a clean and structured way, ensuring better accessibility and design consistency.

Follow Social Media

The Follow section allows you to display social media icons within the Animated Off-Canvas panel, making it easy for users to connect with your brand across platforms. Below are the available customization options:

• Display: Toggle the visibility of the social media icons by selecting either Show or Hide.
  
• Color: Set the default icon color to match your website’s branding.
  
• Hover Color: Define a different color for the icons when hovered over to enhance interactivity.
  
• Icon Size: Adjust the size of the social media icons for better visibility and alignment.
  
• Margin: Control the spacing around the icons to maintain a clean and balanced layout.

These options ensure your social media links are prominently and professionally displayed within your off-canvas design.

Search

The Search option within the Animated Off-Canvas widget provides a simple and functional search bar for enhanced user navigation. Available customization options include:

• Display: Choose to Show or Hide the search bar within the off-canvas panel.
  

Color: Set the color of the search input text to align with your site’s design.

These settings allow you to integrate a seamless and visually consistent search experience into your off-canvas layout.

Language

The Language option in the Animated Off-Canvas widget lets you add and style language selection elements within the panel. Available settings include:

• Display: Toggle between Show or Hide to control the visibility of the language section.
  
• Color: Set the text color to match your overall design aesthetics.
  
• Typography: Customize font style, size, weight, and spacing for clear and consistent text appearance.

These options help ensure that language selectors are both accessible and visually integrated into your off-canvas layout.

Open Button

The Open Button settings in the Animated Off-Canvas widget allow you to personalize the appearance of the trigger button that opens the off-canvas panel. Available options include:

• Color: Set the text or icon color of the open button to align with your site’s design.
• Typography: Customize the font style, size, and weight for the button text to ensure visual consistency and readability.

These options help create a cohesive and engaging user experience from the very first interaction.

Close Button 

The Close Button settings in the Animated Off-Canvas widget provide control over the appearance and behavior of the panel’s close trigger. Available customization options include:

• Icon Size: Adjust the size of the close icon for better visibility and alignment.
• Circle Size: Set the size of the circular container around the icon (if applicable).
• Border Radius: Define the roundness of the button edges for a softer or sharper look.
• Margin: Manage spacing around the close button for precise positioning.

• Animation Effect: Choose from two animation patterns to define how the button responds on interaction.
• Color: Customize the icon color to match your design.
• Background Type: Select a solid or gradient background to enhance the button’s visual impact.

These settings ensure the close button is both functional and seamlessly integrated into your off-canvas design.

Advanced Settings

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

That’s it! You’ve successfully learned how to configure the Animated Off-Canvas widget in Elementor to create a dynamic and interactive off-canvas design for your website.

For any further assistance or inquiries, feel free to contact our support team!

Before setting up the Image Widget, make sure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll get access to all free widgets, including the Image Widget—completely free! You can also explore both free and pro widgets by using the filter options.

The Image Widget for Elementor offers easy customization, allowing you to adjust image size, alignment, hover effects, and more to create visually engaging and interactive web pages.

Key Use Cases for the Image Widget in Elementor:

• Use the image widget to display product images, create portfolio galleries, or design hero sections and banners.
• Showcase blog post featured images, team members, testimonials, and before-and-after transformations.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Image Widget

• Click on Animation Addons in your WordPress dashboard.
• Find the Image Widget in the list.
• Toggle it on to enable the widget.

Now, the Image Widget is ready to use!

How to Add the Image Widget in Elementor:

• Open the page you want to add the Image widget.
• Launch the Elementor editor.
• In the Elementor panel, search for “Image Widget.”
• Drag and drop the widget to your desired section.

Your Image Widget is now ready to use! Here’s the interface where you can configure the settings and customize the image across various tabs for a personalized effect.

Configuring Image Widget in Animation Addons: A Step-by-Step Guide.

The Image widget is available in Elementor and can be placed on the desired section of the page. It offers three main settings tabs: Content, Style, and Advanced.

In the Content settings of the Image Widget, you’ll find the option to upload your image and the Image Animation feature, available in the editor panel. Note that animations are part of the Pro version.

Content Settings

The Content section lets you choose your preferred image, adjust its resolution, and set the alignment.

Image Animation

After selecting the Image Animation option, you’ll have access to the “Enable on Editor” option, the “Play Animation” button, and the “Data Ease” setting to control the animation’s ease and flow.

Reveal

After enabling these options, the “Enable on Editor” option allows you to preview the animation in the editor, while the “Play Animation” button triggers the animation when clicked. The “Data Ease” setting adjusts the speed and smoothness of the animation, offering a more fluid and dynamic effect.

ScaleIf you choose the “Scale” option for image animation, the image will gradually grow (scale up) or shrink (scale down) based on the animation settings. This creates a dynamic zoom-in or zoom-out effect that draws attention to the image. You can control the speed, direction, and smoothness of the scaling animation using the available options.

By choosing the “Scale” option for image animation, you will have access to several settings:

• Enable/Editor Toggle: Allows you to enable or disable the animation in the editor.
• Play Animation Button: A button to preview the animation effect.
• Start Scale & End Scale: Controls the initial and final scale values of the image, adjusting the zoom-in or zoom-out effect.
• Animation Start: Defines when the animation begins during page load or on interaction.

Stretch

By selecting the “Stretch” animation option for the image, you will get the following two settings:

• Enable/Editor Button: Allows you to enable or disable the animation effect in the editor.
• Play Animation Button: A button to preview the stretch animation effect in action.

These two options give you basic control over the stretch animation for your image

Style Settings

In the Style section, you can customize the image’s dimensions, opacity, and apply CSS filters for effects like blur or brightness. Additionally, you can adjust border types, border radius for rounded corners, and add a box shadow for a 3D effect.

Advanced Settings 

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

That’s it! You’ve now learned how to configure the Image Widget in Elementor to effectively customize and display images on your website.

If you need further assistance, don’t hesitate to reach out to our support team!

Before setting up the Social Icons Widget, make sure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll get access to all free Elementor widgets, including the Social Icons Widget—completely free! You can also explore both free and pro widgets by using the filter options within the widget library.

Introduction

Social Icons in Elementor let you add customizable icons that link to your social media profiles, improving user engagement and connectivity across platforms like Facebook, Twitter, Instagram, and LinkedIn.

Key Use Cases for the Social Icons Widget in Elementor:

• Use the Social Icons widget to link your social media profiles, boosting brand visibility.
• Add icons to footers, headers, or sidebars to encourage followers and sharing.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Social Icons Widget?

1. Go to Animation Addons → Elements in your WordPress dashboard.
2. Find the Social Icons Widget in the list.
3. Toggle it on to enable the widget.
   

Now, the Social Icons Widget is ready to use!

How to Add the Social Icons Widget in Elementor?

• Open the page where you want to add the Social Icons Widget.
• Launch the Elementor editor.
  In the Elementor panel, search for “Social Icons Widget.”
• Drag the widget to your desired section.

The Social Icons Widget is now ready for customization!

How to Configure the Social Icons Widget in Animation Addons:

• In the Elementor panel, search for the “Social Icons Widget.
• Drag and drop the widget into your desired section.
• Customize the icon settings using the available options in the Elementor panel—such as icon style, link, layout, and alignment.

Your Social Icons Widget is now ready to use! Use the configuration interface to personalize your social links with different styling options and make them stand out on your website.

Configuring Social Icons Widget in Animation Addons: A Step-by-Step Guide.

The Social Icons Widget is available in Elementor and can be placed in any section of your page. It includes three main settings tabs: Content, Style, and Advanced—each offering customization options to personalize your social icons display, including icon styles, size, alignment, and link settings.

Content Settings

In the Content section, you can add and manage the main text, paragraphs, and other content types for your page.

In the Social Icons widget, you can configure sections for platforms such as Facebook, Twitter, and YouTube.

• You can either select icons from the built-in library or upload your custom icons.

• Additionally, you can adjust the icon color, set a background color, and add the corresponding links for each social media platform. 

This customization allows you to tailor the social icons to match your site’s design and ensure seamless connectivity to your social profiles.

Alignment and Direction

• In the Social Icons widget, you can adjust the alignment (left, center, right) and set the direction (horizontal or vertical) of the icons to fit your design. 
• These options help integrate the icons smoothly into your website layout.

Style Settings

The Style section includes two sections: Icon and Icon Hover.

In the Style section of the Social Icons widget, you can customize the following icon settings:

Icon

• Icon Color: Set the color of the icon.
• Icon Background Color: Choose a background color for the icon.
• Icon Size: Adjust the size of the icon.
• Icon Padding: Control the padding around the icon.
• Icon Spacing: Set the spacing between multiple icons.
• Icon Border Type: Select the border style for the icon.
• Border Radius: Adjust the roundness of the icon’s corners.

These settings allow you to style the icons to match your site’s design and branding.

Icon Hover

In the Icon Hover section, you can customize the following settings:

• Hover Color: Change the icon color when the user hovers over it.
• Hover Background Color: Set a different background color when the icon is hovered.
• Hover Animation: Choose an animation effect (such as fade, zoom, or bounce) that activates when the user hovers over the icon.

These options enhance the interactivity of the social icons, providing a dynamic experience for users.

Advanced Settings 

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

That’s it! You’ve now learned how to configure the Social Icons Widget in Elementor to effectively customize and display images on your website.

Before setting up the Image Box Slider Widget, ensure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll get access to all free Elementor widgets, including the Image Box Slider Widget—completely free! You can also filter between free and pro widgets for easier access.

Introduction

The Image Box Slider Widget displays multiple image boxes in a smooth slider, ideal for showcasing features or visual content.

Key Use Cases for the Image Box Slider Widget in Elementor:

• Showcase multiple image boxes in a sleek, scrollable slider layout.
• Enhance visual storytelling with images, titles, and descriptions in a compact format.
• Customize styling and animation to match your website’s design and improve user engagement.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Image Box Slider Widget?

1. Navigate to Animation Addons → Elements in your WordPress dashboard.
2. Locate the Image Box Slider widget in the list.
3. Toggle the switch to enable the widget.
4. The Image Box Slider Widget is now ready to use in your Elementor editor.

How to Add Image Box Slider Widget in Elementor

• Open the page where you want to add the Image Box Slider Widget.
• Launch the Elementor editor.
• In the Elementor panel, search for “Image Box Slider Widget”.
• Drag and drop the widget into your desired section.
• The Image Box Slider Widget is now ready for customization.

How to Configure Image Box Slider Widget

Enable the widget, create a new page, set a title, choose the Elementor Full Width template, and publish the page.

• Adjust page settings as needed.
• In the Elementor panel, search for “Image Box Slider Widget.”
• Drag and drop the widget into your desired section.
• The slider will display image boxes automatically. You can then customize the content, layout, navigation, and styling to match your design preferences.

Configuring Archive Image Box Slider Widget  : A Step-by-Step Guide

Once the Image Box Slider Widget is added to your page, you can configure its settings under different tabs: Content, Style and Advanced.

Content Settings

In the Image Box Slider Widget’s content section, You will get two options like layout and slider option.

Layout

1. Layout Styles (Five Different Styles)

The Image Box Slider offers five layout styles for flexible and dynamic presentation of images and text.

• Style 1: A basic image box slider with an image, title, subtitle, description, and link.
• Style 2: Features an image with a more prominent title and description with a link.
• Style 3: Focuses on image-centric presentation with minimal text.
• Style 4: Includes an image and an icon next to the text elements for added emphasis.
• Style 5: Allows for a more compact design where elements are stacked for better readability on mobile devices.

Item 1: Configuration Options: In Item 1, users can customize the following settings:

• Image Setup: Upload and position an image to be displayed in the slider.
• Title: Set a title for the item. The title can be customized with an HTML tag (e.g., <h1>, <h2>, etc.) to define its importance.
• Subtitle: A secondary title or description that provides additional context.
  • Subtitle Position: You can control whether the subtitle appears above, below, or beside the image.
• Description: A brief description that provides more details about the image.
• Link: Add a clickable link to each item in the slider that directs users to more information or a different page.
• Each layout is fully responsive and can be adjusted for various screen sizes to ensure optimal display across all devices.

2. Image Resolution (Seven Different Styles)

The Image Box Slider widget supports seven different image resolution styles. These options enable you to adjust the image quality based on the visual needs and load time requirements of your website:

• Resolution Options:
  
  1. Low resolution
  2. Medium-low resolution
  3. Medium resolution
  4. High resolution
  5. Very high resolution
  6. Ultra-high resolution &
  7. Custom resolution (user-defined)

These options ensure that images load quickly without compromising too much on quality, thus improving both the user experience and SEO performance.

3. Direction

The direction setting controls the flow of the slider. You can choose from:

• Horizontal: The slider moves left to right or right to left.
• Vertical: The slider moves from top to bottom or bottom to top.

The direction setting allows for the creation of dynamic visual effects tailored to the website’s design and user interaction goals.

4. Gap

This option controls the space between the image boxes in the slider. You can set the gap to:

• Small
  Medium
• Large

Adjusting the gap helps maintain a clean and balanced layout, enhancing the visual flow and user engagement.

5. Link Type

The Link Type setting defines how the link behaves when clicked:

• External URL: Opens an external website or page in a new tab.
• Internal Link: Links to another page or section within the same website.
• No Link: The item does not have a clickable link, providing a purely visual effect.

This flexibility allows users to choose whether they want their image box slider to drive traffic externally or simply enhance user interaction within the site.

6. Alignment

This option allows for precise control over how the text and images are aligned within each image box:

• Left Alignment: Text and elements are aligned to the left side of the box.
• Center Alignment: Text and elements are centered within the box.
• Right Alignment: Text and elements are aligned to the right side of the box.

Alignment ensures that content is placed in the desired manner, creating a polished and professional look.

7. Icon

The Icon option lets you add pre-designed or custom icons to enhance the design and highlight features in the slider.

Slider Option

Below is a detailed explanation of each option, covering how they look, function, and the effects of changing their settings-

1. Sliders to Show

This setting defines how many image boxes are visible at a time in the slider. You can specify the number of slides shown in the viewport. This helps tailor the layout to fit different screen sizes or content needs.

• Effect: Adjusting this number will determine how many image boxes are visible on-screen, allowing for a customized display of content.

1. Autoplay

When enabled, the slider will automatically move through the images after a defined delay. It’s ideal for creating an automated slideshow experience.

• Effect: When activated, images will transition automatically without user interaction, offering a more hands-off display.
• Change: Turning this on makes the slider self-running, providing a seamless experience for viewers.

3. Autoplay Delay

This option allows you to set the time delay (in milliseconds) between each slide transition during autoplay.

• Effect: You can control the speed of the slider’s movement by adjusting the delay between images.
• Change: Increasing the delay results in slower transitions; decreasing it makes the transition faster.

4. Autoplay Interaction

This setting determines whether the autoplay feature is paused when the user interacts with the slider (mouse hover or touch).

• Effect: When enabled, autoplay will pause if a user interacts with the slider, ensuring they can engage with the content without interruption.
• Change: If disabled, autoplay will continue regardless of user interaction.

5. Allow Touch Move

This feature enables touch swipe functionality on mobile devices. Users can swipe left or right to navigate between slides.

• Effect: On touch-enabled devices, users can swipe through slides, providing a mobile-friendly, interactive experience.
• Change: Enabling this feature allows for more intuitive navigation on mobile devices.

6. Loop

When activated, the slider will loop back to the first slide after reaching the last one, creating a continuous cycling effect.

• Effect: The slider will start from the first slide once it reaches the last, creating an endless loop of content.
• Change: Disabling this feature will stop the slider once it reaches the last slide.

7. Mousewheel

This option allows users to navigate through the slides using the mouse wheel.

• Effect: Scrolling the mouse wheel up or down will move the slider between slides.
• Change: Enabling this feature adds another method of navigation, enhancing usability.

8. Animation Speed

This setting controls how quickly the transition between slides occurs. You can set the speed of the animation in milliseconds.

• Effect: A faster animation speed makes transitions quicker, while a slower speed provides smoother, more gradual changes between slides.
• Change: Adjusting the animation speed alters the visual flow of the slider.

9. Space Between

This option sets the amount of space between each slide in the slider.

• Effect: Increasing the space between slides will create a more separated layout, while reducing the space will bring the slides closer together.
• Change: Adjusting this space affects the visual density of the slider and can be used to create more compact or spacious designs.

10. Navigation

This feature allows for customizable navigation controls (previous and next arrows) to move through the slides.

• Effect: Navigation arrows appear on either side of the slider, providing users with the ability to manually control the slider.
• Change: Enabling navigation arrows adds interactivity, while disabling them makes the slider auto-play or swipe-based only.

11. Previous Arrow Icon

This option lets you choose or upload a custom icon for the previous slide navigation arrow.

• Effect: The arrow icon will appear on the left side of the slider to move to the previous slide.
• Change: Customizing the icon allows for design consistency with the website’s theme.

12. Next Arrow Icon

Similar to the previous arrow, this option lets you choose or upload a custom icon for the next slide navigation arrow.

• Effect: The arrow icon will appear on the right side of the slider to move to the next slide.
• Change: Customizing the icon provides a more personalized look for navigation.

13. Pagination

Pagination enables users to see an indicator of the number of slides and navigate directly to a specific slide via clickable dots or other indicators.

• Effect: When enabled, small indicators will appear, showing the user’s position within the slider and allowing them to click to navigate to a particular slide.
• Change: Disabling pagination removes the visual guide, making it harder for users to track slide positions.

14. Pagination Type

You can select between different types of pagination, such as dots, numbers, or custom indicators.

• Effect: The type of pagination selected changes the appearance of the indicators (e.g., dots, numbers, or other shapes).
• Change: Choosing different types of pagination gives you flexibility in design and user navigation.

15. Left/Right Direction

This setting allows you to define the direction in which the slider moves when manually controlled by the user.

• Effect: You can choose whether the navigation will move the slides from left to right or vice versa.
• Change: Changing the direction affects how users interact with the slider and how content flows visually.

16. Direction

This option lets you define the general direction of the slider’s movement—either horizontal or vertical.

• Effect: Horizontal direction moves the slides left to right (or right to left), while vertical direction moves slides up or down.
• Change: Changing the direction alters the overall layout and interaction style of the slider.

17. Centre Slide

When enabled, this option ensures that the active slide is always centered in the viewport.

• Effect: The active slide is always visually in focus and centered, drawing attention to it.
• Change: Disabling this feature can create a more casual, less structured display of slides.

18. Effect

This setting allows you to choose the animation effect applied to the slides during transitions. Common options include fade, slide, or flip.

• Effect: The transition effect adds dynamic movement to the slider, making the changes between slides visually engaging.
• Change: Selecting different effects can change the overall feel of the slider, from smooth fades to more interactive movements.

Style Settings

In the Style section, you’ll find five customizable areas: Image Box, Image, Content, Slider Navigation, and Slider Pagination. Each section allows for detailed styling to match your design preferences and website branding.

Image Box

The Image Box section allows you to customize the container that holds the image and content. Available settings include:

• Height: Set the height of the image box for consistent layout control.
• Max Width: Define the maximum width to ensure responsiveness across devices.
• Padding: Adjust the inner spacing between the content and the box edge.

• Border Type: Choose from solid, dashed, dotted, or none to define the box’s border style.
• Border Radius: Apply rounded corners to soften the edges of the image box.
• Hover Effect: Add interactive visual effects when the user hovers over the box.
• Border Type (Hover): Customize the border style specifically for hover state, enhancing interactivity.

These options provide full control over the visual appearance and interactivity of the image box container.

Image

The Image Box section allows you to customize the container that holds the image and content. Available settings include:

• Height: Set the height of the image box for consistent layout control.
• Max Width: Define the maximum width to ensure responsiveness across devices.
• Padding: Adjust the inner spacing between the content and the box edge.

• Border Type: Choose from solid, dashed, dotted, or none to define the box’s border style.
• Border Radius: Apply rounded corners to soften the edges of the image box.
• Hover Effect: Add interactive visual effects when the user hovers over the box.
• Border Type (Hover): Customize the border style specifically for hover state, enhancing interactivity.

These options provide full control over the visual appearance and interactivity of the image box container.

Content

The Content Section offers full customization of text and visuals within the image box, including options for background, spacing, typography, and color- 

1. Background Type

This setting determines the background style for the content section. You can select from solid colors, gradients, or images as the background.

• Effect: The background adds a visual foundation to the content, enhancing its contrast with the image box.
• Change: Selecting a gradient or image will introduce a more dynamic background compared to a solid color.

2. Padding

This controls the space around the content inside the box, ensuring that text and other elements are well-separated from the edges of the content section.

• Effect: Adjusting padding creates more space around the content, improving readability and appearance.
• Change: Increasing padding will make the content box larger, while reducing it brings the content closer to the edges.

. Title Spacing

This setting adjusts the space between the title and the elements surrounding it, such as the image or subtitle.

• Effect: Title spacing ensures the title is properly separated from other elements, providing a balanced look.
• Change: Increasing the spacing allows the title to stand out more, while decreasing it brings the title closer to adjacent content.

4. Title Color

This option allows you to set the color for the title text, making it stand out against the background and other content.

• Effect: The title color helps draw attention to the heading, influencing its visual hierarchy on the page.
• Change: Choosing a contrasting color ensures the title remains visible, even with complex backgrounds.

5. Title Typography

This setting controls the font style, weight, size, and other typographic properties of the title text.

• Effect: Typography settings help define the font style and size, enhancing the title’s readability and impact.
• Change: Adjusting the font weight and style can make the title more prominent or subtle, depending on the design requirements.

6. Subtitle Spacing

This setting defines the space between the subtitle and surrounding elements, ensuring a clear separation and readability.

• Effect: Subtitle spacing adds balance and harmony between the subtitle and the title or description.
• Change: Increasing the spacing makes the subtitle more distinct from the title, while reducing it brings the elements closer together.

7. Subtitle Color

This option allows you to change the color of the subtitle text, complementing the title and aligning with your overall color scheme.

• Effect: Subtitle color helps differentiate it from the title while maintaining visual consistency with the design.
  Change: Using a softer or lighter color can create a more subtle contrast with the title.

8. Subtitle Typography

Here, you can customize the font, size, weight, and style of the subtitle text.

• Effect: This ensures the subtitle matches the design and hierarchy of the title, offering consistency across the content.
• Change: You can adjust the subtitle’s appearance for emphasis or to create visual hierarchy between the title and description.

9. Description Spacing

This controls the space between the subtitle and the description, ensuring proper separation for readability.

• Effect: Description spacing prevents text from appearing too cluttered, making the content more digestible.
• Change: Increasing the spacing improves readability, while reducing it can create a more compact layout.

10. Description Color

This setting allows you to modify the color of the description text to enhance readability and design harmony.

• Effect: The description color influences the visual contrast and legibility against the background.
• Change: Choosing a darker or lighter color ensures optimal readability depending on the background type.

11. Description Typography

Here, you can customize the font family, weight, size, and other typographic properties for the description text.

• Effect: Typography settings ensure the description is easy to read and visually aligned with the title and subtitle.
• Change: Adjusting the typography makes the description text fit better within the overall design of the slider.

12. Icon Spacing

This setting defines the space around the icon, ensuring that it is well-separated from the text and other elements in the image box.

• Effect: Icon spacing ensures that the icon doesn’t appear too close to the content, maintaining a balanced look.
• Change: Increasing the icon spacing can create a cleaner, more spacious design, while reducing it allows for a more compact layout.

13. Icon Color

Here, you can customize the color of the icon to match the content design, making sure it aligns with the overall aesthetic.

• Effect: The icon color affects its visibility and integration with the content section’s style.
• Change: A contrasting icon color helps the icon stand out, while a muted color blends it with the design.

14. Icon Size

This option allows you to adjust the size of the icon, ensuring it is proportional to the content.

• Effect: Icon size determines how prominent or subtle the icon will be within the design.
• Change: Increasing the size makes the icon more noticeable, while decreasing it can give a more minimalist appearance.

15. Icon Rotate

This feature allows you to rotate the icon, providing an interactive and dynamic effect.

• Effect: Rotating the icon can add a unique visual effect or animation to the image box.
• Change: You can rotate the icon slightly for a subtle effect or rotate it dramatically for more visual interest.

Slider Navigation

The Slider Navigation section allows you to fully customize the navigation controls for the image box slider, offering various visual and interactive settings. Below is a breakdown of each option:

1. Size

This setting controls the overall size of the navigation elements (e.g., arrows or dots) within the slider.

• Effect: Adjusting the size changes how large or small the navigation controls appear.
• Change: Increasing the size makes the controls more prominent, while decreasing them results in a more minimalist appearance.

2. Circle Size

If circular navigation elements (such as dots) are used, this option allows you to control their diameter.

• Effect: Adjusting the circle size changes the visual prominence of the navigation dots.
• Change: Larger circles make the navigation more noticeable, while smaller ones offer a subtler look.

3. Border Type

This option defines the style of the border around the navigation elements. You can choose from solid, dashed, dotted, or no border.

• Effect: The border type adds definition to the navigation controls.
• Change: A solid border offers a clean look, while dashed or dotted borders introduce a more dynamic, creative style.

4. Border Radius

This controls the roundness of the corners for the navigation elements, including arrows or dots.

• Effect: Border radius softens the edges of the navigation elements, creating a more rounded or square look.
• Change: A higher radius makes the elements more rounded, while a lower value creates sharper edges.

5. Padding

Padding adjusts the space inside the navigation elements, ensuring proper spacing between the content (such as arrows) and the element border.

• Effect: Adjusting padding affects the inner spacing within the navigation element.
• Change: Increasing the padding creates more breathing room for the content inside, while decreasing it tightens the layout.

6. Animation (Normal & Hover)

This option defines the animation effects applied to the navigation elements during normal interaction and when the user hovers over them.

• Effect: Normal animation applies to the default state of the navigation, while hover animation activates when the user hovers over the element.
• Change: You can set different animations (e.g., fading, sliding) for both states, enhancing interactivity and visual appeal.

7. Color

This option controls the color of the navigation elements, including arrows or dots.

• Effect: Color settings define the visual contrast of the navigation against the background.
• Change: Adjusting the color can help the navigation blend or stand out, depending on your design preferences.

8. Background Type

This setting determines the background style for the navigation elements, which can include a solid color, gradient, or image.

• Effect: Background type adds visual depth to the navigation controls, making them either blend in or stand out.
• Change: A gradient or image background adds more design variation, while a solid color provides a cleaner, simpler look.

9. Position Type

Position type controls where the navigation elements are placed within the slider container. You can position them relative to the container or set fixed positioning.

• Effect: This affects where the navigation appears (e.g., top, bottom, left, or right) within the slider.
• Change: Adjusting the position allows for flexible placement of navigation controls based on the layout needs.

10. Alignment

This option controls the alignment of the navigation elements within their designated area, such as left, center, or right alignment.

• Effect: Alignment determines where the navigation elements are positioned within their container.
• Change: Left or right alignment places the controls at the edges, while center alignment brings them to the middle of the container.

11. Gap

Gap adjusts the space between multiple navigation elements, such as arrows or dots.

• Effect: Gap helps space out the navigation elements evenly.
• Change: Increasing the gap creates more space between the elements, while reducing it places them closer together.

Slider Pagination

The Slider Pagination section allows customization of pagination controls (dots or numbers) for slider navigation. Here’s a quick overview of each option:

1. Color: This setting controls the color of the pagination elements, such as the active and inactive dots or numbers.

• Effect: The color option affects the visibility and aesthetic of the pagination elements.
• Change: Adjusting the color ensures that the pagination elements contrast with the background for better visibility.

2. Active Color: This option sets the color of the active pagination element (the dot or number that represents the current slide).

• Effect: The active color highlights the current slide’s pagination element, indicating the user’s position in the slider.
• Change: A bright or distinct active color makes it easier for users to identify which slide is currently being viewed.

3. Size: This option controls the size of the pagination elements, such as dots or numbers.

• Effect: The size adjustment alters how large or small the pagination elements appear on the page.
• Change: Increasing the size makes the pagination elements more prominent, while decreasing the size results in a more subtle look.

4. Gap: Gap defines the space between each pagination element, such as dots or numbers.

• Effect: Gap controls how spaced out the pagination elements are, providing a more visually appealing layout.
• Change: Increasing the gap separates the pagination elements more, while decreasing it brings them closer together.

5. Border Type: This option sets the style of the border around the pagination elements. You can choose from solid, dashed, dotted, or none.

• Effect: Border type adds a clear definition to the pagination elements.
• Change: A solid border offers a clean and clear look, while dashed or dotted borders can add a more dynamic or playful design.

6. Border Radius: This setting controls the roundness of the corners for the pagination elements.

• Effect: Border radius softens the corners, giving the pagination elements a more rounded or squared appearance.
• Change: A higher radius makes the elements more circular, while a lower value keeps them sharp and angular.

7. Direction: Direction controls the orientation of the pagination elements, whether they are displayed horizontally or vertically.

• Effect: The direction setting determines whether the pagination controls are placed in a row (horizontal) or a column (vertical).
• Change: Horizontal pagination is commonly used for a sleek, linear design, while vertical pagination is often used for unique, dynamic layouts.

8. Position: This option sets the position of the pagination elements within the slider container, allowing you to place them at the top, bottom, left, or right.

• Effect: Position defines where the pagination will appear relative to the slider content.
• Change: You can adjust the position based on the desired layout, whether you want the pagination at the top, bottom, or on the sides.

9. Alignment: Alignment controls the alignment of the pagination elements within their container, allowing you to position them to the left, center, or right.

• Effect: Alignment ensures the pagination is placed in a specific position within the slider, either to the left, center, or right.
• Change: Left or right alignment positions the pagination at the edges, while center alignment places it at the middle of the container.

Advanced Settings

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

That’s it! You’ve successfully learned how to configure the Image Box Slider Widget in Elementor to create dynamic and visually appealing image sliders with customizable titles, descriptions, and links.

For any further assistance or inquiries, feel free to contact our support team!

Before setting up the Text Hover Image widget, make sure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll get access to all free Elementor widgets, including the Text Hover Image widget—completely free! You can also explore both free and pro widgets by using the filter options.

Introduction

The Text Hover Image feature displays an image on text hover, enhancing engagement and customization. The Text Hover Image feature displays an image when users hover over text, enhancing interactivity. 

Key Use Cases for the Social Icons Widget in Elementor:

• Use the Text Hover Image widget to showcase product previews and portfolio items interactively.
• Add hover effects to display additional information without cluttering the page.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Text Hover Image Widget?

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Text Hover Image Widget in the list.
• Toggle it on to enable the widget.

Now, the Text Hover Image Widget is ready to use!

How to Add the Text Hover Image Widget in Elementor:

• Open the page where you want to add the Text Hover Image widget.
• Launch the Elementor editor.
• In the Elementor panel, search for “Text Hover Image Widget.”
• Drag the widget to your desired section.

The Text Hover Image widget is now ready for customization!

How to Configure the Text Hover Image Widget in Animation Addons:

• In the Elementor panel, search for the “Text Hover Image Widget.”
• Drag and drop the widget into your desired section.
• Customize the image and text settings using the available options in the Elementor panel.

Your Text Hover Image widget is now ready to use! You can personalize the settings to achieve the desired hover effect and style.

Configuring Text Hover Image Widget in Animation Addons: A Step-by-Step Guide

The Text Hover Image Widget is available in Elementor and can be placed in any section of your page. It includes three main settings tabs: Content, Style, and Advanced—each offering customization options to fine-tune your image and hover effects.

In the Text Hover Image widget, you will only find one section under the Content tab.

Content Settings

In the Content section of the Text Hover Image widget, you will find the following options:

Content

• Before Hover Text: Set the text displayed before the hover effect.
• Hover Text: Define the text that appears when the user hovers over the element.
• After Hover Text: Specify the text displayed after the hover action.

• Hover Image: Upload the image that will appear on hover.
• HTML Tag: Choose the appropriate HTML tag for the text (e.g., <h1>, <p>, <span>).
• Link: Add a URL for the text or image to link to.

Alignment: Control the alignment of the text and image (left, center, right).

These options allow you to customize the hover effect and ensure smooth integration with your site’s design.

Style Settings

The Style section is divided into two parts: Style and Image. Let’s explore how to work with and customize these settings.

Style

In the Style section of the Text Hover Image widget, you can customize the following settings:

• Text Color: Set the color of the text before hover.
• Hover Color: Define the text color when the element is hovered.
• Typography: Adjust font family, size, weight, and other typography settings for the text.
• Text Stroke: Apply a stroke (outline) around the text for emphasis.
• Text Shadow: Add a shadow effect to the text for depth and visual appeal.
• Blend Mode: Control how the text and background interact visually with blend mode options.
• Hover Text: Customize the appearance of the text during the hover effect.
• Hover Text Color: Set the text color specifically when the hover effect is active.

These options provide flexibility in styling the text and hover effects to ensure seamless integration with the website’s overall design.

Image

In the Image section of the Text Hover Image widget, you can customize the image’s width and height to fit your design. 

The Position Top and Position Left settings allow you to adjust the image’s vertical and horizontal placement, ensuring precise control over its positioning during the hover effect. 

These options help integrate the image seamlessly into your layout.

Advanced Settings 

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

That’s it! You’ve now learned how to configure the Text Hover Image widget in Elementor to effectively customize and display interactive images on your website.

If you need further assistance, feel free to reach out to our support team!

The Image Box Widget in Animation Addons for Elementor is a completely free feature. To use this widget, simply ensure that the plugin is installed and activated on your site. You can enjoy the full functionality of the Image Box widget without any additional cost, as it is available in the free version.

Introduction

The Image Box widget combines images and text, offering customizable size, alignment, spacing, overlays, hover effects, and animations for an interactive design.

Key Use Cases for the Image Box Widget in Elementor:

• Highlight features
• Showcase services
• Display testimonials, portfolios, pricing plans, and call-to-action sections
• Enhance blog previews, promote events, and visually present key information with text and images

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Image Box Widget:

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Image Box Widget in the list.
• Toggle it on to enable the widget.
• Now, the Image Box Widget is ready to use!

How to Add the Image Box Widget in Elementor:

• Open the page where you want to add the Image Box Widget.
• Launch the Elementor editor.
• Search for “Image Box Widget.”
• Drag the widget to your desired section.

How to Configure the Image Box Widget in Animation Addons?

• In the Elementor panel, search for the “Image Box Widget.”
• Drag and drop the widget into the desired section.
• Customize the widget settings using the available options in the Elementor panel. 

Your Image Box Widget is now ready to use! Here’s the interface where you can configure the settings and customize the Testimonial Widget across various tabs.

Configuring Image Box Widget in Animation Addons: A Step-by-Step GuideThe Image Box Widget can be added anywhere in Elementor, with three main settings: Content, Style, and Advanced.

In the Content settings of the Image Box Widget, you’ll find five options for Layout, Image, Button, and Content. Additionally, the Image Animation feature is available in the editor panel. Note that animations require the Pro version for full functionality.

Content Settings

• Layout: Choose the overall structure and alignment of your image box content.
• Image: Upload and adjust the main image.
• Content: Add and style the title, subtitle, and description.

Button: Add a call-to-action with customizable text, link, and icon.

Layout

 Here’s a brief description of each option in the Layout section:

• Style: Choose the animation style (slide, bounce)
• Direction: Set the direction the text animates (left, right, up, down).
• Gap: Adjust spacing between text and icon.

• Link Type: Choose how the link behaves (e.g., open in a new tab).
• Alignment: Set the text alignment (left, center, right).
• Icon: Add or customize an icon before/after the text.

This section gives you full control over how the widget looks and interacts with users on your website, helping to achieve a polished and professional design.

Image

In the Image section, you will find options for Image and Image Resolution. 

Image: Upload the image you want to display within the widget, which will be shown alongside your text or content.

Image Resolution: Adjust the quality of the image (low, medium, or high resolution) to control its clarity and loading speed on your site. Higher resolution provides better image quality but might affect loading time.

Content

In the Content section, you’ll find:

• Title: The main heading for the widget.
• Title HTML Tag: Choose the appropriate HTML tag for SEO and structure.

• Subtitle: A secondary heading, usually smaller than the title.
• Subtitle Position: Control where the subtitle appears (above or below the title).
• Description: A detailed explanation or additional text to provide context.

Button

In the Button section, you’ll find:

• Style: Customize the button’s appearance (e.g., color, border, background).
• Hover Style: Set the button’s look when hovered (e.g., color change, effects).
• Text: Define the text that appears on the button.
• Link: Set the URL that the button will redirect to.

• Icon: Choose an icon to display on the button.
• Icon Position: Decide whether the icon appears before or after the text.
• Direction: Control the button’s layout (e.g., horizontal or vertical alignment).
• Icon Spacing: Adjust the space between the icon and the text.

Image AnimationIn the Image Animation section, the Reveal option creates a smooth transition where the image gradually appears from a specified direction (left, right, top, or bottom).

After selecting the Reveal option, you’ll find the “Data Ease” setting, which controls the smoothness and flow of the animation transition.

In the Data Ease option, you will find several categories that allow you to fine-tune the animation’s timing and movement. These categories give your animation different pacing effects, each offering a unique transition style. Here’s a brief explanation of the available categories:

1. Power2.out: The animation begins quickly and slows down gradually toward the end.

Example: Imagine an image sliding in from the left. At first, it moves quickly, then slows down as it reaches its final position, creating a smooth, natural stop.

2. Bounce: The animation ends with a bouncing effect, creating a “rubber band” feel.

Example: Picture an image dropping into place. As it lands, it bounces back a couple of times before settling, giving the effect of elasticity.

1. Back: The animation slightly overshoots and then reverses, creating a playful “back and forth” motion before settling.

Example: Imagine a ball moving to the right, going a bit too far, then quickly bouncing back to the left before stopping. This creates a fun, dynamic effect.

2. Elastic: The animation has an elastic or spring-like movement, often bouncing back multiple times.

Example: Think of a rubber band being stretched and released. The element will move, stretch beyond its final position, and then spring back, bouncing a few times before settling.

3. Slowmo: Slows down the animation towards the end, creating a dramatic, slowed effect.

Example: Imagine an object falling and then gradually slowing down as it approaches the ground. The movement becomes slower as it nears its final position, adding a dramatic touch.

4. Stepped: The animation progresses in distinct steps, creating a staccato, segmented effect.

Example: Think of a character walking, where each movement is in separate, abrupt steps rather than a smooth transition. The animation “jumps” from one frame to the next, giving it a blocky feel.

5. Sine: The animation follows a sinusoidal (wave-like) curve, creating smooth oscillations.

Example: Imagine a ball swinging back and forth in a smooth, continuous wave motion. The animation moves fluidly in a smooth up-and-down pattern, like a gentle wave.

6. Expo: The animation starts off accelerating quickly and then slows down at the end, creating a dramatic effect.

Example: Think of a curtain quickly opening and then slowly coming to a stop, revealing what’s behind. This creates a powerful, attention-grabbing effect.

You can select the appropriate easing type based on the feel you want for your animation, providing a smoother, more professional look to the image reveal effect.

Style Settings

In the Style Section, you will find the following options:

1. Image Box: This controls the overall appearance and layout of the image box, including its borders, background color, and padding, allowing you to style the entire section containing the image.
2. Image: Here, you can adjust the appearance of the image itself, such as adding borders, shadows, and setting the image’s size, alignment, and other properties to enhance its visual presentation.

1. Content: This section lets you style the text or content inside the image box, including adjusting the font size, color, spacing, and alignment, ensuring the text complements the image properly.
2. Button: This allows you to style the button within the image box, including customizing its background color, text color, border radius, hover effects, and more, to make it visually appealing and functional.

These options give you complete control over the styling of the image box and its elements, creating a cohesive and polished design.

Advanced Settings

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

That’s it! You’ve now learned how to configure the Image Box Widget in Elementor to effectively customize and display engaging image content on your website.

If you need further assistance, feel free to reach out to our support team!

Before setting up the Brand Slider Widget, make sure that the Animation Addons for Elementor plugin is installed and activated on your website. Once activated, you’ll have access to all the free Elementor widgets, including the Brand Slider Widget—completely free! You can also explore both free and pro widgets using the available filter options.

Introduction

The Brand Slider Widget lets you showcase brand logos in a responsive, customizable slider—perfect for displaying partners or clients with smooth transitions.

Key Use Cases for the Social Icons Widget in Elementor:

• Use the Brand Slider widget to display partner or client logos, boosting brand visibility.
• Add logos to footers, headers, or dedicated sections to highlight collaborations and affiliations.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Brand Slider Widget?

1. Go to Animation Addons → Elements in your WordPress dashboard.
2. Find the Brand Slider Widget in the list.
3. Toggle it on to enable the widget.

Now, the Brand Slider Widget is ready to use!

How to Add the Brand Slider Widget in Elementor:

• Open the page where you want to add the Brand Slider Widget.
• Launch the Elementor editor.
• In the Elementor panel, search for “Brand Slider Widget.”
• Drag the widget to your desired section

The Brand Slider Widget is now ready for customization!

How to Configure the Brand Slider Widget in Animation Addons:

• In the Elementor panel, search for the “Brand Slider Widget.”
• Drag and drop the widget into the desired section.
• Customize the logo slider settings using the available options in the Elementor panel.

Your Brand Slider Widget is now ready to use! Use the configuration tabs to personalize the logo display, adjust slider speed, and apply transition effects for a smooth, professional look.

Configuring Brand Slider Widget: A Step-by-Step Guide

The Brand Slider Widget is available in Elementor and can be added to any section of your page. It includes three main settings tabs: Content, Style, and Advanced—each offering customization options to fine-tune your brand logo slider display.

Content Settings

In the Content section, you will find two options: Brand Slider and Slider Options.

Brand Slider 

You will find two category options: Text and Image.

• Text: This option allows you to add textual content such as brand names, descriptions, or other relevant information to be displayed in the slide.
• Image: With this option, you can upload an image, typically the brand’s logo, to be displayed on the slide.

These categories give you flexibility in presenting either text or images, allowing you to customize each slide according to your content needs.

• You can customize the slider content with three key options. The Slide Content option lets you add main content, like brand names or descriptions, alongside the logos.

• The Text List option allows you to display brand names or relevant details, adding context to each slide. The Text Separator defines a separator between the texts, ensuring a clean and organized layout.
• These options offer flexibility in customizing your Brand Slider, making it informative and visually appealing.

Slider Options

• The Slider Options section lets you customize the Brand Slider’s behavior and appearance. Choose the number of slides to display (3), and the interface will show that many slides on the front.

• With autoplay enabled, the sliders move automatically without the need to press. 
• You can also set the duration and autoplay interaction.

• Allow Touch Move: Enable touch movement for mobile users.
• Loop: Set the slider to loop continuously.
• Mousewheel: Allow navigation through the mouse wheel.
• Animation Speed: Adjust the speed of the slide transition.
• Speed Between: Set the delay between slide transitions.

• Navigation: Enable or disable navigation controls.
• Previous Arrow Icon: Customize the icon for the previous slide.
• Next Arrow Icon: Customize the icon for the next slide.
• Pagination: Enable pagination dots for navigation.
• Pagination Type: Choose the type of pagination (e.g., numbers, dots).
• Left/Right Direction: Set the slide direction to left or right.

Style Settings

• The Style section includes three sections: Text, Slider Navigation and Pagination.

• Text Section: Customize the text color, typography, separator color, and size to match your design preferences.
• Slider Navigation: Adjust the appearance of navigation arrows for better user interaction.
• Pagination: Modify pagination styles for enhanced visual appeal and functionality.

Advanced Settings 

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

That’s it! You’ve now learned how to configure the Brand Slider Widget in Elementor to customize and showcase brand logos effectively on your website.

If you need further assistance, feel free to reach out to our support team!

Before setting up the Counter Widget, make sure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll get access to all free Elementor widgets, including the Counter Widget—completely free! You can also explore both free and pro widgets using the filter options.

Introduction

The Counter Widget displays animated numbers—perfect for highlighting stats or milestones with customizable styles.

Key Use Cases for the Counter Widget in Elementor:

• Use the Counter widget to highlight statistics, milestones, or achievements dynamically.
• Display real-time data with engaging animations to enhance user interaction.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Counter Widget?

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Counter Widget in the list.
• Toggle it on to enable the widget.

How to Add the Counter Widget in Elementor:

• Open the page where you want to add the Counter Widget.
• Launch the Elementor editor.
• In the Elementor panel, search for “Counter Widget“.
• Drag the widget to your desired section.

The Counter Widget is now ready for customization!

How to Configure the Counter Widget in Animation Addons:

• In the Elementor panel, search for the “Counter Widget”.
• Drag and drop the widget into the desired section.
• Customize the counter settings using the available options in the Elementor panel.

Your Counter Widget is now ready to use! Use the tabs to personalize number style, animation, and layout for a visually engaging result.

Configuring the Counter Widget in Animation Addons: A Step-by-Step Guide

The Counter Widget in Elementor offers three main tabs: Content, Style, and Advanced, allowing you to customize the number format, animation style, and layout.

Content Settings

Content

In the Content section, you’ll find the following settings:

• Starting Number: The initial value of the counter.
• Ending Number: The final value the counter will reach.
• Number Prefix: Adds text before the number (e.g., “$”).
• Number Suffix: Adds text after the number (e.g., “%”).
• Animation Duration: Sets how long the counter animation lasts.
• Thousand Separator Toggle: Enables or disables the comma separator for large numbers.

• Separator: Defines the character used as a separator (e.g., comma).
• Title: Adds a title to your counter.
• Direction: Controls whether the counter counts up or down.
• Gap: Adjusts the spacing between numbers.
• Separator Button: Enables separator for thousands in large numbers.
• Alignment: Aligns the counter text (left, center, right).

Style Settings

The Style section consists of three parts: Number, Suffix/Prefix, and Title. Let’s explore how to customize each setting.

Number

Customize the font, size, color, weight, and letter spacing for the counter number.

Prefix/Suffix

Adjust the font, size, color, and weight for the number prefix and suffix.

Title

Style the title text, including font, size, color, and weight to match the overall design.

Advanced Settings 

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

That’s it! You’ve now learned how to configure the Counter widget in Elementor to effectively customize and display dynamic counters on your website.

If you need further assistance, feel free to reach out to our support team!

Before setting up the Icon Widget, make sure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll get access to all free Elementor widgets, including the Icon Widget—completely free! You can also explore both free and pro widgets by using the filter options.

Introduction

The Icon Widget in Elementor lets you display fully customizable icons with control over size, color, alignment, hover effects, and links, enhancing both design and interactivity.

Key Use Cases for the Icon Box Widget in Elementor:

• Use the Icon Box widget to showcase services, features, or key offerings with icons and descriptive text.
• Create visually engaging sections to highlight important information, enhancing user experience and interaction.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Icon Widget?

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Icon Widget in the list.
• Toggle it on to enable the widget.

Now, the Icon Widget is ready to use!

How to Add the Icon Widget in Elementor:

• Open the page where you want to add the Icon Widget.
• Launch the Elementor editor.
• In the Elementor panel, search for “Icon Widget”.
• Drag the widget to your desired section.

The Icon Widget is now ready for customization!

How to Configure the Icon Widget in Animation Addons:

• In the Elementor panel, search for the “Icon Widget.”
• Drag anddrop the widget into the desired section.
• Customize icon settings like type, size, color, hover effects, and link using the available options.

Your Icon Widget is now ready to use! Use the tabs to style and personalize it for a visually engaging effect.

Configuring Icon Box Widget in Animation Addons: A Step-by-Step Guide.

The Icon Box Widget is available in Elementor and can be placed on the desired section of the page. It offers three main settings tabs: Content, Style, and Advanced.

Content Settings

Icon Box 

Under the Content section of the Icon Widget, you’ll find the Icon settings, where you can customize the following:

• Icon Box Style: Choose the layout style for the icon and text.
• Icon: Select the icon you want to display.
• Title: Add a custom title next to or below the icon.
• Title HTML Tag: Choose a suitable HTML tag for the title (like H1–H6, div, span).

• Description: Add short supporting text or details below the title.
• Media: Upload or link media content if needed.
• Paragraph: Insert additional text or context as a paragraph.

Each setting allows you to personalize the widget for a clean, functional design.

Button

In the Button section of the Icon Widget, you’ll find the following customization options:

• Style: Choose the default look of the button.
• Hover Style: Set the visual effect when users hover over the button.
• Text: Enter the button label or call-to-action.
• Link: Add a URL where the button will redirect.

• Icon: Select an icon to show with the text.
• Icon Position: Place the icon before or after the text.
• Direction: Set the direction of the button content (row or column).
• Icon Spacing: Adjust the space between the icon and text.

These settings help you design engaging, clickable buttons for a better user experience.

Style Settings

Style settings provide the flexibility to fine-tune and enhance your content, improving its visual appeal. Within this section, you’ll find options for Box, Icon, Content, Button, and Hover Effects. Let’s explore how each of these works:  

In the Style section of the Icon Widget, you’ll find four key areas to customize:

• Box: Adjust background, border, padding, and overall box layout.

• Icon: Change icon size, color, spacing, and hover effects.

• Content: Style the title and description with typography, color, and spacing.

• Button: Customize button appearance, including colors, typography, border, and hover animations.

These controls let you perfectly style the widget to match your site design.

Advanced Settings 

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

That’s it! You’ve now learned how to configure the Icon Box in Elementor to effectively customize and display dynamic counters on your website.

If you need further assistance, feel free to reach out to our support team!

Before setting up the Testimonial Widget, make sure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll get access to all free Elementor widgets, including the Testimonial Widget—completely free! You can also explore both free and pro widgets by using the filter options.

Introduction

The Testimonial Widget showcases customer feedback with customizable layouts and effects, boosting trust and credibility.

Key Use Cases for the Testimonial Widget in Elementor: 

• Use the Testimonial Widget to display customer feedback, reviews, or success stories, building trust and credibility. 
• Create engaging sections to highlight positive experiences, enhancing social proof and boosting user confidence.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Testimonial Widget:

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Testimonial Widget in the list.
• Toggle it on to enable the widget.

Now, the Testimonial Widget is ready to use!

How to Add the Testimonial Widget in Elementor:

• Open the page where you want to add the Testimonial widget.
• Launch the Elementor editor.
• In the Elementor panel, search for “Testimonial Widget.”
• Drag the widget to your desired section.

The Testimonial widget is now ready for customization!

How to Configure the Testimonial Widget in Animation Addons:

• In the Elementor panel, search for the “Testimonial Widget.”
• Drag and drop the widget into the desired section.
• Customize the testimonial settings using the available options in the Elementor panel.

Your Testimonial Widget is now ready to use! Here’s the interface where you can configure the settings and personalize the testimonials with different layouts and design options for an engaging display. 

Content Settings

In the Content Settings, you’ll find options for Testimonial and Slider.

Testimonial Style

In the Testimonial Widget, you’ll find:

• Testimonial Styles: Choose from multiple preset layouts to best fit your design needs.
• Image Resolution: Adjust the image size and quality for clean, professional visuals.

These options help you create stylish, trust-building testimonial displays effortlessly.

Slider Option

Here’s a quick breakdown of the Slider Options available in the Testimonial Widget:

• Slides to Show: Set how many testimonial slides appear at once.
• Autoplay: Enable automatic sliding of testimonials.
• Autoplay Delay: Choose the delay time between each auto-slide.
• Autoplay Interaction: Pause or continue autoplay on user interaction.
• Allow Touch Move: Enable swipe gestures on touch devices.
• Loop: Make the slider loop infinitely.

• Animated Speed: Control how fast the slide transitions occur.
• Space Between: Set spacing between each testimonial slide.
• Navigation: Enable/disable navigation arrows or dots.
• Previous Arrow Icon: Choose the icon style for the previous arrow.
• Next Arrow Icon: Choose the icon style for the next arrow.
• Direction: Set the slide direction (left-to-right or right-to-left).

These settings help you fully customize the testimonial slider experience for your site’s visitors.

Style Settings

In the Style section, you’ll find various options such as Slide, Navigation, Image, Content, Name, and Designation.

Here’s a brief overview of each part under the Style section of the Testimonial Widget:

• Slide: Customize the background, padding, border, and box-shadow of the testimonial slide.
• Navigation: Style the navigation arrows and dots, including color, size, spacing, and hover effects.
• Image: Adjust the testimonial author’s image size, border radius, and spacing.
• Content: Style the testimonial text with typography, color, spacing, and alignment settings.

• Name: Customize the name text with font, size, weight, and color options.
• Designation: Style the author’s role or title with typography and color controls.

These options help you perfectly match the testimonial design to your website’s branding.

Advanced Settings 

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

Congratulations! You’ve successfully learned how to configure the Testimonial Widget in Elementor to customize and display dynamic counters on your website.

For any additional help or inquiries, don’t hesitate to contact our support team!

Before setting up the Classic Testimonial Widget, ensure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll get access to all free Elementor widgets, including the Classic Testimonial Widget—completely free! You can also use the filter options to explore both free and pro widgets.

Introduction

The Classic Testimonial widget in Elementor displays customer feedback in a simple, professional layout, helping to build trust with your audience.

Key Use Cases for the Classic Testimonial Widget in Elementor:

• Use the Classic Testimonial Widget to showcase customer feedback, reviews, or success stories, fostering trust and credibility. 
• Create clean, professional sections to highlight positive experiences, enhancing social proof and boosting user confidence.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Classic Testimonial Widget?

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Classic Testimonial Widget in the list.
• Toggle it on to enable the widget.

Now, the Classic Testimonial Widget is ready to use!

How to Add the Classic Testimonial Widget in Elementor:

• Open the page where you want to add the Classic Testimonial widget.
• Launch the Elementor editor.
• In the Elementor panel, search for “Classic Testimonial Widget.”
• Drag the widget to your desired section.

The Classic Testimonial Widget is now ready for customization!

How to Configure the Classic Testimonial Widget in Animation Addons:

• In the Elementor panel, search for the “Classic Testimonial Widget.”
• Drag and drop the widget into your desired section.
• Customize the testimonial settings using the available options in the Elementor panel—such as content, layout, image, and style.

Your Classic Testimonial Widget is now ready to use! You can personalize it further using the Content, Style, and Advanced tabs for a clean and credible testimonial display.

Configuring Classic Testimonial  Widget in Animation Addons: A Step-by-Step Guide

The Classic Testimonial Widget is available in Elementor and can be placed in any section of your page. It includes three main settings tabs: Content, Style, and Advanced—each offering customization options to fine-tune the testimonial’s layout, appearance, and behavior for a polished and trustworthy look.

Content Settings

In the Content Settings, you’ll find options for Content and Slider options.

Content

• In the content section, you’ll find various testimonial styles. For Testimonial Item One, you need to set an image along with the content, including the reviewer’s name, title, and a link.

Slider Option

In the Slider section of the Classic Testimonial Widget‘s Content settings, you can customize the following options:

• Slides to Show: Set the number of testimonial slides you want to display at once.
• Autoplay: Enable or disable automatic sliding of testimonials.
• Autoplay Delay: Set the delay time (in milliseconds) between each slide transition when autoplay is enabled.
• Autoplay Interaction: Control whether autoplay continues after a user interaction.
• Allow Touch Move: Enable or disable touch movement for mobile devices.
• Loop: Choose whether the slider should loop back to the first testimonial after reaching the last one.

• Animated Speed: Set the speed of slide transitions for smooth animation.
• Space Between: Adjust the space between each testimonial slide.
• Navigation: Enable or disable navigation arrows for sliding through testimonials.
• Previous Arrow Icon: Customize the icon for the previous navigation arrow.
• Next Arrow Icon: Customize the icon for the next navigation arrow.
• Direction: Set the direction for sliding (e.g., horizontal or vertical).

These options allow you to fully customize how the testimonial slider behaves and interacts with users.

Style Settings

In the Style section of the Classic Testimonial Widget, you’ll find a range of customization options for each part of the testimonial display. Here’s how each one works:

1. Slide: Adjust the overall appearance of the testimonial slides, including background color, padding, and borders.
   
2. Navigation: Customize the navigation arrows for moving through the slides. You can change the color, size, position, and style of the previous and next arrows.
   
3. Content: Style the content of each testimonial, such as the testimonial text. You can modify font size, color, typography, line height, and text alignment for better readability.

1. Image: Customize the appearance of the testimonial image (if available). You can adjust the image border radius, size, and add box shadow or other visual effects.
   
2. Name: Style the name of the person giving the testimonial. Options include changing the font size, color, weight, and alignment to match the overall design.
   
3. Title: Customize the title (e.g., job title or role) of the person in the testimonial. Adjust font settings like size, color, and weight to differentiate the name from the title.
   

Quote: Style the quote symbol or icon. You can adjust its color, size, position, and even add custom icons to represent the quote symbol, making the testimonial stand out more.

Advanced Settings 

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

Congratulations! You’ve successfully learned how to configure the Testimonial Classic widget in Elementor to showcase customer feedback effectively on your website.

Before setting up the Modern Testimonial Widget, make sure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll get access to all free Elementor widgets, including the Modern Testimonial Widget—completely free! You can also explore both free and pro widgets by using the filter options.

Introduction

The Modern Testimonial Widget displays sleek customer reviews, enhancing credibility and trust for business sites and portfolios.

Key Use Cases for the Testimonial Modern Widget in Elementor:

• Use the Modern Testimonial widget to showcase customer feedback, reviews, or success stories, enhancing trust and credibility.
• Create visually appealing sections to highlight positive experiences, boosting social proof and increasing user confidence.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Modern Testimonial Widget:

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Modern Testimonial Widget in the list.
• Toggle it on to enable the widget.

Now, the Modern Testimonial Widget is ready to use!

How to Add the Modern Testimonial Widget in Elementor:

• Open the page where you want to add the Modern Testimonial widget.
• Launch the Elementor editor.
• In the Elementor panel, search for “Modern Testimonial Widget.”
• Drag the widget to your desired section.

The Modern Testimonial widget is now ready for customization!

How to Configure the Modern Testimonial Widget in Elementor:

• In the Elementor panel, search for the “Modern Testimonial Widget.”
• Drag and drop the widget into the desired section.
• Customize the testimonial settings using the available options in the Elementor panel.

The Modern Testimonial widget is now ready to use! Here’s where you can configure settings like testimonial style, images, navigation, and other visual options to create a dynamic and professional display.

Configuring Modern Testimonial Widget : A Step-by-Step Guide

The Modern Testimonial Widget is available in Elementor and can be placed on the desired section of the page. It offers three main settings tabs: Content, Style, and Advanced.

Content Settings

In the Content Settings, you’ll find options for both Content and Slider customization. The Content section allows you to add and manage text, images, and other elements, ensuring your testimonials are well-structured and visually appealing.

Content

In the Content Section of the Modern Testimonial Widget, you will find the following options:

• Section Title: This allows you to add a title above your testimonial section. It can help provide context to the testimonials or introduce the section on your page.
  
• HTML Tag: You can select the HTML tag for the section title (e.g., H1, H2, H3). This helps with SEO and controlling the structure of your content.

• Testimonial Style Category: Here, you can choose the style category for the testimonial layout. This allows you to customize the look and feel of how the testimonials appear, whether in a grid, carousel, or other styles.
  
• Quote: This field allows you to add the actual testimonial text. You can customize this section with quotes from your clients or customers, showcasing their feedback in a visually appealing way.

These settings allow you to create a visually engaging testimonial section while maintaining flexibility in design.

Slider Option

In the Slider Option of the Modern Testimonial Widget, you’ll find the following customizable settings:

• Slides to Show: Choose how many testimonial slides you want to display at once in the slider. This helps in controlling the layout of your testimonial section.
  
• Autoplay: Toggle this option to automatically cycle through the testimonials without user interaction. It ensures a seamless viewing experience.
  
• Autoplay Delay: Set the delay between each slide transition when autoplay is enabled. This determines how long each testimonial stays visible before the next one appears.
  
• Autoplay Interaction: If enabled, the slider will pause when a user interacts with it (hover or click), ensuring they can read the testimonials without interruption.
  
• Allow Touch Move: This option allows users to swipe through the testimonials on touch devices, like smartphones or tablets.
  
• Loop: Enabling this makes the slider loop back to the first testimonial after reaching the last one, creating a continuous experience.

• Animation Speed: Adjust how quickly the testimonials transition from one to the next. This controls the smoothness of the slide effect.
  
• Space Between: Set the space between each slide. This is helpful in managing the visual flow and arrangement of testimonials.
  
• Navigation: You can choose to enable navigation arrows for the user to manually move between the testimonials.
  
• Previous Arrows Icon: Customize the icon for the previous slide arrow, making it more in line with your site’s style.
  
• Next Arrow Icon: Customize the icon for the next slide arrow, adding to the overall aesthetic.
  
• Direction: Choose whether the slides move horizontally or vertically. This affects how the testimonials are presented in the slider.

Style Settings

The Style section offers various customization options, including Section Border, Navigation, Section Title, Content, Name, Designation, and Quote.

In the Style Section of the Modern Testimonial Widget, you’ll find the following options:

• Slide: Customize the look of the individual testimonial slides, including background color, border, and padding.
  
• Navigation: Style the navigation arrows (previous/next), adjusting their size, color, and positioning.
  
• Image: Adjust the image settings for testimonial authors, such as size, border radius, and padding.

• Content: Style the testimonial content, including font size, color, line height, and text alignment.
  
• Name: Customize the name of the testimonial author by adjusting the font size, color, and typography.
  
• Designation: the designation (job title or position) of the testimonial author, including font style and color.

These options help you tailor the appearance of the testimonial widget to match your site’s design, ensuring consistency and a professional look.

Advanced Settings 

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

Congratulations! You’ve successfully learned how to configure the Modern Testimonial in Elementor to customize and display dynamic counters on your website.

Before setting up the Button Widget, make sure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll get access to all free Elementor widgets, including the Button Widget—completely free! You can also explore both free and pro widgets by using the filter options.

Introduction

The Button widget in Elementor lets you create customizable buttons with adjustable text, colors, borders, hover effects, and links, ideal for call-to-action and boosting user engagement.

Key Use Cases for the Button Widget in Elementor:

• Use the Button widget to create customizable, clickable buttons for your website. 
• Enhance user engagement by adjusting text, colors, borders, and hover effects, and set links to guide users to specific actions or pages.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Button Widget:

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Button Widget in the list.
• Toggle it on to enable the widget.

Now, the Button Widget is ready to use!

How to Add the Button Widget in Elementor:

• Open the page where you want to add the Button Widget.
• Launch the Elementor editor.
• In the Elementor panel, search for “Button Widget.”
• Drag the widget to your desired section.
• The Button Widget is now ready for customization!

How to Configure the Button Widget in Animation Addons:

• In the Elementor panel, search for the “Button Widget.”
• Drag and drop the widget into your desired section.
• Customize the button text, link, alignment, and icon using the available options in the Elementor panel.

Your Button Widget is now ready to use! Explore the Content, Style, and Advanced tabs to personalize its appearance, animations, and interactions for a more engaging user experience.

Configuring Button Widget in Animation Addons: A Step-by-Step Guide

The Button Widget is available in Elementor and can be placed on the desired section of the page. It offers three main settings tabs: Content, Style, and Advanced.

Content Settings

In the Content section, you will find only the Button option, where you can customize the text, link and alignment for your button.

Let’s explore the Button section located under the Content tab in the Button Widget. Here’s a quick breakdown of each option:

• Style: Choose the visual appearance of your button—like solid, outline, or gradient styles to match your website design.
  
• Hover Style: Set how the button reacts on hover. This includes hover animations, color transitions, or other interactive effects.
  
• Text: This is where you add the button label. For example, “Buy Now,” “Learn More,” or any CTA you prefer.
  
• Link: Insert the URL where the button will redirect your visitors once clicked.
  
• Icon: Add an icon to enhance the button’s visual impact—choose from a wide variety of icons available in Elementor.

• Icon Position: Decide whether you want the icon to appear before or after the button text.
  
• Direction: Set the layout direction as LTR (left to right) or RTL (right to left) depending on your content language and alignment.
  
• Icon Spacing: Adjust the space between the icon and the text for better readability and design balance.
  
• Alignment: Control the button’s position—align it to the left, center, right, or justify based on your layout needs.

Style Settings

The Button section under the Style tab lets you visually enhance the look and feel of your button. Here’s a quick exploration of each option:

• Typography: Customize the font style, size, weight, line height, letter spacing, and more to match your brand’s voice.
  
• Icon Size: Adjust the size of the icon to make it more prominent or subtle depending on your design goal.
  
• Text Color: Change the button text color to ensure it’s readable and aligns with your site’s color palette.
  
• Background Type: Choose between solid color, gradient, or even image backgrounds for your button.

• Border Type: Add or customize borders—set solid, dashed, dotted, or none, and define border width and color.
  
• Border Radius: Control how rounded the button corners are—from sharp squares to smooth pills.
  
• Padding: Define the spacing inside the button—top, bottom, left, and right—to control button size and spacing.
  
• Box Shadow: Add shadows around the button to give it depth or a subtle lift effect.

These styling tools help you design a fully responsive, visually appealing button that fits perfectly with your site aesthetics.

Advanced Settings 

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

Congratulations! You’ve successfully learned how to configure the Button widget in Elementor to create customizable, clickable buttons on your website.

For any further assistance or inquiries, feel free to contact our support team!

Before setting up the Image Comparison Widget, make sure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll get access to all free Elementor widgets, including the Image Comparison Widget—completely free! You can also explore both free and pro widgets by using the filter options.

Introduction

The Image Comparison widget lets users compare two images with a slider—perfect for before-and-after views.

Key Use Cases for the Image Comparison Widget in Elementor:

• Use the Image Comparison widget to showcase two images side by side with a draggable slider.
• Perfect for before-and-after visuals, product comparisons, or transformations, enhancing user engagement and interactivity.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Image Comparison Widget:

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Image Comparison Widget in the list.
• Toggle it on to enable the widget.

Now, the Image Comparison Widget is ready to use!

How to Add the Image Comparison Widget in Elementor:

• Open the page where you want to add the Image Comparison widget.
• Launch the Elementor editor.
• In the Elementor panel, search for “Image Comparison Widget.”
• Drag the widget to your desired section.

The Image Comparison widget is now ready for customization!

How to Configure the Image Comparison Widget in Elementor:

• In the Elementor panel, search for the “Image Comparison Widget.”
• Drag and drop the widget into the desired section.
• Upload the two images you want to compare.
  Customize the settings like slider position, image width, and more in the Elementor panel.

Your Image Comparison Widget is now ready to use! You can adjust the settings for a smooth before-and-after comparison experience.

Configuring Image Comparison Widget : A Step-by-Step Guide

The Image Comparison Widget is available in Elementor and can be placed on the desired section of the page. It offers three main settings tabs: Content, Style, and Advanced.

Content Settings

In the Content section, you will find only the content option, where you can customize the text, link, and alignment for your button.

Content

In the Content Section of the Image Comparison Widget, you’ll find the following image customization options:

• Before Image: This option allows you to upload and set the image for the “before” state in your comparison.
  
• After Image: Similarly, this lets you upload and set the “after” state image for comparison.
  
• Show Caption : When enabled, this option allows you to add a caption (text) that will appear over the image, describing the comparison.

• Alignment:  Controls the positioning of the images and the comparison slider. You can choose from left, center, or right alignment to place the images within their container.

• Show Button: This option enables or disables a button that can appear below the images. It’s often used for actions like “Learn More” or “Shop Now.”

These customization options allow you to control how the images, captions, and buttons are displayed within the comparison widget.

Style Settings

In the Style Section of the Image Comparison Widget, you have the following two options:

• Image: This allows you to style both the Before and After images. You can adjust the image’s width, height, border, shadow, and other visual properties to enhance the look and feel of the images within the comparison widget.
  
• Handler: The handler is the slider button that users drag to compare the images. You can customize its appearance here, including its size, color, border radius, and shadow, to make it fit with your site’s design.
  

These options help you fine-tune the visuals of both the images and the comparison slider, ensuring it blends seamlessly with the overall design of your website.

Advanced Settings 

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

That’s it! You’ve successfully learned how to configure the Image Comparison widget in Elementor to create customizable, clickable buttons on your website.

For any further assistance or inquiries, feel free to contact our support team!

Before setting up the Progress Bar Widget, make sure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll get access to all free Elementor widgets, including the Progress Bar Widget—completely free! You can also explore both free and pro widgets by using the filter options.

Introduction

The Progress Bar widget adds dynamic, customizable progress bars to track goals and achievements in Elementor.

Key Use Cases for the Progress Bar Widget in Elementor:

• Use the Progress Bar widget to visually display progress, goals, or achievements on your website. 
• Customize the appearance, colors, and animations to engage users and track measurable progress effectively.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Progress Bar Widget:

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Progress Bar Widget in the list.
• Toggle it on to enable the widget.

Now, the Progress Bar Widget is ready to use!

How to Add the Progress Bar Widget in Elementor

1. Open the page where you want to add the Progress Bar.
2. Launch Elementor editor.
3. In the Elementor panel, search for “Progress Bar.”
4. Drag the Progress Bar widget to your desired section.
5. The Progress Bar widget will now be available for customization.

How to Configure the Progress Bar Widget in Animation Addons:

• In the Elementor panel, search for the “Progress Bar Widget.”
• Drag and drop the widget into the desired section.
• Customize the progress bar settings using the available options in the Elementor panel.

Your Progress Bar Widget is now ready to use! You can adjust the progress percentage, style, and animations to match your design needs.

Configuring Progress Bar Widget : A Step-by-Step Guide

Once the widget is added to your page, you can configure its settings under different tabs: Content, Style, and Advanced.

Content Settings

You will find two options: Layout and Progress Bar.

Layout 

In the Layout section of the Progress Bar widget, you’ll only find the Style option. You can choose from three preset styles to match your design preferences:

• Style One
  
• Style Two
  
• Style Three

Each style gives your progress bar a different visual appearance. Simply select the one that fits your page’s design best—it’s that easy!

Progress Bar

From the Progress Bar settings under the Content section, you can control:

1. Percentage – Adjust the progress using the slider or input box. You can set it anywhere from 0 to 100 depending on what you want to display.
   
2. Display Percentage – Toggle this option ON/OFF to either show or hide the numeric percentage on the progress bar.
   

This section helps you define how far along a task or goal is visually and numerically. Let me know if you want help with the Style section too!

Style Settings

From the Style tab of the Progress Bar widget, under the Progress Bar section (as shown in your screenshot), you can customize the appearance with the following options:

Progress Bar

• Color – Choose the color of the progress bar (the filled portion).
  
• Background Color – Set the background color of the bar (the unfilled portion).
  
• Stroke Width – Adjust the thickness of the progress stroke (the main progress line).
  
• Trail Width – Modify the width of the background trail line behind the progress.

These settings help you design the progress bar to match your site’s branding or desired visual style. Let me know if you want help describing the Percentage section or the Advanced tab!

Percentage

Under the Style tab of the Progress Bar widget, the Percentage section lets you style the percentage text displayed on the bar. Here’s what you can customize:

• Color – Change the color of the percentage text to match your design.
• Typography – Customize the font, size, weight, and other text styles.
• Position Y – Adjust the vertical position of the percentage label along the Y-axis. (e.g., move it up or down over the progress bar).

These settings help make the progress bar more visually appealing and aligned with your site’s design. 

Advanced Settings 

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

That’s it! You’ve successfully learned how to configure the Progress Bar widget in Elementor to create customizable, clickable buttons on your website.

For any further assistance or inquiries, feel free to contact our support team!

Before setting up the Team Widget, make sure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll get access to all free Elementor widgets, including the Team Widget—completely free! You can also explore both free and pro widgets by using the filter options.

Introduction

The Team Widget lets you display team members with images, roles, and social links in customizable layouts.

Key Use Cases for the Team Widget in Elementor:

• Use the Team Widget to showcase your team members professionally with images, roles, and social links.
• Create engaging team sections to highlight expertise, build credibility, and enhance your brand’s identity.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Team Widget?

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Team Widget in the list.
• Toggle it on to enable the widget.

Now, the Team Widget is ready to use!

How to Add the Progress Bar Widget in Elementor

• Open the page where you want to add the Progress Bar.
• Launch Elementor editor.
• In the Elementor panel, search for “Team Widget”
• Drag the Team Widget to your desired section.
• The Progress Bar widget will now be available for customization.

How to Configure the Team Widget in Animation Addons:

• In the Elementor panel, search for the “Team Widget.”
• Drag and drop the widget into the desired section.
• Customize the team member details, layout, and social links using the available options in the Elementor panel.

Your Team Widget is now ready to showcase your amazing team!

Configuring Button Widget : A Step-by-Step Guide

Once the widget is added to your page, you can configure its settings under different tabs: Content, Style, and Advanced.

Content Settings

The Team Widget offers four configuration options: Layout, Image, Content, and Social Media, enabling precise customization for an optimized team display.

• Layout – Choose your preferred layout style to display team members.
  
• Image – Upload profile photos and control how they appear.
  
• Content – Add the team member’s name, designation, and description.
  
• Social Media – Insert social icons with links to platforms like Facebook, LinkedIn, Instagram, and more

Style Settings

• Image Settings: Customize the profile picture or team member’s image to match your design. You can adjust the size, shape, and even apply hover effects for a more interactive experience.
  
• Content Adjustments: Tailor the text, such as the team member’s name, role, and bio. You can choose different fonts, colors, and layout styles to ensure the content fits the overall look of your site.

• Social Media Integrations: Link your team members’ social media profiles directly to their profiles on the website. This allows visitors to connect easily with your team across various platforms, such as LinkedIn, Twitter, or Facebook.

These options give you full control over the presentation and functionality of your team section.

Advanced Settings 

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

That’s it! You’ve successfully learned how to configure the Team Widget  in Elementor to create customizable, clickable buttons on your website.

For any further assistance or inquiries, feel free to contact our support team!

Before setting up the Animated Title Widget for your one-page navigation, ensure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll gain access to all free Elementor widgets, including the Animated Title Widget, at no cost! You can easily explore both free and pro widgets by using the filter options for efficient navigation within your one-page layout.

Introduction

The One Page Nav Widget provides smooth, customizable navigation for single-page websites.

Key Use Cases for the One Page Nav Widget in Elementor:

• Use the One Page Nav widget to create seamless, easy navigation between sections on a single-page website. 
• Customize the design and links to enhance user experience and improve site interaction.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the One Page Nav Widget?

1. Go to Animation Addons → Elements in your WordPress dashboard.
2. Find the One Page Nav Widget in the list.
3. Toggle it on to enable the widget.

Now, the One Page Nav Widget is ready to use!

How to Add the One Page Nav Widget in Elementor

• Open the page where you want to add the Progress Bar.
• Launch Elementor editor.
• In the Elementor panel, search for “One Page Nav” .
• Drag the One Page Nav widget to your desired section.
• The Progress Bar widget will now be available for customization.

How to Configure the One Page Nav Widget in Animation Addons:

• In the Elementor panel, search for the “One Page Nav Widget.”
• Drag and drop the widget into the desired section.
• Customize the navigation settings using the available options in the Elementor panel.

Your One Page Nav Widget is now ready to use! Here’s the interface where you can configure the settings and personalize the navigation links for a seamless one-page website experience.

Configuring One Page Nav Widget : A Step-by-Step Guide

Once the One Page Nav widget is added to your page, you can configure its settings under different tabs: Content, Style, and Advanced.

Content Settings

You will find two options: Navigation and Settings.

Navigation 

• From the Content section, you’ll find two subsections: Navigation and Settings.
• Under the Navigation subsection, you can set up your one-page navigation menu with items like Home, About, and FAQ.

Settings

From the Settings subsection, you’ll find the following options:

• Navigation Position: Choose where the navigation appears—left or right side of the screen.
• Vertical Position: Adjust the vertical alignment of the navigation—top, middle, or bottom.
  Show Tooltip: Toggle this on to display tooltips when hovering over navigation items.

Style Settings

Now, it’s time to enhance the look of your navigation using the Style section. Here’s what you can explore:

• Navigation Wrapper: Customize the background, border, padding, and spacing to match your site’s design.
  
• Navigation Item: Style the individual items with color, size, spacing, hover effects, and more for a clean and modern look.

These styling options help you create a visually appealing and user-friendly one-page navigation setup.

Advanced Settings

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

That’s it! You’ve successfully learned how to configure the One Page Nav widget in Elementor to create customizable, clickable buttons on your website.

For any further assistance or inquiries, feel free to contact our support team!

Before setting up the Timeline Widget, make sure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll get access to all free Elementor widgets, including the Timeline Widget—completely free! You can also explore both free and pro widgets using the filter options.

Introduction

The Timeline Widget displays events in order with customizable layouts for better storytelling. 

Key Use Cases for the Timeline Widget in Elementor:

• Use the Timeline widget to showcase events, milestones, or achievements in chronological order. 
• Customize the layout, colors, and design to create an engaging visual story and highlight key moments on your website.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Timeline Widget?

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Timeline Widget in the list.
• Toggle it on to enable the widget.

Now, the Timeline Widget is ready to use!

How to Add the Progress Bar Widget in Elementor

1. Open the page where you want to add the Progress Bar.
2. Launch Elementor editor.
3. In the Elementor panel, search for “Timeline”
4. Drag the Timeline widget to your desired section.
5. The Progress Bar widget will now be available for customization.

How to Configure the Timeline Widget in Animation Addons:

• In the Elementor panel, search for the “Timeline Widget.”
• Drag and drop the widget into the desired section.
• Customize the timeline settings using the available options in the Elementor panel.

Your Timeline Widget is now ready to use! Use the interface to configure and personalize your timeline with different tabs for a visually engaging and chronological display of events or milestones.

Configuring Timeline Widget in Animation Addons: A Step-by-Step Guide

Once the Timeline widget is added to your page, you can configure its settings under different tabs: Content, Style, and Advanced.

Content Settings

You will find two options: Layout and Timeline & Image Animation (optional).

Layout

Customize the timeline structure, such as vertical or horizontal layout, alignment, spacing, and connectors to match your design needs.

Timeline

Add engaging entrance animations to timeline items and images, enhancing the visual flow and making your timeline more dynamic.

Image Animation

• And, explore the Animation section to apply effects like Power2out or Reveal for smooth transitions. Enable the Play Animation option to use your selected effect. 

      Note: Animations require the Pro version of the plugin.

1. Power2.out

• Behavior: Starts fast and slows down toward the end (ease-out).
• Use case: Smooth transitions for UI elements like buttons, cards, or text reveals.
• Why use it: It gives a professional, subtle feel without being too flashy.

2. Bounce

• Behavior: The animation hits the end point and bounces a few times like a ball.
• Use case: Fun, playful interfaces—great for kids’ websites, eCommerce pop-ups, or gamified UIs.
• Why use it: Adds personality and movement but might be too much for minimalist designs.

3. Back

• Behavior: Goes slightly past the target before coming back to settle—like a reverse tug.
• Use case: Hover animations, dropdowns, or modal pop-ups.
• Why use it: Adds a lively feel, perfect for making elements look responsive and interactive.

4. Elastic

• Behavior: Like a spring—overshoots the final position and oscillates before settling.
• Use case: Loading indicators, playful transitions, and attention-grabbing animations.
• Why use it: Eye-catching but can be overwhelming if used too much.

5. Slowmo

• Behavior: Starts slow, speeds up, then slows down again.
• Use case: Dramatic reveals—text overlays, hero sections, or featured images.
• Why use it: Great for storytelling or highlighting something important.

6. Stepped

• Behavior: Moves in sudden, discrete steps—no smooth transitions.
• Use case: Retro or glitchy design styles, pixel art interfaces, or robotic themes.
• Why use it: Stylized look, works when you want something to feel abrupt or digital.
  

7. Sine

• Behavior: Smooth, wave-like easing—in and out gently.
  
• Use case: Image sliders, content fades, scroll animations.
  
• Why use it: Very natural and smooth—good for subtle movement.

8. Expo

• Behavior: Exponential curve—starts slow then accelerates rapidly (or the opposite).
• Use case: When you want dramatic emphasis, like a hero element flying in.
• Why use it: Bold, impactful entrance—but can feel intense if overused.

Style Settings 

 Under the Style tab in the timeline widget you will find three expandable options:

Timeline

Controls the appearance of the line that connects the steps.

• Line color & thickness
• Alignment (left/center/right)
• Spacing between elements
• Line animation (if supported)

Content

Styles the text, headings, and descriptions inside each timeline item.

• Typography (font, size, color)
• Background color or image
• Padding, margin, border radius
• Box shadow or hover effects

Step

Customizes the icon or circle that represents each timeline point.

• Size & shape
• Border, background color
• Icon settings (if using icons)
• Hover/active animations

Advance Settings 

• In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

That’s it! Now you know how to manage the Timeline Widget settings in Elementor to showcase events and milestones effectively on your website.

For any further assistance, feel free to reach out to our support team!

Before setting up the Tabs Widget, make sure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll get access to all free Elementor widgets, including the Tabs Widget—completely free! You can also explore both free and pro widgets by using the filter options.

Introduction

The Tabs Widget lets you display segmented content in interactive, easy-to-navigate sections.

Key Use Cases for the One Page Nav Widget in Elementor:

• Use the Tabs Widget to organize content into separate, easy-to-navigate sections within a page. 
• Customize the design and tab labels to provide a clear, interactive experience, allowing users to switch between different content seamlessly.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Tabs Widget?

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Tabs Widget in the list.
• Toggle it on to enable the widget.

Now, the Tabs Widget is ready to use!

How to Add the One Page Nav Widget in Elementor

1. Open the page where you want to add the Progress Bar.
2. Launch Elementor editor.
3. In the Elementor panel, search for “Tabs”.
4. Drag the Tabs widget to your desired section.
5. The Progress Bar widget will now be available for customization.

How to Configure the Tabs Widget in Animation Addons

• In the Elementor panel, search for the “Tabs Widget.”
• Drag and drop the widget into the desired section.
• Customize the tab settings using the available options in the Elementor panel.

Your Tabs Widget is now ready to use! Here’s the interface where you can configure the settings and personalize the tabs for a clean and interactive user experience.

Configuring Tabs Widget in Animation Addons: A Step-by-Step Guide

The Tabs Widget is available in Elementor and can be placed in any section of your page. It includes three main settings tabs: Content, Style, and Advanced—each offering customization options to personalize your tabs and optimize the layout for a seamless user experience.

Content Settings

You will find two options: Tabs and Settings.

Tabs Section (under the Content tab):

In the Tabs section, you’ll find the Tab Items subsection, which allows you to configure the content for each individual tab. The available settings include:

• Tab Title – Set a label for the tab.
• Icon – Choose an icon to visually represent the tab.
• Title – Add a title that appears inside the content area.
• Content Type – Select between two options:
  
  • Content – Use the built-in editor to create and display custom content.
  • Saved Templates – Insert a pre-designed Elementor template as the tab content.

When Content is selected, the following additional configuration options will appear:

• Add Media – Upload or insert images, videos, or custom code for enhanced visual presentation.
• Paragraph – Enter descriptive text or supporting content using the rich text editor.

These features allow you to structure your content in a clear, organized format—ideal for FAQs, service descriptions, or product details.

• Direction (Tab Content Placement):

The Direction setting allows you to define the placement of the tab content in relation to the tab labels. You can choose from the following options:

• Above – Displays the tab content above the tab labels.
• Below – Places the tab content beneath the tab labels (commonly used layout).
• Before – Positions the tab content to the left of the tab labels.
• After – Places the tab content to the right of the tab labels.

This feature helps you design the layout of your Tabs Widget to best match your page structure and visual preferences.

• Alignment – Controls the position of the tabs (Start, Center, End & Stretch).

This setting determines how the tabs are aligned within the widget’s container. You can choose from the following options:

• Start – Aligns all tab items to the left side (default for left-to-right languages).
• Center – Places the tab items in the center of the container, creating a balanced look.
• End – Aligns all tab items to the right side of the container.
• Stretch – Expands all tab items evenly to fill the entire width of the container, ensuring equal space between each tab.

This control is useful for adjusting the visual alignment of your tabs based on your design needs or layout preferences.

Settings (Under the Content Tab)

After configuring the Tabs section, you’ll move on to the Settings panel. This section offers additional customization options to fine-tune the appearance and behavior of your tabs. Here’s what you’ll find:

• Title Alignment
  Choose how your tab titles should align within the widget. Options include:
  
  • Left
  • Center
  • Right

This helps you match the tab alignment with your overall design layout.

• Icon Position
  Decide where the icon will appear in relation to the tab title. You can place it before or after the text for better visual hierarchy.
  
• Icon Gap
  Set the spacing between the icon and the title text. This ensures that your design remains clean and easy to read.
  
• Breakpoint
  Define how the tab layout behaves on different devices. The available breakpoints are:
  
  • Mobile Portrait (>767px) – Adjusts the layout specifically for mobile devices in portrait orientation.
  • Tablet Portrait (>1024px) – Optimizes the layout for tablets in portrait mode.

These settings provide responsive control and allow you to create a seamless viewing experience across various devices.

Style Settings

In the Content section under Style, you’ll find the following options:

Style

Background Type

Set the background of the tab items. You can choose between:

• Solid color
• Gradient
• Image background

Border Radius

Adjust the roundness of the tab corners. A higher radius results in more rounded edges, while a lower value gives a sharper, boxed look.

Gap Between Tabs

Control the space between each individual tab. Proper spacing improves readability and maintains a clean layout.

Distance from Content

Define the spacing between the tab headers and the content area. This ensures clear separation and visual balance between the navigation and its associated content.

Typography Subsection

Within this subsection, you can fine-tune how the text and icons inside the tabs appear:

🔸 Icon Size

Set the size of the icon used within the tab titles. Larger icons draw more attention, while smaller ones create a minimal look.

🔸 Text Color

Choose the color of the tab title text. This should complement your site’s color scheme while ensuring good readability.

🔸 Background Type

This controls the background of the text area or tab title, separate from the main background. It adds layering and contrast to the tab design.

Additional Styling Options

Border Type and Radius

Define the border style (solid, dashed, dotted, etc.) and radius to shape the outer frame of the tab content or tab titles. This helps reinforce structure in your design.

🔹 Padding

Adjust the inner spacing around the content inside each tab. Proper padding ensures that text and visuals do not appear cramped and enhances user experience.

These style options are designed to give you full control over the look and feel of your tabbed content, helping you create engaging, responsive, and brand-aligned sections on your Elementor-powered website.

Content

Background Type 

The Background Type setting in the Style tab allows users to customize the visual appearance of the content area within the Tabs widget. This option is essential for enhancing the overall design and user experience of your section.

Available Background Types:

1. Default: Keeps the default styling provided by your theme or Elementor.
2. None: Removes any background styling, resulting in a transparent background.
   Solid: Applies a single solid color as the background. You can choose any color using the color picker.
3. Double: Creates a double border effect around the content area, offering a more decorative look.
4. Dotted: Applies a dotted border around the content area for a stylized, subtle effect.
5. Dashed: Similar to dotted, but with dashed lines, giving a segmented appearance to the border.
6. Groove: Adds a 3D grooved border style, providing depth and visual interest.

Border Type

• Choose the style of border around the tab content.
• Options include None, Solid, Double, Dotted, Dashed, Groove, and more.

Border Radius

• Customize the curvature of the content box’s corners.
• You can enter different values for Top, Right, Bottom, and Left to create rounded or sharp corners.

Padding

• Controls the space inside the content box (between the content and the border).
• Set padding values individually for Top, Right, Bottom, and Left to manage spacing effectively.

Advanced Settings

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

That’s it! You’ve successfully learned how to configure the Tabs widget in Elementor to create customizable, interactive tabbed content on your website.

For any further assistance or inquiries, feel free to contact our support team!

Before setting up the Service Tabs widget, ensure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll have access to all free Elementor widgets, including the Service Tabs widget—at no cost! Additionally, you can explore both free and pro widgets by filtering the selection options.

Introduction

The Services Tabs widget displays services in a tabbed layout for easy navigation and better user experience.

Key Use Cases for the Services Tabs Widget in Elementor:

• Use the Services Tabs widget to showcase different services in an organized, tabbed format. 
• Customize the design and content to enhance user experience and make it easier for visitors to explore your offerings.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Service Tabs Widget?

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Service Tabs Widget from the list.
• Toggle the switch to enable it.
• That’s it! The Service Tabs Widget is now ready to use on your website.

How to Add the One Page Nav Widget in Elementor

1. Open the page where you want to add the Progress Bar.
2. Launch Elementor editor.
3. In the Elementor panel, search for “Services Tabs” .
4. Drag the Services Tabs widget to your desired section.
5. The Progress Bar widget will now be available for customization.

How to Configure the Service Tabs Widget in Animation Addons

• In the Elementor panel, search for the “Service Tabs Widget.”
• Drag and drop the widget into the section where you want to display your services.
• Use the available options in the Elementor panel to customize the tabs, such as titles, icons, content, and layout to match your site’s style and service offerings.

Your Service Tabs Widget is now ready to use! Here’s the interface where you can configure the settings and customize each tab to showcase your services in a clean, organized, and interactive layout.

Configuring Services Tabs Widget: A Step-by-Step Guide

Once the Services Tabs widget is added to your page, you can configure its settings under different tabs: Content, Style, and Advanced.

Content Settings

You will find two options: Tabs, Button, and Settings.

Tab

Under the Content section of the Service Tabs Widget, you’ll find several key configuration options to customize each tab effectively:

• Style: Choose between two available layout styles – Style One and Style Two – based on your design preference.
• Tabs Items:
  
  • Tab Number: Define the number of tabs you want to display.
  • Tab Title: Add a title for each tab to clearly represent the content.
  • Add Media: Insert rich content using either the Visual editor or Code view for advanced customization.

• Paragraph: Add descriptive text to provide context or details.
• Choose Image: Upload or select an image that complements your tab content.
• Link Option: Add a clickable link to direct users to more information or a specific page.

Once all your tabs are set up, make sure to adjust the image resolution to match your overall design theme for a polished and cohesive look.

Button

In the Button section of the Service Tabs Widget, you can fully personalize the appearance and behavior of your button to match your website’s style:

• Style Selection: Choose from 7 unique button styles to suit your design preference.
• Hover Effects: Select from 7 different hover styles to enhance interactivity.
• Text: Add your desired button label/text.
• Icon: You can either upload a custom icon or choose one from the icon library.

• Icon Position: Decide whether the icon appears before or after the text.
• Direction: Arrange the button layout in a horizontal (row) or vertical (column) orientation.
• Icon Spacing: Adjust the space between the icon and text for better visual balance.

These settings allow you to create a visually appealing and highly functional button that complements your service tabs seamlessly.

Settings

In the final part of the Content section, you’ll find the Settings panel, which allows you to manage how your Service Tabs display across different screen sizes.

You’ll have two Breakpoint categories available:

• Mobile Portrait: Targets screens below 767px, ensuring your content looks great on smaller mobile devices.
• Tablet Portrait: Targets screens up to 1024px, providing optimal layout for tablet users.

These settings help maintain a responsive and user-friendly experience across all devices by automatically adjusting the tab layout based on screen size.

Style Settings

Now, it’s time to enhance your Tabs, Image, Tab Title, and content by styling them to match your design preferences and improve the overall user experience.

Tabs

• You can adjust the tab width according to these settings to ensure optimal display across different devices.

Image

• In the image section, you’ll find customization options such as margin, border type, and box shadow, allowing you to adjust the tab width as needed for a refined design.

Tab Title

Tab Number

• Function: This field likely auto-generates or displays the number of the tab in order (e.g., Tab 1, Tab 2).
• Customization: There might not be much to change here unless it’s manually editable depending on the widget you’re using.

Color

• Purpose: Changes the color of the tab number or title text.
• Options: Clicking the color box opens the color picker, allowing you to choose a solid color, gradient, or even set it to transparent.

Typography

• Purpose: Lets you customize the font styling for the tab number or title.
• Options: Includes font family, size, weight (boldness), transform (uppercase/lowercase), style (italic/normal), decoration (underline, etc.), line-height, and letter-spacing.

Space (Slider)

• Function: Adjusts the spacing (likely the gap between the tab number/title and the tab content or between tabs themselves).
• Customization: Use the slider or manually input a number in the box to the right.

Title

• Function: Input field where you enter the actual name/title of the tab (e.g., “Cleaning Services,” “Pricing,” etc.).
• Tabs: There are two states:
  
  • Normal: Controls how the title looks normally.
  • Hover/Active: Controls how the title looks when hovered over or currently selected.

Color (under Title state)

• Function: Customize the color of the tab title based on the state selected (Normal or Hover/Active).
• Interaction: Clicking opens the color picker for both text and background options.

Typography (under Title state)

• Purpose: Customize font details specifically for the title under Normal or Hover/Active state.
• Options: Font family, size, weight, style, spacing, etc.

Border Type

• Function: Lets you apply borders around the tab title.
• Options: Choices may include none, solid, dashed, dotted, double, or groove.

Padding

• Function: Adds spacing inside the tab title area (between the content and the border).
• Values: Editable fields for Top, Right, Bottom, and Left.

Margin

• Function: Adds spacing outside the tab title area (between this tab and surrounding elements).
• Values: Editable fields for Top, Right, Bottom, and Left.

Content

• Color:
  Adjust the text color, background color, and active tab color to match your brand’s palette and improve readability.
  
• Padding:
  Control the space inside each tab element, ensuring your content has enough breathing room and a clean layout.
  
• Typography:
  Customize font family, size, weight, line height, and letter spacing to maintain consistency with your site’s overall text style.
  
• Margin:
  Set the space outside the tab elements, allowing you to control the distance between tabs and other elements on the page.

These options provide complete flexibility to fine-tune the appearance of your tabs, ensuring they look polished and consistent with the rest of your design.

Button

Button Margin

• What it does: Adds space outside the button.
• Input Fields: You can set values for Top, Right, Bottom, and Left independently.
• Link Icon (🔗): Click to apply the same margin to all sides simultaneously.

Typography

• Purpose: Adjusts the font style of the button text.
• Options: Includes settings like font family, size, weight (boldness), style (italic/normal), decoration (underline), line height, and letter spacing.
• Open Settings: Click the pencil/edit icon to reveal these options.

Icon Size

• What it does: If your button includes an icon, this slider controls its size.
• Adjust: Use the slider or type the value manually in px (pixels).

State Tabs: Normal | Hover

• Normal Tab: Style your button in its default state.
• Hover Tab: Change how the button looks when the user hovers their mouse over it.

You can toggle between them to apply different settings for each state.

 Text Color

• Purpose: Changes the color of the text on the button.
• Color Picker: Click to choose a color. You can use solid colors, gradients, or even transparent options.

Background Type

• Purpose: Set the background color or gradient of the button.
• Options:
  
  • Classic: Solid color or image background.
  • Gradient: Smooth color transitions.
    
• Click the color panel to reveal the picker or image upload tool.

Border Type

• Purpose: Determines the type of border around the button.
• Options: Default, solid, dotted, dashed, double, groove, ridge, etc.

Border Radius

• What it does: Controls the roundness of the button corners.
• Values: You can set custom radius values for Top, Right, Bottom, and Left.
• Linked editing: Use the chain icon to keep all corners uniform.

Padding

• Purpose: Adds space inside the button (between the border and the text/icon).
• Input Fields: Customize padding for Top, Right, Bottom, and Left sides separately.

Box Shadow

• Purpose: Adds a shadow around the button for a lifted or 3D effect.
• Settings (when expanded): Control shadow color, blur, spread, position (horizontal/vertical), and more.
• Click the edit icon (✏️) to configure shadow properties.

Advanced Settings

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

That’s it! You’ve successfully learned how to configure the Services Tabs Widget in Elementor to create customizable, interactive tabbed content on your website.

For any further assistance or inquiries, feel free to contact our support team!

Before setting up the Floating Elements, make sure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll have access to all free Elementor widgets, including the Floating Elements—at no cost! Additionally, you can explore both free and pro widgets by filtering the selection options.

Introduction

Floating elements stay fixed while scrolling, ensuring quick access to key actions or info without interrupting the layout.

Key Use Cases for the Floating elements in Elementor:

• Use the Floating Elements widget to display key components like navigation menus, call-to-action buttons, or notifications in a fixed position. 
• Customize the design and placement to ensure they stay accessible as users scroll, enhancing user experience without interrupting the page flow.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Floating Elements Widget?

• Go to Animation Addons → Elements in your WordPress dashboard.
• Locate the Floating Elements Widget in the list.
• Toggle the switch to enable the widget.
• That’s it! The Floating Elements Widget is now ready to use on your website.

How to Add the Floating Elements Widget in Elementor

1. Open the page where you want to add the Progress Bar.
2. Launch Elementor editor.
3. In the Elementor panel, search for “Floating Elements” .
4. Drag the Floating Elements widget to your desired section.
5. The Progress Bar widget will now be available for customization.

How to Configure the Floating Elements Widget

• In the Elementor panel, search for the “Floating Elements Widget.”
• Drag and drop the widget into the section where you want the floating effect to appear.
• Customize the widget settings using the available options in the Elementor panel, including animation style, direction, speed, and more to achieve your desired floating effect.

Configuring Floating Elements Widget : A Step-by-Step Guide

Once the Floating Elements widget is added to your page, you can configure its settings under different tabs: Content and Advanced.

Content Settings

You will find only one option there – WCF Floating Elements.

The Elements section within the WCF Floating Elements widget provides comprehensive control over the floating items you want to display on your webpage. Below is a breakdown of the configurable options available for each item: 

•  Choose Image: Allows you to upload or select an image from the media library to be used as the floating element.
• 2. Size: Lets you define the width and height of the floating image. This ensures consistent sizing across devices.

3. Offset: Provides control over the horizontal and vertical positioning of the element. You can fine-tune the placement by adjusting the offset values.

• 4. Z-Index: Sets the layering order of the floating element. A higher z-index value brings the element to the front over other page elements.
• 5. Live Animation: Enables dynamic visual effects for floating elements. Available animation styles include:

• Float Y – Vertical floating motion
• Float X – Horizontal floating motion
• Spin – Rotational movement
• Scale – Smooth zoom in/out effect
• Wiggle – Playful shaking motion

• 6. Enable Scroll Smoother: A toggle option to enable or disable smooth scrolling effects for the floating elements, making transitions appear more fluid.
• 7. Visibility Options: You can control the visibility of floating elements on various devices using the following toggles:

• Hide on Desktop
  
• Hide on Tablet Portrait
  
• Hide on Mobile Portrait

These options ensure that your floating elements display only on the intended devices, improving performance and user experience.

Advanced Settings

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

That’s it! You’ve successfully learned how to configure the Floating Elements widget in Elementor to create interactive, floating components on your website.

For any further assistance or inquiries, feel free to contact our support team!

Before setting up the Event Slider, make sure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll have access to all free Elementor widgets, including the Event Slider—at no cost! Additionally, you can explore both free and pro widgets by filtering the selection options.

Introduction

The Event Slider widget in Elementor displays events in a dynamic slider with customizable design, showing dates, descriptions, and images.

Key Use Cases for the Event Slider in Elementor:

• Use the Event Slider widget to showcase upcoming events in a dynamic, sliding format.
• Customize the design, transitions, and content to display event details like dates, descriptions, and images, ensuring an engaging and interactive user experience.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Event Slider Widget?

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Event Slider Widget in the list.
• Toggle it on to enable the widget.
• Now, the Event Slider Widget is ready to use!

How to Add Event Slider Widget in Elementor

1. Open the page where you want to add the Event Slider.
2. Launch the Elementor editor.
3. In the Elementor panel, search for “Event Slider.“
4. Drag the Event Slider widget to your desired section.
5. The Event Slider widget will now be available for customization.

How to Configure the Event Slider Widget

• In the Elementor panel, search for the “Event Slider Widget.”
• Drag and drop the widget into the desired section.
• Customize the event slider settings using the available options in the Elementor panel.

Your Event Slider Widget is now ready to use! Here’s the interface where you can configure the settings and personalize the slider for a dynamic and engaging event showcase.

Configuring Event Slider Widget : A Step-by-Step Guide

Once the Event Slider widget is added to your page, you can configure its settings under different tabs: Content,Style and Advanced.

Content Settings

You will find only three options there – Event Slider, Button and Slider Option.

Event Slider

• The Slider Option settings include – Event Style,Events item, choose image,name,date and description.

• The Slider Option settings provide various customization options to enhance your design. For the Event Style settings, follow these steps:

1. Event Item: Choose the event or item you want to customize. Each event will have its own unique settings.
2. Choose Image: Select an image for the event that visually represents it.
3. Name: Add the name or title of the event to make it easily identifiable.
4. Date: Set the date of the event to inform your audience about when it will occur.
5. Description: Provide a brief description of the event so users understand the details and what to expect.

Button

• The Button Section offers a variety of customization options to help you design visually appealing and interactive buttons. Below is a detailed explanation of each setting:

1. Style

Defines the default appearance of the button. You can customize:

• Background color
• Text color
• Border style
• Typography
• Padding & Margin

This allows you to align the button design with your website’s branding.

2. Hover Style

Controls the button’s appearance when a user hovers over it. You can configure:

Hover Style Categories

Within the Hover Style option, you’ll find a variety of pre-designed hover animation categories to enhance user interaction and visual appeal. These styles provide dynamic effects when users hover over the button.

Here are some of the available hover style categories:

• Divided – Splits the button visually during hover for a modern effect.
• Cross – Displays a cross-patterned hover animation.
• Cropping – Creates a crop-like visual transition on hover.
• Rollover Top – Applies a slide effect from the top of the button.
• Rollover Left – Slides the hover effect in from the left side.
• Parallel Border – Highlights the button with animated parallel borders.
• Rollover Cross – Combines rollover motion with a cross-direction animation.

These options are designed to give your buttons a unique and interactive feel. You can experiment with each style to find the one that best suits your design needs.

3. Text

Specifies the label displayed on the button. It should be clear and action-oriented (e.g., “Read More”, “Buy Now”).

4. Icon

Enables you to add an icon to the button from a predefined icon library. Icons enhance visual context and user comprehension.

5. Icon Position

Determines where the icon will appear in relation to the text. You can choose:

• Before the text
• After the text

This ensures better alignment based on design preferences.

6. Direction

Controls the layout direction of the icon and text. Options include:

• Row (default) – icon and text appear side-by-side.
• Column – icon appears above or below the text.

This is useful for different layout styles, especially in vertical designs.

7. Icon Spacing

Adjusts the space between the icon and the button text. You can define precise spacing to maintain visual balance and clarity.

Slider Option

The Slider Options panel provides comprehensive control over the behavior, design, and navigation of your slider. Below is a detailed explanation of each setting available:

1. Slider Styles

Choose from 10 unique slider styles to control the overall look and layout of your slider. Each style comes with a predefined design configuration that can be further customized.

2. Autoplay Button

Enables a play/pause button for the slider, allowing users to manually control autoplay functionality.

3. Autoplay Delay

Specifies the time interval (in milliseconds) between automatic slide transitions.
Example: Setting it to 3000ms results in a 3-second delay between slides.

4. Autoplay Interaction

Determines whether autoplay will pause on user interaction (e.g., mouse hover or touch).

• Enabled: Autoplay pauses when the user interacts.
• Disabled: Autoplay continues regardless of user interaction.
  

5. Allow Touch Move

Enables swipe functionality on touch devices.

• Useful for enhancing mobile responsiveness and user experience.

6. Loop

Allows the slider to loop continuously from the last slide back to the first, creating a seamless carousel effect.

7. Mousewheel Control

Enables users to navigate through slides using the mouse wheel — particularly useful for full-page slider experiences.

8. Animation Speed

Controls the transition speed (in milliseconds) between slides.
Example: A setting of 500ms results in a half-second slide animation.

9. Space Between

Sets the amount of spacing (in pixels) between each slide. This helps manage layout density and visual clarity.

10. Navigation

Enables or disables navigation arrows (previous and next) on the slider.

• Enabled: Users can manually switch slides using arrows.
• Disabled: Arrows are hidden.

11. Previous Arrow Icon

Select a custom icon for the previous navigation arrow, allowing alignment with your site’s theme or style.

12. Next Arrow Icon

Select a custom icon for the next navigation arrow, similar to the previous arrow setting.

13. Pagination

Displays pagination indicators (e.g., dots or progress bars) to show the current slide position within the total slides.

14. Pagination Type

Choose the style of pagination, such as:

• Bullets
• Fraction
• Progress Bar Each type offers a different visual representation of the slider’s progress.

15. Direction

Defines the slide transition direction:

• Left to Right (default for horizontal sliders)
• Right to Left (ideal for RTL languages or custom flows)

Style Settings

Once your Event Slider Widget is added and configured, the next step is to enhance the visual presentation of your content. 

Images

This section lets you style the event image for a polished and responsive visual display.

• Size: Adjust the image dimensions to maintain consistency across all event slides.
• Border Type: Select a border style (solid, dashed, dotted, etc.) to enhance the image frame.
• Border Radius: Define the roundness of the image corners for a smooth or sharp look, depending on your design needs.

These settings allow you to present your event images in a visually consistent and attractive manner.

Content

Customize the container that holds the title, description, and other event information.

• Background Type: Choose a solid color, gradient, or image background to enhance visual depth.
• Padding: Control the inner spacing between the content and the container’s edges for better alignment and spacing.
• Margin: Adjust the outer spacing around the content area to create breathing space from other elements.

Individual Text Elements within Content:

• Title
  
  • Color: Set the text color to match your brand or design palette.
  • Typography: Customize font family, size, weight, line height, and letter spacing.
  • Margin: Fine-tune spacing above and below the title for visual balance.
    
• Date
  
  • Color: Define the date’s text color for clarity and emphasis.
  • Typography: Adjust typography settings to match your style guide.
  • Margin: Set spacing to separate the date from surrounding elements.

• Description
  
  • Color: Control the description text color for optimal readability.
  • Typography: Modify font details to ensure legibility and aesthetic harmony.
  • Margin: Adjust spacing around the description to maintain layout consistency.

Button

Customize the action button within the slider for a compelling call-to-action.

• Adjust text styling, padding, border, colors, hover effects, icon settings, and spacing to create a visually engaging and functional button.

 Slider Navigation

This section lets you personalize the Previous and Next arrows.

• Customize icon styles, size, color, background, positioning, and hover effects to align with your design aesthetic.

Pagination

Configure the look of pagination elements such as dots or progress bars.

• Control shape, size, color, spacing, and active/hover states to ensure intuitive navigation across slides.

Advanced Settings

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

That’s it! You’ve successfully learned how to configure the Event Slider widget in Elementor to create dynamic and engaging event displays on your website.

For any further assistance or inquiries, feel free to contact our support team!

Before setting up the Content Slider Widget, make sure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll have access to all free Elementor widgets, including the Content Slider Widget—at no cost! Additionally, you can explore both free and pro widgets by filtering the selection options.

Introduction

The Content Slider widget displays dynamic content with customizable design and transitions.

Key Use Cases for the Content Slider in Elementor:

• Use the Content Slider widget to showcase dynamic text, images, or promotions in an interactive sliding format.
• Customize the layout, transitions, and design to create an engaging experience without disrupting the page flow.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Content Slider Widget?

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Content Slider Widget in the list.
• Toggle it on to enable the widget.

Now, the Content Slider Widget is ready to use!

How to Add the Content Slider Widget in Elementor

• Open the page where you want to add the Content Slider.
• Launch the Elementor editor.
• In the Elementor panel, search for “Content Slider“.
• Drag the Content Slider Widget to your desired section.

The Content Slider Widget will now be available for customization.

How to Configure the Content Slider Widget in Animation Addons

Enable the widget, create a new page, set a title, choose the Elementor Full Width template, and publish it. Adjust options as needed.

• In the Elementor panel, search for the “Content Slider Widget.”
• Drag and drop the widget into your desired section.
• Add your slides and customize each one’s content, layout, and animation using the available settings. 

Content Settings

These options allow you to customize the slider functionality, manage content visibility, and fine-tune the display settings for optimal user engagement.

The settings panel provides two primary configuration options: Content Slider and Slider Option. 

Content Slider

The Content Slider widget offers various configuration options to adjust the layout, content, and media elements for an engaging and responsive presentation. Below is a breakdown of the key settings available in the Content Slider section:

Max Width

• Description: Defines the maximum width of the content slider, allowing you to control the slider’s overall size within its container.
• Use Case: This setting helps maintain consistency across different screen sizes and ensures that the slider does not stretch beyond the desired width.
• Options: You can set the width in pixels or percentage, depending on your design needs.

 Align Items

• Description: Controls the vertical alignment of the content inside each slide.
• Use Case: Aligning items ensures that the content within the slider is positioned properly, whether centered, top-aligned, or bottom-aligned.
• Options: Available alignment options include Top, Center, or Bottom.

Two Category Content Type