With this widget, you can easily show before-and-after images on your website. Users can move a slider to compare the two images smoothly. The Before After Slider widget is easy to customize and helps you display image comparisons in a clean and engaging way.
Required Setup
- Elementor FREE Plugin installed & activated.
- You need to have the WDesignKit plugin installed and activated.
- Make sure you’ve created an account and logged into it.
- Make sure you’ve downloaded the Before After Slider widget.
How to Activate the Before After Slider Widget?
Go to
- WDesignKit → Widgets → Browse Widgets.
- Search the widget name and select Elementor as the Page Builder.
- Click on the Download icon.
Use Cases
Use this widget when you want to clearly show the difference between two images in an interactive and easy-to-understand way.
Best For:
- Product Comparisons: Show how a product looks before and after an update, improvement, or feature change.
- Image Editing & Design Work: Perfect for displaying photo edits, retouching, color corrections, or design transformations.
- Website Redesigns: Compare old and new website designs to highlight improvements.
- Makeovers & Transformations: Ideal for beauty, fitness, home renovation, or interior design results.
- Service Results: Show the impact of your services, such as cleaning, restoration, or repair work.
- Marketing & Case Studies: Visually explain results and success stories with clear before-and-after comparisons.
- Landing Pages: Grab user attention by showing changes or improvements instantly.
- User Engagement: The slider interaction encourages users to move the handle and explore the comparison.
- Clean & Professional Websites: Best for websites that want a simple, modern, and clear way to present visual changes.
How to Use the Before After Slider Widget in Elementor?
Add the Before After Slider widget to the page.
Layout
You can select a pre-defined style from the Style dropdown.
Note : From this tab, based on the style you selected, you will see different options to add the content.
Before Section
In the Label Text section, you can add text to the before image.
In the Select Image section, you can add a label for the before image.
After Section
In the Label Text section, you can add text to the after image.
In the Select Image section, you can add a label for the after image.
Slider Icon
From the Select Icon of Before Icon section, you can choose either an icon or an SVG for the before image.
From the Select Icon of After Icon section, you can choose either an icon or an SVG for the after image.
Then, from the Style tab, you can further customize the style of the Before After Slider.