4 Simple Steps To Create After/Before Image Comparison With Elementor

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 types of products.

There are different ways to allow your visitors to make a comparison between 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.

However, in this tutorial, we are not discussing 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. However, the After/Before Image Compare widget of Elementor Addon Elements allows you 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 an 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 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 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 elements 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 comparison.

Need help with widget settings or troubleshooting? Check out the detailed documentation for the After/Before Image Compare widget.

FAQs About Before/After Image Comparisons in Elementor

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!

Explore the live demo of the After/Before Compare widget to see it in action.