How in WordPress to show photos before and after

How the effect works before and after

Usually people use Photoshop to create images before and after. This is one photo that shows the effects before / after, and you can add it as a static image to your website.

Functional photo slider is an interactive way to show 2 different versions of a similar image in full size. You can move the slider to compare both images side by side.

Let’s see how easy it is to show photos before and after in WordPress.

Displaying photos before and after on a page or in a post

First you need to install and activate the free Twenty20 Image Before-After plugin .

After activation, you must create or edit a page / record where you plan to display the image before and after. Now click the ” Add Twenty20″ button  above the text editor.

pictures before and after in wordpress

It will open the Media Library of WordPress in the pop-up window. From here you need to select two images for the slider before and after.

pictures before and after in wordpress

After selecting the images, click the ” Insert” button  .

The plugin then displays the text fields to add text over the photos before and after. You can also add the width for the slider, the offset value, the slider direction, and so on.

pictures before and after in wordpress

After that, click the ” Insert Short Code” button to add photos before and after on the page / record.

Displaying photos before and after in the sidebar

You can also use the Twenty20 image widget to display the photos before and after in the sidebar (in the sidebar) of WordPress. Just go to the ” Appearance”  section of the ” Widgets  section of the WordPress administration panel, and then drag the Twenty20 Slider widget to the sidebar widget area.

pictures before and after in wordpress

 

The Twenty20 Slider has similar settings for the photos before and after, as described earlier in this guide. You can select 2 images one at a time in the widget’s settings to create a photo slider before and after.

See Also:What to see when buy premium wordpress themes

Now look at how your site looks before and after pictures.

pictures before and after in wordpress

When users move the slider in relation to each image, another image becomes visible. Users can move the slider all the way to the right or left to see the image before and after. As users move, the before and after marks will automatically disappear.

pictures before and after in wordpress

This plugin works great with popular WordPress page designers, such as Beaver Builder and Elementor.

Comments

2018-08-29T22:36:19+00:00Categories: Content Marketing, Guide, WordPress|