How to Create WordPress Before After Slider [Easy Guide]

Updated on December 3, 2024 by Editorial Team

Want your website visitors to instantly see the amazing results you deliver? A WordPress before-after slider is the perfect way to do just that!

Displaying your work prominently on your website allows customers to see the value of your services.

Whether you are a makeup artist, a home renovation expert, a landscaper, a fitness coach, or even a web designer, a before-and-after slider lets your clients instantly grasp the impact of your services or products.

A before and after image comparison slider improves user experience by giving users an interactive and engaging way to visualize transformations – unlike static images and carousels.

The good news is that adding this dynamic element to your website can be incredibly easy without the need to code!

In this article, we’ll explore some stunning examples of before and after image sliders and walk you through the simple steps to add one to your own website.

Table Of Content

What is a WordPress Before After Slider?

A WordPress before and after slider is a tool that allows users to compare two images interactively by sliding over them. It enables a before and after comparison of images, showcasing transformations, improvements, or changes in a dynamic way.

Using a before and after slider is great for your website because it enhances user engagement and provides a clear visual representation of your work.

It’s much more engaging than static images and can highlight the effectiveness of your services or products, making it easier for potential clients to see the value you offer. Plus, with various slider styles, you can customize the slider to match your site’s aesthetic.  

Examples of Best WordPress Before After Sliders

Looking for inspiration to create beautiful image comparison sliders?

Here are some examples of how you can use the before-after slider WordPress widget from The Plus Addons for Elementor to add stunning image comparison elements to your website. 

1. Dental Website Horizontal Before and After Comparison

This demo uses a horizontal slider to showcase the dramatic results of a teeth whitening procedure.

View Live Demo

2. Vertical Elementor Before and After Slider

This example uses a vertical slider to capture transformative skin improvements achieved through dermatological treatments. 

View Live Demo

3. Car Wash Service Before After Image

This demo uses an opacity slider to illustrate the dramatic difference a professional car wash can make. 

View Live Demo

Want to add a carousel to your website? Here are 8 Best Carousel Slider Widgets to choose from. 

How to Create WordPress Before After Slider [Step-by-Step] 

The easiest way to create stunning sliders like the ones showcased in the above demos is by using The Plus Addons for Elementor plugin. It offers a dedicated Elementor Before After Image Comparison slider widget that provides you with three unique slider formats to choose from horizontal slider, vertical slider, and opacity slider. 

It comes with several customization options to ensure your sliders perfectly match your brand identity. 

Here’s how to get started:

Step 1: Install and Activate the Plugin 

First, you need to install and activate The Plus Addons for Elementor plugin. Navigate to your WordPress dashboard and go to Plugins > Add New. In the search bar, type “The Plus Addons for Elementor” and press Enter. Locate the plugin from the search results and click Install Now. 

Once installed, click Activate to enable the plugin on your website.

Step 2: Activate the Widget

After activating the plugin, you need to enable the Before After Slider widget. Go to The Plus Addons Settings in your WordPress dashboard. 

Click on Widgets. Scroll through the widget list or use the search bar to find the Before After widget. Toggle the switch to activate the widget. 

Click Save to apply the changes.

Activate before after widget how to create wordpress before after slider [easy guide] from the plus addons for elementor

Step 3: Drag and Drop the Before After Widget 

Now, it’s time to add the Before After Slider to your page. Create a new page or open an existing one where you want to add the slider. Click on Edit with Elementor to open the Elementor editor.

In the Elementor sidebar, search for “Before After”. Drag and drop the Before After widget into your desired section on the page.

Add the before after slider to your page how to create wordpress before after slider [easy guide] from the plus addons for elementor

Step 4: Customize the Content 

Once you’ve added the widget to your page, you have to add and customize the content. Here you can add the slider photos, slider titles, and other content elements. 

In the widget settings, navigate to the Content tab. First, select your preferred slider format from the available options: horizontal, vertical, or opacity sliders. 

Add and customize the content how to create wordpress before after slider [easy guide] from the plus addons for elementor

Under the Image for Before option, click Choose Image to upload or select your first slider photo representing the “before” state. Similarly, under the Image for After option, upload or select the second slider photo showcasing the “after” state. 

Ensure that both images are of high quality and are consistent in dimensions for the best visual comparison and to avoid compatibility issues. 

