5 Easy Steps To Make A Before And After Slider in WordPress

  • Post category:WordPress
  • Post last modified:March 17, 2024

GinAngieLa.com independently selects and reviews products & services. When you purchase through links on our site, we may earn a commission, at no extra cost to you. Learn more.

If you’re into digital art, in particular photo manipulations, your masterpieces may often start out with a single image. When finished, the final artwork looks nothing like the original anymore! A Before / After image comparison is a great way to show off your talent on your artist website. But how do you make a Before and After slider in WordPress? That’s what I’m going to show you in this tutorial!

How do I make a before and after slider?

how do you add sliders?

To make a Before and After Slider in WordPress, these are the 5 steps you'll need to follow:

    Add a header to begin generating the table of contents

    what is a before and after image slider in wordPress?

    A Before and After Image Slider is a tool that allows you to show the image you started out on and the final result after digital editing or other modifications. In order to be able to create an image comparison slider in WordPress, you’ll need some sort of Image Before / After plugin.

    Regardless of what type of Before and After Slider Widget you’re eventually choosing, there are some things that all online before/after image sliders for WordPress typically have in common:

    • They are responsive and touch-friendly. The widgets recognize what device your website visitors are using (desktop computer, tablet, or smartphone) and adapt accordingly in size and layout. The slider reacts to touch on mobile and tablet devices, and, of course, on touch-sensitive computer screens.
    • They are customizable. All Before / After plugins offer some degree of customizability. What distinguishes paid addons from free plugins is that the Pro versions are customizable to a higher degree than the free basic versions.
    • They offer Live Preview. Before-After Viewer WordPress Plugins, as well as Before and After Image Comparison Sliders for Elementor, feature Live Preview functionality, allowing you to see what the slider looks like as you’re configuring it in your WordPress site. 

    Step-by-Step WordPress Tutorial

    How to make a Before and After Slider in WordPress

    STEP 1: Download & install Ultimate Addons for Elementor

    For this tutorial, we’ll be using the Before / After Slider by Ultimate Addons for Elementor

    So far, there’s no Before & After slider widget in Elementor directly; you’ll need to use third-party Elementor plugins. The image comparison slider by Ultimate Addons for Elementor is super-functional, and you can get it from the UAE website.

    To be able to use Ultimate Addons for Elementor, you’ll need to have Elementor installed on your WordPress site. In case you don’t have Elementor yet, you can download the free version here.

    Below, you can have a live look at the Before/After image slider that we’re going to create. You can try it out online. Just grab the slider with the mouse and move it left and right to get an idea of how the before and after image comparison slider for Elementor is working!

    STEP 2: Drag & drop the UAE Before/After Slider Widget onto the canvas

    With both Elementor and Ultimate Addons for Elementor running on our WordPress install, we’re first going to add a new post (or page) and then click on the Edit with Elementor button in the WP editing window.

    This will take us to a new editing interface for Elementor, with the Elementor sidebar on the left. 

    → Elementor Tutorial For Beginners

    First of all, you’ll need to scroll down to the Ultimate Addons sections in the Elementor sidebar. From there, grab the UAE Before After Slider Widget with the mouse, and drag & drop it onto your canvas.

    If you cannot find the widget in the sidebar, you can simply type ‘before after slider’ into the top search bar, and it’ll pop up! 

    How do you make a before and after slider?
    Drag & drop the UAE Before / After Slider Widget on the canvas.
    STEP 3: Upload your Before image

    Once you’ve dropped the widget on the canvas, you’ll see the image comparison slider on the web page and the widget settings open in the Elementor sidebar. So everything’s ready for us to start making our before and after slider! 

    Before / After Image Comparison Slider

    The first thing we’re going to do in the Before After Slider Editor is upload our Before image.

    All you need to do to upload the picture is click on the Before Photo icon and choose the image.

    Once you’ve clicked in the field, you’ll be directed to your Media Library. From there, you can either pick an image that you’ve already uploaded to the library, or upload a new one from your computer by clicking the Upload Files button.

    Then simply click Insert Media and you’ll see a thumbnail of your Before image in the widget editor. A look over to the live preview shows you the Before image inside the comparison slider in full size. 

     

    The default settings are pretty well chosen by Ultimate Addons, and you probably won’t have to make any changes to them. However, you can still change the size of the displayed image under Image Size, and edit the text shown under the Before Label.   

    If you don’t want to upload the Before picture to your website directly, you can enter the URL of the image that you want to show by clicking on the dropdown under Before Image Source at the very top. This will show the linked image in the comparison slider. 

    STEP 4: Upload your After image

    Next, we’re going to move on to the After tab. Here, you simply repeat what we’ve done above in the Before tab: choose an image to upload as your After pic, change Image Size, After Label, and After Image Source, if needed. 

    And that was already it about adding the After image to your image comparison slider!

    Now, we’re going to move down to the Orientation tab. 

    One thing you’ll want to change here is the Overlay Color. By default, the overlay color is set to a transparent black. 

    This makes your images appear much darker than they are in reality, as you can see in the screenshot right below.

    To show your images as bright and beautiful as they are, all you need to do is click on the color icon next to Overlay Color and either click Clear or delete the color code [ rgba(0, 0, 0, 0.5) ] in the color picker popup window.

    With that done, your Before / After images will be displayed in their original form! 

    And these were already the basic steps you need to follow to make a Before and After Slider! In the next step, we’ll be doing the fine-tuning…

    Basic steps you need to follow to make a Before and After Slider.

    how do I make a before and after slider that is down to my liking?

    STEP 5: Customize the look of the Before / After image comparison slider
    How do I make a before and after slider that is down to my liking?

    Moving on to the Comparison Handle tab, we can make changes to the look of the image comparison slider itself, in terms of color, thickness, circle width and radius, and size of the two little triangles within the circle. 

    Handle Initial Offset at the very top lets you choose to what extent you want your Before image to show  when the page is first loaded. Leaving the offset value at 50 will reveal half of the Before image and half of the After image.

    For the example, I’ve set the offset value to 43, which reveals slightly more of the After image when the page loads first. I’ve also made slight changes to the other options in the Comparison Handle tap. These are the settings I’ve used for the live demo at the top of the tutorial. 

    Clicking the Style tab in the top menu of the widget editor will bring us to even more customization options for the Before/After image slider.  

    In the Before/After Label tab, you can decide when you want the before and after labels to show. The dropdown lets you choose between Hover Only, Normal Only, and Hover & Normal

    For the example, I’ve picked Hover & Normal, which will show the labels at all times. 

    You can change the typography of the labels, font color and background color, and the padding of the text within the labels. 

    Under Alignment, you can set the labels to appear either at the top, in the center, or at the bottom.

    There are so many customization options to make a Before and Bfter slider that completely matches your taste!

    Play around with all of them to see what suits you best. 

    How do I make a Before and After picture in Photoshop?

    how do I make a before and after slider if I get stuck on a problem?

    How do I make a before and after slider if I get stuck on a problem?

    Last but not least, you’ll always have the possibility to get some help from Ultimate Addons directly, in case you got stuck somewhere! 

    Going back to the Content tab and clicking on Helpful Information will give you the option to either watch a Getting started video about the Before and After Slider Widget, or to read their Getting started article

    Ultimately, you’re never left alone if you encounter any type of issue! 

    That was it from me about making a Before and After slider in WordPress!

    Related: → Elementor For Photographers And Artists – QUICK & EASY Page Builder

    Down below you see two live examples of what the UAE Before and After Slider Widget can look like.

    Before After
    Ultimate Addons Before / After Slider with Horizontal Orientation and Move on Hover enabled.
    Before After
    Ultimate Addons Before / After Slider with Vertical Orientation, Move on Hover disabled, and a modified look of the Comparison Handle and Labels.

    The image is Carnivore from my Lip Service Collection

    The Complete Elementor Toolkit for New Design Possibilities.

    Ultimate Addons for Elementor

    The World’s leading WordPress Website Builder.

    elementor icon

    I hope I was able to answer your question about ‘How do I make a Before and After slider’ in this tutorial and you could take away some useful tips! If you liked this post, feel free to share it with other artists who wish to show a Before / After image comparisons on their website! 💝

    How Do I Make A Before And After Slider? [Ultimate Addons for Elementor]
    How Do I Make A Before And After Slider? [Ultimate Addons for Elementor]
    How Do I Make A Before And After Slider? [Ultimate Addons for Elementor]
    How Do I Make A Before And After Slider? [Ultimate Addons for Elementor]
    How Do I Make A Before And After Slider? [Ultimate Addons for Elementor]
    AngieG. – The Person behind the Pictures
    HI Y'ALL!  
    My name is Angie and I’m a self-taught digital artist. On this blog, I am sharing my knowledge and educational resources to help you build a website for your art. My desire is to show you that you don’t need to be a coder to create a website. All you need is the desire to learn and the get-up-and-go to get started!
    LET'S CONNECT:
    SHARE THIS POST:

    This Post Has 2 Comments

    1. Barbara

      Good info. Lucky me I found your website by accident, I bookmarked it!

      1. User Avatar
        GinAngieLa

        Hi Barbara, lucky me I have you among my readership (:

    We ♥ comments and appreciate the time that readers spend to share ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.