Do you want to showcase after/before images of a new and old product on your website? Before and after images can be useful to let your visitors easily differentiate and make a comparison between the two same types of products.
There can be different ways to let your visitors make a comparison between the products on your website. One such way can be to use a table for making comparisons. Where each column of the table represents products with their features, and you can easily make a decision based on your choice.
But in this tutorial, we are not talking about a table-based comparison (For this, you can check out a complete tutorial on the Comparison Table), we will be implementing a visual comparison between two images.
Generally, for creating a before and after image effect, people use photoshop to edit the images. But the After / Before Image compare widget of Elementor Addon Elements lets to achieve this with ease.
The After / Before Image compare widget allows you to compare two images interactively. There is a slider that can be easily moved, left to right, and upside down for a better viewpoint. Here is the output of what we are trying to achieve:
Key Takeaways
- Create interactive before/after image sliders without coding.
- Use After/Before Image Compare widget in Elementor.
- Customize layout, labels, slider direction, icons, and styling.
- Ideal for portfolios, case studies, and product transformation showcases.
Steps to Create a After/Before Image Comparison in Elementor
Step 1: Install & Activate Plugin
To use the After / Before Image Compare Widget, you have to first install and activate the Elementor Addon Elements Plugin.
Step 2: Add EAE – After/ Before Image widget
To begin with, first create a page or a template where you want to add the widget, and edit the page with Elementor. Then, drag and drop the EAE – After / Before Image widget in Elementor. You will see an element appear with default settings.
Step 3: Configure the Element
Head over to the content tab; here you can add element to the widget.
Images
Under the image section, you can select the comparison style, like horizontal or vertical. Here you can add an icon as a separator, select an icon from the icon library, or you can upload an SVG. Next, you can upload your preferred before and after images. Adjust the size of the images. Then modify the label of both the images
Step 4: Styling the Images
Now, under the style tab, we can add more styling to the element. Click on the General Settings tab to give styling to the icon and the separator. Here you can specify the icon size and color. You can adjust the widget and alignment for the separator and give it a suitable color.
The next tab under the style setting is for the Label. Under the Label setting tab, you get a setting to adjust the position, typography, color, padding, and margins for the label text.
Final Output
Here is the final result of the image compare
FAQs About Before/After Image Comparisons in Elementor
Do I need Elementor Pro to use this widget?
No, you can use the After/Before Image Compare widget with the free version of Elementor and the free Elementor Addon Elements plugin.
Can I change the slider from horizontal to vertical?
Yes, the widget lets you switch between horizontal and vertical comparison styles.
Can I add labels like “Before” and “After”?
Absolutely! You can customize the label text, position, and style.
Do I need to use Photoshop to create the image effect?
No, this widget eliminates the need for any image editing software.
Is this feature mobile responsive?
Yes, the widget is responsive and allows styling for different devices.
Conclusion
That’s it! You’ve just created an eye-catching before/ after image comparison in Elementor—without writing a single line of code. This simple visual tool not only boosts user interaction but also enhances trust and storytelling on your site. Ready to showcase your transformations? Try it out and wow your visitors today!
Check here the demo setup of the Image Compare widget.
