Before and After Photo in WordPress

Many times we have found web sites where we see a rather curious effect with images.

Normally these images show a before and after, it is a comparison between two images.

It is really easy to achieve this effect on our website, we will simply use a plugin that will help us achieve it.

There are several plugins that offer this tool, but we are going to focus on the best one known, and free.

In this case we are not going to teach any premium plugin, although we will make a list at the end, because they really all do the same.

Before and After Photo in WordPress

The first thing we are going to do is go to our Dashboard in WordPress, in the Plugins → Add New menu, we look for “Twenty20 Image Before-After plugin”, install and activate.

Now we just have to go to a page or a post in which we want to insert our new effect for the images.

We will see a new button above our editor, when we click, we will open the media library.

We choose the two photos that we are going to use for our effect and we click on the Insert button.

Once the Insert button is pressed, a window with different options will appear.

We can change the behavior of the effect, add text, offset, direction of the slider, and more options.

The result we get.

Sidebar

We can also use the Twenty20 image widget to show the before and after photo in the WordPress sidebar.

In the WordPress menu, go to Appearance → Widgets, and place the Twenty20 Slider widget in the widget area of the sidebar.

As we have seen, using this effect is very simple, and it gives an image of professionalism to our website.

We are going to put you a list of other plugins that may also interest you, but most of them are premium.

• Multipurpose Before after Slider Plugin (Premium)
• Noo Before After WordPress Plugin (Premium)
• Before After Slider WordPress Plugin (Premium)
• Smart Before After Viewer Plugin (Premium)
• Before & After Image Slider For Visual Composer (Premium)
• Before And After WordPress Plugin Images (Free)

Tips for a Better Before and After Slider

• Use photos with the same size and framing. The effect works best when both images have the same dimensions and the subject is in the same position.
• Keep the light and angle consistent so the visitor compares the change, not the photo conditions.
• Compress your images before uploading. Two large images in one slider can slow the page down.
• Add alt text to both photos, for example “Kitchen before renovation” and “Kitchen after renovation”.
• Label the two sides with the text options of the plugin so nobody has to guess which one is which.

Before You Install the Plugin

Twenty20 Image Before-After has not been updated for a while and its page on WordPress.org shows it as tested only up to an older WordPress version. It may still work, but before installing it on a live site, make a backup and test the slider on a page that is not public. You can check the “Last updated” and “Tested with” fields on the plugin page in the WordPress directory at any time, and do the same for any plugin in the list above.

When Is This Effect Useful?

• Photographers showing retouching or editing work.
• Interior designers, renovation and construction businesses.
• Beauty, hair, skin care and fitness services with visible results.
• Cleaning, gardening and restoration services.

If you sell services with visible results, this is a simple way to show them. Only use real photos of your own work.

If you have not created your website yet, you may be interested Create Your Website With WordPress.

Building a portfolio? Browse our WordPress themes for photographers. You may also like: How To Add A Custom URL To WordPress Gallery Images.