Skip to main content

How to Show Before and After Photo in WordPress (with Slide Effect)

Do you want to show the before and after photos on your website? A before and after photo can be useful to display side by side comparison of two identical images with minor differences. In this article, we will share how to easily show before and after photo in WordPress.

How to show before and after photo in WordPress

How Does the Before and After Photo Effect Work?

Normally people use Photoshop to create a before and after image. It’s a single photo that shows before / after effects, and you can add it as a static image on your WordPress website.

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

Let’s take a look on how to easily show before and after photo in WordPress.

Showing the Before and After Photo in WordPress

First thing you need to do is to install and activate the Twenty20 Image Before-After plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to create or edit a page/post in your WordPress admin area where you want to show the before and after image. Now, click on the Add Twenty20 button above the text editor.

Add twenty20 button

It’ll open the WordPress Media Library in a popup. From here, you need to select two images for the before and after slider.

Before after images

Once the images are selected, click on the Insert button.

Next, it’ll display the text fields to add content on top of the before and after photos. You can also add width for the slider, offset value, slider direction, and more.

Insert before after photo shortcode

After that, click on the Insert Shortcode button to add the before and after photo in your WordPress page.

You can also use the Twenty20 image widget to display the before and after photo in your WordPress sidebar. Simply go to Appearance » Widgets section in your WordPress admin, and then drag the Twenty20 Slider widget in your Sidebar widget area.

Sidebar widget for before and after photo

The Twenty20 Slider widget has similar settings for the before and after photo as we shared above in this guide. You can select the 2 images one by one in the widget settings to create the before and after photo slider.

Now, you can visit your website to see the before and after photo in action.

Before and after photo

As the users slide the handle towards each image, the other image will become visible. Users can take the slider all the way to the right or the left to see the full before and after image. As the users slide the before and after labels will automatically disappear.

Slide before and after image

This plugin works great with the popular WordPress page builders like Beaver Builder and Elementor to quickly show before and after photo in your website pages without using shortcodes.

We hope this article helped you learn how to show before and after photo in WordPress. You may also want to see our guide on how to add magnifying zoom for images in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Show Before and After Photo in WordPress (with Slide Effect) appeared first on WPBeginner.

from: WPBeginner
via Editorial Staff

Source: How to Show Before and After Photo in WordPress (with Slide Effect) Via Business Advice.

Comments

Post a Comment

Popular posts from this blog

7 Ways to Grow Your SaaS Startup Faster

Every startup looks for ways to catapult a business to success. Here are some tips for accelerating growth for SaaS (software as a service) companies. 1. Start charging early SaaS startups are often hesitant about charging customers. They think that their product is not yet ready, that it’s necessary to get traction and focus on expanding their customer base rather than on growing revenue. Deep inside, however, they often don’t just have enough faith in their product and are not sure if someone will buy it at all. They prefer keeping hundreds or thousands of free users to attempting to win a few serious customers. Big numbers are comforting but the product remains an unverified idea. Building a product should imply increasing revenue. So don’t hesitate too much—put it to the test by charging and see if it works in the real conditions. This is one way to minimize your risk too. Instead of waiting to launch until you’ve invested huge amounts of time and money, launch early. If...
Post a Comment
Read more

How to Add Web Push Notification to Your WordPress Site

Do you want to add push notifications to your WordPress site? Push notifications allow you to send notifications to users even when they are not visiting your website. In this article, we will show you how to easily add web push notifications to your WordPress site. We will also talk about the best WordPress push notification plugins and how to send desktop & mobile push notifications from your WordPress site. What is Push Notification? Push notifications are clickable messages displayed on top of user’s desktop or notification area on their mobile device. They can be shown even when the user’s browser is not open. Aside from desktop, web push notifications also work on mobile devices. This allows you to reach your users across devices with latest updates and offers. Web push notifications have proven to be a very effective way to convert website visitors into customers and loyal followers. Why Add Web Push Notifications to Your WordPress Site? We have already discussed tha...
Post a Comment
Read more

7 Best WordPress Job Board Plugins and Themes

Are you looking for the best WordPress job board plugin? There are several WordPress job board plugins that you can use to easily create a job board and charge other companies to post jobs. It is one of the ways to make money from your blog , and you can even use it to post your own job openings. In this article, we have picked the best WordPress job board plugins and themes that you can use. Building a Job Board Website with WordPress WordPress is currently one of the most popular website builders in the market, powering more than 30% of all websites on the internet. It can be used to build almost any kind of website including a job board website. There are two types of WordPress websites which often confuses new users. First, there is WordPress.com which is a hosted solution. Second, you have WordPress.org also called self-hosted WordPress. See our article on WordPress.com vs WordPress.org for a side-by-side comparison. We recommend using self-hosted WordPress.org because it g...
Post a Comment
Read more