Image Comparison

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!