How to Create a Before and After Image Slider
Have you ever wanted to show before and after photos on your WordPress website? There are many reasons why these kinds of images might make sense for your blog.
Perhaps you blog about crafts, fashion, makeup techniques, exercise, home remodeling, or even plastic surgery.
Whatever you blog about, it’s likely you can create a compelling before and after photo that your visitors would be likely to share.
This is an example of the before and after of a color corrected photo of food.
This is an example of “revealing” a clear headshot of yours truly from a pixelated version.
After reading this post and watching the short video, you’ll be able to easily create before and after image sliders on your own website just like the ones shown above.
Create Before and After Images
The first thing you’ll need to do is create the before and after images. This can be accomplished easily using your phone for before and after images of makeup, food or fashion but you also might need to do a little image editing.
I like to keep things as simple as possible, that’s why I recommend these image creation/editing solutions:
- Canva.com (see exactly how I use Canva here)
- Pixelmator for Mac (an easier and less expensive alternative to Photoshop)
Creating a Before and After Image Slider in WordPress
The first thing you need to do is install and activate the Before After Image Slider Lite plugin. For more details, see my step by step guide on how to install a WordPress plugin.
This tutorial covers the usage of the free plugin. There’s also a Pro version available which comes with direct support and additional features like more modes, Visual Composer support, setting an initial value, linking images and more.
Let’s get to it.
I hope this tutorial helped you learn how to set up and use before and after image sliders in WordPress. You might also want to check out my growing list of Resources and Tools used in many of my projects.