Menu
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.
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.
Inside Your WordPress Dashboard, Click On Piotnet Addons In The Sidebar.
Ensure The Before After Image Comparison Slider Option 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.
Drag The PAFE Before After Image Comparison Slider Widget From The Left Hand Sidebar Into An Elementor Section.
The Before After Image Comparison Slider Once It’s Dragged Into An Elementor Section.
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.
In The Left Hand Sidebar, Click On The Image Box For The Before Image.
Click On The Upload Files Option.
Click The Button That Reads Select Files.
Choose The Image You’d Like To Use As The First Slider And Click The Open Button.
Wait For The Image To Upload, Then Click The Insert Media Button.
The Before Image Is Now In Place Inside The Slider.
In The Left Hand Sidebar, Click On The Image Box For The After Image.
Click On The Upload Files Option.
Click The Button That Reads Select Files.
Choose The Image You’d Like To Use As The Second Slider And Click The Open Button.
Wait For The Image To Upload, Then Click The Insert Media Button.
The After Image Is Now In Place Inside The Slider.
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.
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.
Instead of making the slider move left and right (horizontal) you can make it move up and down (vertical).
In The Left Hand Sidebar, Under The Options Tab For The Slider, Click On The Orientation Dropdown And Choose Vertical.
The slider now moves up and down.
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.
Here’s how…
Inside The Box For The Before Label, Highlight The Text, Before, And Change It.
Inside The Box For The After Label, Highlight The Text, After, And Change It.
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.
Simply Switch Off The Overlay Option In The Left Hand Sidebar.
The slider comes with some additional settings. These are safe to ignore, but for the purpose of this tutorial we’ll touch on them.
This option moves the slider wherever you hover your mouse pointer over the image.
Be careful with this option. It could irritate users.
Activating The Move Slider On Mouse Hover Option Causes The Slider To Move To Wherever You’re Hovering On The Image.
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.
The Move With Handle Only Option Removes The Ability To Move The Line Other Than With The Button In The Middle Of The Line That Separates The Two Images.
This option places the slider wherever you click on the image.
The Click To Move 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.
