You know those funky before and after image sliders you find on seriously cool websites? They look like a single image that changes when you move the slider left or right.
In this tutorial I show you how to easily add one like it to your WordPress website.
If your two images are prepped you can add a comparison slider to your WordPress website in under five minutes.
You’ll need to set up your WordPress page using Elementor to get this fantastic effect. You’ll also need another tool and the correct setup.
These are the tools you need to add a before and after image slider to your WordPress website.
- You’ll need the self-hosted version of WordPress, not wordpress.com.
- Page Builder Framework.
- Entirely optional, but a really great theme for WordPress users who rely on page builders like Elementor and Beaver Builder.
- You’ll need the free version of Elementor for this tutorial.
- The PAFE Piotnet plugin.
- This plugin enables you to add image comparison sliders to your website.
To add a comparison slider you’ll need to activate Elementor for a page or post.
If you’re not sure how to activate Elementor, don’t stress. Read my How To article.
This is the tool that lets you add a little piece of image slider magic to your WordPress website.
You’ll find other plugins that offer similar functionality, but the PAFE Piotnet plugin doesn’t just offer you an image comparison slider; it comes with a toolbox full of amazing Elementor addons, including the most powerful form builder I’ve ever seen for WordPress.
Read my article on how to install a WordPress plugin if you’re not sure how to, then take the following steps to ensure the before-after image comparison slider is active.
You can see the before-after image slider in action on this page: test.minibigthing.com/comparison-image-slider.
Let’s jump in and create a before and after slider.
Add the slider widget
You need two images for this to work.
People usually use similar images with slight changes to indicate a before and after difference. However, you can use two completely different images.
For the purpose of this tutorial I downloaded a free image of a fillet of salmon from Unsplash and converted it to a black-and-white image, giving me two copies of the same image: one full color, one black and white.
That’s it! You’ve got a sweet before and after image slider on your WordPress website.
But let’s look at the other settings available through the PAFE Piotnet plugin.
Change the before image visibility level
There seems to be a bug with this setting because nothing happens when I change the percentage.
I’ll address this once I can figure out what the problem is. For now, just leave it be. It’s not a deal breaker.
Change the orientation
Instead of making the slider move left and right (horizontal) you can make it move up and down (vertical).
The slider now moves up and down.
Edit the before / after labels
Although the labels, Before and After seem sufficient to me, perhaps you have a case where you’d like to change it to something else.
Remove the overlay
The slider comes with an overlay which activates the moment you hover over it.
If you’d like to present the before and after images in their purest form, remove the overlay.
It’s easy to do.
Slider movement options
The slider comes with some additional settings. These are safe to ignore, but for the purpose of this tutorial we’ll touch on them.
Move slider on mouse hover
This option moves the slider wherever you hover your mouse pointer over the image.
Be careful with this option. It could irritate users.
Move with handle only
The before and after image slider has a line that separates the two images in the slider. When this option is deactivated, the line can only be moved by way of the button in the center of the line.
If the option is active, you can move the line by grabbing it with your mouse pointer.
Click to move
This option places the slider wherever you click on the image.
Although you’ll find dedicated before and after image slider plugins for WordPress, the PAFE Piotnet plugin comes with a fantastic before and after slider widget, making it a must have plugin if you’re serious about adding some awesome to your website.
What makes the Piotnet plugin even better is the fact that it comes with many more widgets ready to take your Elementor plugin to the next level. Not to mention the insanely powerful form builder.
Get the PAFE Piotnet plugin and take your WordPress Elementor website up a notch.