How To Add A Comparison Image Slider To WordPress

Add fancy before and after image sliders to your website using this amazing plugin.

By Joe
WordPress
Elementor, Piotnet
Dec 16, 2020
Jan 18, 2021

Get WordPress tutorials and online marketing tips delivered to your digital door

My articles are FREE to read. But when you buy through my referral links I earn commission. You don't pay more but I get rewarded for my hard work. It's like a salesman in a shop showing you the goods. Thanks for your support. I really appreciate it.

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.

Video

If your two images are prepped you can add a comparison slider to your WordPress website in under five minutes.

https://www.youtube.com/watch?v=YQEksPfEzaw

The setup

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.

The tools

These are the tools you need to add a before and after image slider to your WordPress website.

WordPress.
- 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.
Elementor.
- 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.

The page

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.

The plugin

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 — Ensure The *Before After Image Comparison Slider* Option Is Active.

The result

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

Drag The Pafe Before After Image Comparison Slider Widget From The Left Hand Sidebar Into An Elementor Section — 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 — The *Before After Image Comparison Slider* Once It’s Dragged Into An Elementor Section.

Upload images

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.

Before image

Click On The Upload Files Option — Click On The *Upload Files* Option.

Click The Button That Reads Select Files — Click The Button That Reads *Select Files*.

Choose The Image You'd Like To Use As The First Slider And Click The Open Button — 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 — Wait For The Image To Upload, Then Click The *Insert Media* Button.

The Before Image Is Now In Place Inside The Slider.

After image

Choose The Image You’d Like To Use As The Second Slider And Click The Open Button — Choose The Image You’d Like To Use As The Second Slider And Click The *Open* 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.

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).

In The Left Hand Sidebar, Under The Options Tab For The Slider, Click On The Orientation Dropdown And Choose 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.

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.

Here’s how…

Inside The Box For The Before Label, Highlight The Text, Before, And Change It — 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 — Inside The Box For The After Label, Highlight The Text, *After*, And Change It.

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.

Simply Switch Off The Overlay Option In The Left Hand Sidebar.

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.

Activating The Move Slider On Mouse Hover Option Causes The Slider To Move Wherever You're Hovering On The Image — Activating The *Move Slider On Mouse Hover* Option Causes The Slider To Move To Wherever You’re Hovering On The Image.

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.

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 — 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.

Click to move

This option places the slider wherever you click on the image.

Conclusion

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.

Comments are closed.