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 you add sliders?
To make a Before and After Slider in WordPress, these are the 5 steps you'll need to follow:
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 WPDeveloper’s 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!
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!
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…
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
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?
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.
The image is Carnivore from my Lip Service Collection.
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]](https://ginangiela.com/wp-content/uploads/2020/12/How-Do-I-Make-A-Before-And-After-Slider-1-683x1024.jpg)
![How Do I Make A Before And After Slider? [Ultimate Addons for Elementor]](https://ginangiela.com/wp-content/uploads/2020/12/How-Do-I-Make-A-Before-And-After-Slider-Ultimate-Addons-for-Elementorpin4.jpg)
![How Do I Make A Before And After Slider? [Ultimate Addons for Elementor]](https://ginangiela.com/wp-content/uploads/2020/12/How-Do-I-Make-A-Before-And-After-Slider-Ultimate-Addons-for-Elementorpiin5.jpg)
![How Do I Make A Before And After Slider? [Ultimate Addons for Elementor]](https://ginangiela.com/wp-content/uploads/2020/12/How-Do-I-Make-A-Before-And-After-Slider-Ultimate-Addons-For-Elementor-pin3-683x1024.jpg)
![How Do I Make A Before And After Slider? [Ultimate Addons for Elementor]](https://ginangiela.com/wp-content/uploads/2020/12/How-Do-I-Make-A-Before-And-After-Slider-Ultimate-Addons-For-Elementor-pin2-683x1024.jpg)
Good info. Lucky me I found your website by accident, I bookmarked it!
Hi Barbara, lucky me I have you among my readership (: