Before and After Photo in WordPress

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.
Twenty20 Image Before-After plugin WordPress
Now we just have to go to a page or a post in which we want to insert our new effect for the images.
Add Before and After Photo effect

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.
Select images for Twenty20 Image Before-After

Once the Insert button is pressed, a window with different options will appear.
Twenty20 Image Before-After plugin options
We can change the behavior of the effect, add text, offset, direction of the slider, and more options.

The result we get.Add Before and After Photo effect example


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.
Twenty20 Image Before-After plugin widget sitebar

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)

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

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This