(Update, August, 2019: Unfortunately, this plugin is no longer supported for the newest versions of WordPress, so the slider isn’t showing up here. However, if you use an older version of WordPress, the instructions below will still work. I am now using Noo Before After, instead. It gives the same results. )
Yesterday, I published a blog post which included the Ultimate Before After Slider, by ForeverThemes. I loved the difference that adding the slider made to the post! When I started to write, I had two photos, side by side, for comparison. One had been processed in Lightroom CC. The other had Lightroom CC’s Dehaze Filter added to the processing. The difference between the photos was obvious but not very compelling.
When I added the Ultimate Before After Slider, though, you could feel the difference. Now, you could see both photos, one on top of the other. As you slid back and forth, you saw more or less of each photo. Before I had applied the Dehaze Filter, the photo had looked foggy. Now, it was as though I had covered the first photo with a translucent film of haze. As you moved the slider from left to right, the film disappeared, just like magic!
Here’s another example of the slider in use:
And this is what the photos look like without the slider. The difference between them is harder to detect.
Boats tied up along the Keizersgracht Canal in Amsterdam, in early light. This is the original photo that I took in Amsterdam three years ago. It was a Raw file with the Camera Standard profile added to it. In other words, it was what I would have shot, if I had shot a JPEG file.
Boats tied up along the Keizersgracht Canal in Amsterdam, in early light. This is the same photo, processed in Lightroom CC.
Which do you prefer?
I will definitely be using this slider in the future!
HOW TO USE IT:
However, the one thing that was missing was a good online explanation of how to use it, for a non-web-designer like me! I had it installed by my wonderful web designers, SmellyCat Productions. Then, I set about to figure it out by myself.
Here are a few hints that should help shorten your learning curve:
- First, you place your cursor where you want the photos to appear in your blog post. (I’m working on the Visual page, not the Text page.)
- Next, you click on “Before After Slider” in the Toolbar above the blog post you are writing.
In the window that pops up, you can choose to add a caption for the photo. In my case, I felt like the caption would stand out better if I wrote it in italics, but I realized that I couldn’t easily change it here. Remember… I’m not a web designer!!!
I first had to finish creating the slider. To do that, you click on the OK button, and the proper code will be inserted into your blog.
This is when you can select the caption, included in the code, and make it italics, by clicking on the italics “I” in the Toolbar. By the way, I tried adding a link, to a larger version of the final photo, to the caption field. It didn’t work. So, I got around that problem by adding the link to a sentence that I placed right after the “[/uba]”. I wrote that in italics, as well, to make it seem like it was part of the caption! 😉 - Now, you need to add the photos. Place your cursor in the space before “[/uba]”.
- Click on Add Media above the Toolbar and navigate to the photo you want to use as the After photo. Select it, and it will be inserted.
- Click on Add Media again and choose the photo you want to be the Before photo. For my website, I needed custom sizes for the photos, so, after the photos were inserted, I clicked on each one and resized it to the custom size that works best on my blog. The sizes do need to match each other.To see what you’ve created, click on the Preview button in the Publish panel. If you’re like me, you’ll probably find ways you want to tweak the post. You can always go back and continue to work on it. When you’re finally satisfied, go ahead and click on the blue Publish button. Be sure to allow a few minutes to sit and admire what you have created with the help of the Ultimate Before After Slider! 👏
Leave a reply