With this widget, you can display before-and-after images in a smooth and interactive way. Users can easily slide a divider to compare two images.
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.
- This is a pro widget, so make sure you have either WDesignKit pro license or have activated The Plus Addons for Elementor pro key in your WDesignKit account.
- Make sure you’ve downloaded the Wavey Before After widget.
How to Activate the Wavey Before After Widget?
Go to
- WDesignKit → Widgets.
- Search the widget name and select Elementor as the Page Builder.
- Click on the Download icon.

How to Use the Wavey Before After Widget in Elementor?
Add the Wavey Before After widget to the page.
Content
From the Content Style dropdown, you can select different styles for the content.

From the Wave Style dropdown, you can select different styles for the wave.
In the Image for Before section, you have to add the before image.
In the Label for Before section, you can add a label for the before image.
Then in the Description section, you can add a description for the before image.
Similarly from the Image for After section, you have to add the after image.
You can add a label for the after image in the Label for After section.
Then in the Description section, you can add a description for the before image.
Then from the Style tab, you can further customize the style of the Wavey Before After.