“Before After Widget” helps you to compare before and after images of your projects. You can easily compare images of any kind with the help of this creative widget. You can effortlessly enhance your visual storytelling using this widget.
You can use this widget to upload two images and effortlessly generate an interactive slider that allows audience in comparing and contrasting the distinctions between the visuals. It is ideal for presenting before-and-after images of decorations or transformations, perfect for promotions, products, or services. You can customize the widget with its customization and styling options.
Let’s look at each of the options in the “Before After Widget” below.
Install Before After Widget for Elementor #
This widget requires Unlimited Elements PRO version installed and activated on your WordPress website.
- 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 #
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
Delay Start
Set the delay start in milliseconds.
Trigger
Set the trigger for before after transition.
- Click
- Hover
Display
Set the transition icon.
- Handle
- Arrow
Show Labels
Show or hide labels on before and after image.
Before Label
Type text to show as before label.
After Label
Type text to show as after label.
Initial Position
Set the initial position of slider in percentage.
Before After Slider Styling #
Set the slider width and slider background.
Handle Styling #
You can set the width, height, background, border, and radius of handle.
Labels Styling #
Set the labels vertical positioning, vertical and horizontal offset, label typography, padding, background color, label color, border, and border radius.
Usage Examples #
Here are some live use cases for the Before After Widget.