Now, to provide context, enter a slider title in the designated Label for Before and Label for After fields. 

Confused about which image formats to use for your slider images? Here’s a comparison between the popular JPG vs AVIF image formats.

Step 5: Customize Styling Options 

To make your before and after image slider truly stand out and align with your website’s design, you can experiment with various styling options offered by the widget. 

From the Style tab, adjust the Alignment to position your slider within its container. You can align it to the left, center, or right based on your design preference. 

You can also use the Full Width toggle to make the slider span the entire width of its parent container. This is perfect for creating immersive, edge-to-edge comparisons.

Toggle the Mouse Hover option to allow the auto slider’s separator line to move with the mouse cursor. 

When enabled, users can see the transition dynamically as they hover over the slider. If disabled, users will need to click on different parts of the image to move the separator line.

Customize the style how to create wordpress before after slider [easy guide] from the plus addons for elementor

You can also customize the separator line. Enable the Separator Line toggle to style the line that divides the before and after images. 

Customize its color, thickness, and style to match your website’s aesthetics. For the Opacity slider, you will not be able to use this option. 

For a more dynamic effect, navigate to the On Scroll View Animation section to enable and customize the animation effect. This can include fade-ins, slide-ins, or other dynamic animations that make your slider more engaging as users scroll through your page.

Enable and customize the animation effect how to create wordpress before after slider [easy guide] from the plus addons for elementor

If you want to make any global customizations, across all your widgets you can do this from the Advanced tab. 

Step 6: Preview and Publish 

Once you are happy with your WordPress before and after slider, Click the Preview Changes button in Elementor to see how your slider looks and behaves on the live site.

Preview how to create wordpress before after slider [easy guide] from the plus addons for elementor

Make any changes if necessary and then Publish it to go live. 

Are the images on your website blurry? Here’s a step-by-step guide on how to fix blurry images in Elementor. 

20 checklist for wordpress site maintenance how to create wordpress before after slider [easy guide] from the plus addons for elementor
Do you Manage WordPress Websites? Download Our FREE E-Book of 20+ Checklist for WordPress Site Maintenance. ​



    Wrapping Up  

    A well-designed and responsive slider can elevate your website’s user experience and give you an engaging way to communicate the value of your services or products. 

    Adding this powerful functionality to your WordPress website doesn’t require any coding expertise or complicated setup. With plugins like The Plus Addons for Elementor, you can easily integrate beautiful and functional before-after sliders with just a few clicks. 

    The Plus Addons for Elementor is a lightweight Elementor addon that ensures your website remains fast and efficient while providing a wide range of customization options to match your brand aesthetic. 

    Beyond the before-after slider, The Plus Addons for Elementor offer a vast library of over 120 widgets to improve your Elementor editing experience. 

    Check out the Complete List of 120+ Widgets and Extensions here. Start building your dream website without coding!

    From dynamic content displays and interactive elements to advanced galleries and WooCommerce integrations, you’ll find everything you need to create a visually appealing and highly functional website. 

    With its user-friendly interface, design flexibility, advanced features, and performance optimization, The Plus Addons empowers you to build a truly engaging online presence.

    FAQs on WordPress Before After Slider

    What are the benefits of using a Before After Slider in WordPress?

    Using a slider plugin improves the user experience on your website by creating interactive sliders & gallery comparisons. Visitors can easily view transformations, which increases engagement and trust. A before-after slider is a great way to showcase your work, making it easier for potential clients to understand the value you provide.

    Is Carousel and Slider the same?

    No, a carousel and a slider are not the same. While both display images, a responsive slider focuses on smooth transitions between images, allowing users to control the flow. Whereas a carousel typically shows multiple images in a continuous loop, relying more on user scrolling to navigate through the content sequentially.

    How to add an image slider in WordPress without a plugin?

    Using an image slider plugin is the easiest way to add a before and after slider. However, you can also add it manually. This would require you to completely code it using HTML, CSS, and JavaScript. You can create a slider by writing a CSS code for styling and JavaScript for functionality.

    Are Before After Sliders mobile-friendly in WordPress?

    Yes, Before After Sliders are mobile-friendly. You can easily adjust image sizes to ensure they display correctly on all devices. Additionally, widgets from The Plus Addons for Elementor are designed for mobile optimization, ensuring that your before and after sliders look great and function smoothly on all devices and across screen sizes.

    Related Blogs