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:
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.
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.
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.
Engagement and Interest
People are naturally curious. Before-and-after images engage visitors and keep them interested in exploring your website further.
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.
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:
Go to Plugins → Add New → Upload Plugin.
Choose the zip file you downloaded, upload, and then click Activate.
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.
Go to Unlimited Elements in the WordPress Dashboard
Got to Widgets -> Creative Widgets
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.
Before Image
Upload or select the image that represents the "before" state.
After Image
Upload or select the image that represents the "after" state.
Enable Slider Interaction in Editor
Allows testing the widget within the editor to prevent accidental adjustments.
Direction
Choose between horizontal or vertical orientation for the before-after slider.
Delay Start
Enables lazy loading of the slider on the page for improved performance.
Trigger
Choose between triggering the slider with a click or hover action.
Display
Select the visual elements for interaction, either a handle or arrows.
Show Labels
Toggle to display labels for each image, providing additional context.
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!
