The “Before After Widget” allows you to showcase image comparisons for free in WordPress Elementor websites. This widget is perfect for displaying transformations, edits, or product comparisons by letting users slide between two images to see the differences. You can customize the slider handle, labels, and styling to seamlessly match your site’s design.
Let’s explore the features of the “Before After Widget” below.
Elementor Before After Widget Tutorial Video
Add a Free Before After to Elementor
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Before After“
- Hover over the widget in the search results and click install
- Add your “Before After” widget to any Elementor Page
General Settings in Elementor Before After
Before Image
Choose the before image.
Before Image Size
Choose the before image size.
- Medium Large
- Large
- Medium
- Thumbnail
- Full Size
- 1536*1536
- 2048*2048
- WooCommerce Thumbnail
- WooCommerce Single
- WooCommerce Gallery Thumbnail
After Image
Choose the after image.
After Image Size
Choose the a after image size.
- Medium Large
- Large
- Medium
- Thumbnail
- Full Size
- 1536*1536
- 2048*2048
- WooCommerce Thumbnail
- WooCommerce Single
- WooCommerce Gallery Thumbnail
Enable Slider Interaction in Editor
This will allow to interact (drag handle) with the slider inside the Elementor editor.
Direction
Choose the direction of slider.
- Horizontal
- Vertical (Pro)
Delay Start
Set the delay start in milliseconds.
Trigger
Set the trigger for before after transition.
- Click
- Hover (Pro)
Display
Set the transition icon.
- Handle
- Arrow (Pro)
Show Labels (Pro)
Show or hide labels on before and after image.
Before Label (Pro)
Type text to show as before label.
After Label (Pro)
Type text to show as after label.
Initial Position
Set the initial position of slider in percentage.
Elementor Before After Slider Styling
Set the slider width and slider background.
Elementor Before After Handle Styling
You can set the width, height, background, border, and radius of handle.
Elementor Before After Arrows Styling
You can customize the arrow size, background and spacing.
Elementor Before After Labels Styling
Set the labels vertical positioning, vertical and horizontal offset, label typography, padding, background color, label color, border, and border radius.
Usage Examples of Elementor Before After
Here are some live use cases for the Before After Widget.
Free Before After for Elementor with Car Exterior.
Free Before After for Elementor with Facial Transformation.
Thank you for using the Before After Widget for Elementor! With its interactive slider and smooth transition effects, this is the best Before After Widget for Elementor, perfect for showcasing image comparisons in an engaging way. If you have any questions or need assistance, feel free to reach out. For more use cases and examples visit the live demo on our website.