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 sitting 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 EAE – 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:
Step 1: Install & Activate Plugin
In order to use EAE – After / Before Image Compare Widget, you have to first install and activate 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 just 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, and 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 Setting tab 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 can also 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
Live Demo
Check here the demo setup of the Image Compare widget.