fbpx

Need Help?

Here are some good places you cant start.

Whats New?

Get updated about all the good stuff!

google-maps-widget
age-verification-widget-for-elementor
digital-business-card-templates-for-elementor

Before After

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.

  1. Go to Unlimited Elements Widget Library
  2. Search in the search bar for “Before After
  3. Hover over the widget in the search results and click install
  4. Add your “Before After” widget to any Elementor Page

General Settings

1

Before Image

Choose the before image.

2

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
3

After Image

Choose the after image.

4

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
5

Enable Slider Interaction in Editor

This will allow to interact (drag handle) with the slider inside the Elementor editor.

6

Direction

Choose the direction of slider.

  • Horizontal
  • Vertical
7

Delay Start

Set the delay start in milliseconds.

8

Trigger

Set the trigger for before after transition.

  • Click
  • Hover
9

Display

Set the transition icon.

  • Handle
  • Arrow
10

Show Labels

Show or hide labels on before and after image.

11

Before Label

Type text to show as before label.

12

After Label

Type text to show as after label.

13

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.

Download is just a click away

Get instant access to tons of Elementor goodies, completely FREE!

Hurray!

You got FREE access to the worlds leading widgets for Elementor page builder!