Digital Learnings,  Lifestyle

How to add a Before After Image Plugin in WordPress

In this article I am going to show you how to add a plugin in WordPress, which shows your before and after pictures, in an amazing way. This is perfect for bloggers, which are marketing an idea (for example their presets), small businesses and even people, who are just creative and are not afraid to show it.

But what is this? And how can you get it for your website. Just keep on reading, I will give you all the information you need.

What is a Before and After Picture Slider?

This is basically an element of your website, which stacks two images on top of one another and uses an interactive slide to reveal any change. The reader can drag the slider from left to right, in order to see the before and after picture.

How to add a Before and After Picture Slider?

Of course, there are also a few other tools, which also offer you such a photo slider. However, some of the Plugins that I found, were not recently updated, which is for me always a bad sign. With the fast changing technologies, I highly doubt that there is a Plugin, which has been developed in the past and it is compatible to the current version of your websites.

Tipp: Always pay attention to the last updated version of the Plugins and how many people are actually using it. This is always a good indication, whether or not the Plugin is popular among fellow website owners.

You can easily download one of the many options from the “Plugin” Menu in your WordPress. You simply have to go to your admin account in WordPress, select Plugins and click on “Add New”.

Twenty20 Image Before-After

For this article, I would focus on elaborating more on the Twenty20 Plugin, as it can be used in multiple ways and it is not bound to a specific Page Builder Tool. Once I have walked you through all points, I will give you a few alternatives that you can use and are free of charge.

Before installing the tool, make sure that this tool is actually compatible with your site version. You can check this under „More Details“.

how to install a before after image plugin in WordPress

Once you have clicked on „More details“, this window pops up. You can see on the right side the versions with which this tool is compatible and what are the minimum requirements for it to function.

more details to the before after plugin in WordPress

Once you checked the pre-requisites of this Plugin, you can click on „Install Now“ and once it is installed, activate it.

If you are not sure, which version is your WordPress, you can check it. Click on the WordPress Sign in the upper left corner of your WordPress account. Then click on “About WordPress” and you can see the current version. Mine is WordPress 5.4.

where to see if the version of your wordpress is compatible with the plugin

As we already checked the pre-requisites, it shouldn’t be a complete surprise that if I try to use the Plugin, it will not work for my page editor, as the version of my WordPress is not supported.

In the case, in which the version is supported, this Plugin can be used without any additional Page Builder and can be implemented directly either through the Gutenberg or the Classic Editor.

Gutenberg Editor in WordPress

The Gutenberg Editor was introduced after the WordPress 5.0 update, which changed the classic content editor to a block editor.

Option A

Unfortunately, in this version, the Twenty20 Plugin does not have its own block so far. But there is a quick workaround – using the shortcode block option.

using a shortcode block instead of the plugin in wordpress

Once you click on it, you will have the chance to enter the code line that will create the before and after image slider. Remember – this is only relevant in the case that your WordPress version is supported by the Plugin.

shortcode line of the plugin in WordPress

Here are the 2 code lines that you will need to make magic happen. Do not forget to put them in brackets [ ]:

twenty20 img1=”3899″ img2=”3628″ direction=”horizontal” offset=”0.4″ align=”none” width=”100%” before=”Before” after=”After” hover=”false”

And here is the breakdown of all the values:

  • img1 – the ID of the Before Picture
  • img2 – the ID of the After Picture
  • direction – defines the direction of the slider – horizontal or vertical
  • offset – it should be set between 0.1 and 1
  • align – determines, how the picture will be aligned: left, right or none
  • width – width of the picture – either in percentage or pixels
  • before – add a caption of the before picture
  • after – add a caption of the after picture
  • hover – whether you want to move the slider on mouse movement over the picture. The value can be either true or false.

If you do not know the ID of your picture, you can easily find it out. Go to your Media Library. Click on the picture you want to be your before picture. Once it is opened, in the link you can find its ID.

Where to see the ID of an image

Make sure to preview your article, so that you can check, if the Plugin is working for your website or not.

Option B

As my WordPress version is too high to support the Option A approach, the shortcode is not functioning for my website. So, if you have the same problem as I do, don’t worry, here is the solution for it.

Instead of writing the 2 code lines from above in the shortcode block, you can use this one line to create your image slider:

twenty20 img1=”3970″ img2=”3969″ offset=”0.5″

And do not forget the brackets [].

Classic Editor in WordPress

If you are still using the Classic Editor, once you have installed the Plugin, you can see a new icon at the top of your Text Editor, once you start creating a new post. As I am not using the Classic version, you can find some screenshots of how it should look like under this link from WordPress.

Once you have chosen which pictures you would like to add and you have edited all the settings, you can click on the “Insert Shortcode” button at the bottom of the page. The shortcode can be also corrected at a later point of time. Just follow the way as described for the Gutenberg Editor.

Elementor Page Builder in WordPress

Nevertheless, I would like to show you, how I managed to install this Plugin, eventhough my WordPress version is not supported. I downloaded, installed and activated the “Elementor Page Builder”. You can find it the same way as all other Plugins – Plugins > Add New > Search (for Elementor) > Install Now > Activate.

how to install another page builder in WordPress

Once this Plugin is installed, you will have an alternative option to the standard content editor offered by WordPress. You can then freely choose with which one you would like to work. Go to Posts > Add New.

how to switch the content editor for WordPress

If you choose to work with Elementor, it will take you to a completely new page editor builder layout. It gives you the option to add different elements and has a direct preview of how it would look like, if you add a certain element.

How to use the Elementor plugin in WordPress

Search for the Twenty20 Plugin that you activated.

where to find the before and after image plugin in WordPress

Once it appears in the available elements menu, drap and drop it to the space you would like to have your image slider.

How to add the before and after images in the plugin

On your left side, you can see the content pannel, which you know can fill in. Upload your before and after picture, choose the text you would like to appear, the direction of your slider and if the slider should move on hover.

Once you have defined these fields, you can click on the Preview Button (next to the green button “Publish”) and see how it will look like. As this is a Plugin not specifically designed for Elementor, you will not get a direct preview but a codeline as in the screenshot above. This shortcode line is unfortunately not editable.

how will your post look like when published

If you do not prefer to work Elementor, then you also have the option to switch to your old editor. Make sure to make the switch early enough in your post, otherwise mixing the Page Buildors might cause you a lot of re-work.

Other Before and After Picture Slider Plugins

1. Before and After Comparison Slider for Elementor

As the name implies, this is a specific Plugin for the Elementor Page Builder. You can also find it the same way as shown above for Twenty20. Depending on which tool features you would like to use, you can decide between a free or a paid version. The Premium version will set you back 15$ per year.

a free alternative to the tool

You can see that this Plugin is specific for Elementor. As a result, you can get a direct preview of how your change will look like. Unfortunately, the features, which were free for Twenty20, are not available here. You have to purchase the Premium version of the Plugin, in order to get access them.

direct preview of how it will look like

If you want to see more information on this Plugin, click here.

2. Before + After Image Slider for Divi

This Plugin is also free but it is designed to work with a Divi Page Buildor. This means that it will not work for Elementor or the standard page buildors of WordPress.

an alternative option of the tool
More details of the tool

If you want to learn more about this Plugin, click here.

I hopre you enjoyed reading this article and that you have learned a trick or two. I am looking forward to seeing how creative you guys and girls are going to be with it! Let me know what you think in the comments!

xxx Curly

Leave a Reply

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