Image Comparison

Introduction

The Image Comparison widget in Elementor lets users compare two images with a draggable slider, perfect for before-and-after visuals or product comparisons.

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.

Prerequisit

• Elementor
• Animation Addons for Elementor

Note: Ensure that the Animation Addons for Elementor plugin is installed and activated. Then, enable the Image Comparison toggle from the plugin settings.

How to Activate a Button widget ?

To activate the Image Comparison widget, navigate to Animation Addons → Elements in the admin dashboard. Then, select the Widget tab, search for the Image Comparison widget, and toggle it on. The widget will be activated immediately.

How to Configure the Image Comparison Widget in Animation Addons?

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

Note: Selecting full Elementor elements in a template unlocks all widgets and customization options, boosting design flexibility and functionality. 

Navigate to the Edit with Elementor option to access the editor interface. 

After selection, the Elementor panel appears with all tools and customization options.

Click the “+” icon to add a container, then select the appropriate column structure and layout.

In the Elementor Editor, click the ‘+’ icon to add a section. Search for the “Image Comparison”, then drag and drop it into the desired section of the page. Configure the widget settings under the available tabs to customize it as needed.

Here’s the interface where you can configure the settings and customize the Testimonial Widget across various tabs. 

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

As you can see, I have set two images that appear professional and are related to a company meeting. 

• You’ll also find an option to enable a button if you want to display the captions on the images. If you prefer not to show the captions, simply disable the button.

• Set the button in the center between both images. If you don’t want to use the button, you can skip it by turning it off.
• Finally, set the alignment to “middle.”But you can set it according to your preference.

—————————————————————————————————————————–

Style Settings

Here, you will find options to make your content more stylish, including settings for the image, handler, caption, and button. Let’s see how they work-

Image

• I don’t think i need to change the dimensions of the picture, so i skip it. You can adjust your choice. 

• But I worked on adjusting the border, so I customized all the border settings.

Handler

In the handler, you need to style the circle located in the middle of the two images. 

• I have set the line color to #EAD9D9, left the background type unchanged
• Set the border type to dashed, and the border width to 3, as I feel this fits perfectly with my design. 
• I did not set the border color, but I applied a border radius of 3.

You can adjust all the settings according to your own preferences and design requirements. 

Caption

• In the caption section, I have adjusted the color and made other changes that I felt were necessary. You can customize these settings according to your own design preferences.

Button

• I made similar adjustments in the button section as well, customizing it according to my design preferences. You can adjust it further to match your style and needs.

Here is the final output after completing all the customizations. Feel free to adjust any settings according to your preferences to further enhance your 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 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!