fbpx

Need Help?

Here are some good places you cant start.

Whats New?

Get updated about all the good stuff!

custom-cursor-elementor
google-maps-widget
age-verification-widget-for-elementor

How to Create a Before After Slider for Elementor

A Before After widget is a visual tool often used to showcase the transformation or comparison of two images. It allows users to slide between two images to see the changes or differences. This type of slider is commonly used in websites, applications, or presentations to demonstrate the impact of edits, enhancements, or alterations.

In this article, we’ll show you step-by-step how to make a Before After Slider in Elementor using the Unlimited Elements Comparison widget. It’s an easy way to add an interactive slider that lets visitors compare two images effortlessly on your Elementor-built website. Let’s get started!

Why Add a Before After Slider to Your Elementor Website?

Adding before and after comparison images to a website can be a powerful way to showcase transformations, improvements, or the effectiveness of a product or service. Here are some reasons why it can be beneficial:

1

Demonstrate Results

For products or services that involve transformations (like weight loss, home renovations, skincare, etc.), showing before and after images can illustrate the effectiveness of what you offer.

2

Build Credibility

Genuine and authentic before-and-after images can build trust and credibility among your audience. Real-life examples of success stories can persuade potential customers or clients.

3

Clear Communication

Sometimes, it's easier to show than tell. Images can effectively communicate the benefits or improvements that a product or service provides, especially when words might not do justice.

4

Engagement and Interest

People are naturally curious. Before-and-after images engage visitors and keep them interested in exploring your website further.

5

Decision Making

For many customers, seeing tangible results can help them make a purchasing decision. It gives them a clearer idea of what to expect.

6

Storytelling

These images can tell a story of progress, success, or change, which can emotionally connect with your audience.

Ultimately, before-and-after images can be a powerful tool in persuading, informing, and engaging your audience.

Without no further a due let’s jump in and get started making our first before after comparison slider.

Step #1: Install and activate Unlimited Elements Pro for Elementor

Before getting started you will need to purchase Unlimited Elements pro from the link below to access the before after widget.

Then follow these steps:

1

Go to Plugins → Add New → Upload Plugin.

2

Choose the zip file you downloaded, upload, and then click Activate.

3

Once activated, you’ll need to enter your license key.

Now that you have the plugin installed, it’s time to start creating your before after slider.

Step #2: Adding the before after widget to your Elementor website

To build a before-after comparison slider you need to install the Before After widget from the Unlimited Elements Widget library. 

1

Go to Unlimited Elements in the WordPress Dashboard

2

Got to Widgets -> Creative Widgets

3

Hover over the Before After widget and click install

After that navigate to the page or post you want to edit and the  Before After widget to your desired layout 

Step #3: Creating the before and after comparison layout in Elementor

Now it’s time to add the before and after images for comparison and confiugre the settings of the slider to suit your website needs. 

1

Before Image

Upload or select the image that represents the "before" state.

2

After Image

Upload or select the image that represents the "after" state.

3

Enable Slider Interaction in Editor

Allows testing the widget within the editor to prevent accidental adjustments.

4

Direction

Choose between horizontal or vertical orientation for the before-after slider.

5

Delay Start

Enables lazy loading of the slider on the page for improved performance.

6

Trigger

Choose between triggering the slider with a click or hover action.

7

Display

Select the visual elements for interaction, either a handle or arrows.

8

Show Labels

Toggle to display labels for each image, providing additional context.

9

Initial Position

Set the starting position of the handle or arrows as a percentage on the image.

Step #4: Styling the Slider

Now you can start styling the widget and set the slider width, and slider background.

Step #5: Styling the Handle

To finish up you can adjust the styling settings of the handle per your website style.

Usage Example

Below is an example of what you can achieve using the Before After widget. You can interact with the handle to see a live demo of the widget.

Wrapping it Up

Congratulations! You’ve successfully implemented an eye-catching Before-After slider on your Elementor-built website. Now, your visitors can effortlessly explore and compare images, adding an interactive touch to your content. Experiment with different settings, trigger options, and styles to make the slider uniquely yours. Keep delighting your audience with engaging visual narratives, and don’t hesitate to explore more widgets to enhance your Elementor experience. Cheers to creating a more captivating and dynamic online presence!

View More Related Blog Posts

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!