Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Do you want to show a before and after photo in WordPress?

A before and after photo allows you to show a side-by-side comparison of two images with minor differences. This is perfect for showing the impact of your products and services or simply encouraging people to interact with your content.

In this article, we will show you how to add a before/after photo to your WordPress website with a slide effect.

How to show before and after photo in WordPress (with slide effect)

Why Show Before and After Photos in WordPress (With Slide Effect)?

A before-and-after image is an interactive picture that typically shows some kind of change.

Visitors can use a slider to switch between the different ‘versions’ of the image in an engaging and interactive way.

An example of a before and after image

If you run an online store using a plugin such as WooCommerce, then a before and after photo can show the effect of your products or services.

You simply need to show a ‘before’ photo that the customer can relate to and a desirable ‘after’ photo. This will make shoppers want to buy the thing that takes them from the ‘before’ state to the ‘after’ state.

If you are an affiliate marketer, then showing persuasive before and after photos on your website is a great way to promote your affiliate links and get more sales.

Dragging a slider to reveal the ‘after’ photo is also an easy way to get more engagement, which can keep visitors on your site for longer. This can also help increase your pageviews and reduce the bounce rate in WordPress.

With that being said, let’s see how you can create a before and after photo in WordPress using a slide effect. Simply use the quick links below to jump straight to the method you want to use:

Method 1: How to Show Before and After Photos Using a Free Plugin (Easy)

The easiest way to create before and after photos is by using the Ultimate Before After Image Slider & Gallery (BEA).

The BEA plugin allows you to create horizontal and vertical sliders and customize the image with different labels and colors.

An example of a before and after slider in WordPress

The first thing you need to do is to install and activate the Ultimate Before After Image Slider & Gallery (BEA) plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, go to Before and After Slider » Add New in your dashboard.

To start, type in a name for the image slider. This is just for your reference, so you can use anything that will help you identify it.

How to create a side by side comparison image in WordPress

With that done, you can add the ‘before’ image by scrolling to the ‘Before Image’ section.

Here, click on ‘Add or Upload Image’ and then either choose a picture from the WordPress media library or upload a new file from your computer.

How to add a before comparison image to a WordPress website

To help search engines understand this image and show it to the right people, it’s a good idea to add some image alt text. To do this, simply type into the ‘Image Alt’ field.

For more information about alt text, please see our beginner’s guide to image SEO.

Adding image alt text to a before and after image

With that done, scroll to the ‘After Image’ section.

You can now add the ‘after’ image by following the same process described above. Don’t forget to add some alt text to this image, too, since it’s important for WordPress SEO.

Adding an 'after' comparison image to a website or blog

You can also show some text below the image by adding a title and a description.

For example, you might encourage visitors to interact with the slider. This is especially important for visitors who might have never run across a before-and-after photo before.

An example of a comparison image with a title and description

This is also an easy way to add some context to the image.

To add some text, simply type into the ‘Slider Title’ or ‘Slider Description’ fields.

Adding a description to a before and after image

You can also add a ‘Read More’ URL, which can link to any post or page on your WordPress website or even an external website. For example, you might send visitors to a page where they can buy the product featured in the slider image.

This link will appear below the before/after image and also beneath any slider title or description you are using.

Adding a Read More link to a comparison image with a slide effect

To add a link, type the destination into the ‘Read More Link’ field.

You can then decide whether to open the link in the same tab or in a new tab using the ‘Read More Link Target’ dropdown.

How to add a link to a Read More button

If you are linking to another website, then we recommend choosing ‘New tab’ so you are not sending visitors away from your WordPress blog.

With that done, you can choose whether you want to create a vertical or horizontal slider by clicking on one of the thumbnails in the ‘Orientation Style’ section.

Creating a vertical or horizontal slide effect in WordPress

After that, scroll to the top of the screen and click on ‘Options.’

Here, you’ll see the ‘Default offset’ is set to 0.5. This means the visitor sees half of the ‘before’ image when the page first loads.

How to customize a before and after slider in WordPress

If you want to show more of the before image, then type in a bigger number, such as 0.6, 0.7, or higher.

If you want to show the entire before image, then type in 1. This will place the slider at the top or right of the before image, as you can see in the following image.

Customizing a side by side comparison image with a slide effect

By default, the plugin shows ‘Before’ and ‘After’ labels when the visitor hovers their mouse over the image.

You may want to replace these labels with something more descriptive.

Adding custom labels to a before/after slider

To do this, simply go ahead and type into the ‘Before Label’ and ‘After Label’ fields.

By default, visitors will move the slider using drag and drop. Some people may find this difficult, especially if they have mobility issues or they are using smaller devices like smartphones or tablets.

With that being said, you may want to change how visitors move the slider.

If you select the ‘Yes’ button next to ‘Move slider on mouse hover,’ then visitors can move the slider simply by hovering their mouse over the image.

Creating a custom slide effect on a before and after image

If you select the ‘Yes’ button next to ‘Click to move,’ then visitors can click anywhere on the image to move the slider to that point.

These settings can make it easier to interact with the before/after image, but it’s typically not the way that sliders behave. With that in mind, we recommend using these settings carefully.

Next, click on the ‘Style’ tab.

Changing the style of a slide effect on a website or blog

Here, you can change the colors used for the different labels, backgrounds, headings, descriptions, and the read more button. This can help the before/after image blend in with your WordPress theme or even stand out from the rest of your website’s design.

You can also change the font size and text alignment.

When you are happy with how the slider is set up, click on the ‘Publish’ button.

Publishing a before and after photo to your WordPress website

This creates a shortcode that allows you to add the before/after image and slider to any page, post, or widget-ready area.

For more information on how to place the shortcode, please see our guide on how to add a shortcode in WordPress.

Adding a slide effect to your WordPress images using shortcode

After adding the shortcode to your site, simply click on the ‘Publish’ or ‘Update’ button to make the before/after image and slider effect live.

Method 2: How to Show a Before and After Photo Using SeedProd (Advanced)

If you simply want to add a before and after image to a page or post, then the BEA plugin may be a good choice. However, if you are using the image to promote a product, service, or business, then we recommend using SeedProd.

SeedProd is the best drag-and-drop WordPress page builder. It comes with more than 300+ ready-made templates that you can use to create high-converting landing pages, sales designs, custom WordPress themes, and more.

SeedProd's ready-made templates

It also has a ready-made ‘Before After Toggle’ block that you can use to create beautiful before-and-after images your users can interact with.

Simply drag the block from the left-hand menu, and then drop it onto any page design that you’re working on, including sales pages.

A before and after image created using SeedProd

If you are using WooCommerce to sell your products, then SeedProd integrates with WooCommerce and even comes with special eCommerce blocks. This is perfect if you plan to use before and after images to promote your WooCommerce products.

Note: There is a free version of SeedProd that allows you to create custom pages no matter your budget. However, we will be using the premium version as it comes with the Before After Toggle block. It also integrates with many of the best email marketing services you may already be using on your website.

For information on how to use SeedProd, please see our guide on how to create a custom page in WordPress.

After creating a page, it’s easy to add a before and after image to your design. In the SeedProd page editor, simply find the ‘Before After Toggle’ block.

The SeedProd before and after toggle block

You can then drag and drop this block anywhere on your design to add it to the page layout.

With that done, simply click to select the ‘Before After Toggle’ block. The left-hand menu will now update to show all the settings you can use to create your before-and-after image.

SeedProd's before and after toggle settings

To start, you’ll need to add the picture you want to use as the before image. Under ‘Before Image,’ either click on ‘Use Your Own Image’ or ‘Use a Stock Image’ and choose the picture you want to use.

By default, SeedProd shows a ‘Before’ label above this image. However, you can change this to something more descriptive by typing it into the ‘Before Label’ field.

Creating a before and after image using a page builder plugin

With that done, scroll to the ‘After Image’ section.

You can now add an image and customize the default ‘After’ label by following the same process described above.

Adding an after image to a custom page layout

SeedProd can add a vertical or horizontal slide effect.

To switch between these two styles, scroll to the ‘Slider Orientation’ section and then click on either ‘Vertical’ or ‘Horizontal.’

A before and after image with a slider

By default, visitors will move between the before and after images by dragging the slider. However, some users may find it easier to move the slider by hovering their mouse over the image. This is particularly true for larger images where the visitor would need to drag the slider a greater distance.

To try this setting, enable ‘Move on Hover’ in the left-hand menu.

Next, you may want to add a colored overlay to both the before and after images. This can help the image blend in with the rest of the color scheme or stand out from the background.

You can even make the colored overlay semi-transparent to create a more subtle effect.

To try different colors, click on the ‘Overlay Color’ section and then make your changes in the popup that appears.

Adding an overlay color to an interactive image using SeedProd

With that done, you can customize the slider handle by clicking to expand the ‘Comparison Handle’ section.

By default, SeedProd shows half of the ‘before’ image and half of the ‘after’ image. To change this, simply drag the ‘Handle Initial Offset’ slider.

Changing the initial offset on a before/after picture

To display less of the before image, drag the slider to the left so that it shows a lower number. To show more of the before image, drag the slider to the right, which increases the number.

Next, you can change the slider’s color using the ‘Handle Color’ settings.

How to customize a slider using SeedProd

You can also make the handle thicker or thinner using the ‘Handle Thickness’ slider.

In this way, you can make the handle stand out or create a more subtle effect.

Changing the thickness of a slider using SeedProd

When you are happy with the handle, you may want to change the circle. You can make the circle bigger or smaller using the ‘Circle Width’ settings and change the ‘Circle Radius’ to create sharp or curved corners.

As you make changes, the live preview will update automatically, so you can try different settings to see what looks the best.

Changing the width and radius of the slider circle

When you’re happy with the circle, you may want to change the size of the triangles inside that circle. For example, if you’ve made the circle bigger, then you might want to increase the size of the triangles, too.

To make this change, drag the ‘Triangle Size’ slider until you are happy with how it looks.

How to customize a slider using a page builder plugin

With that done, you can continue adding new blocks and customizing the content on your SeedProd page.

When you are happy with how the page looks, just click on the arrow next to the ‘Save’ button and then select ‘Publish.’

Publishing a before and after image using SeedProd

Now, if you visit your website, then you’ll see your page design with the before and after images live.

We hope this article helped you learn how to add a before and after photo to your WordPress website with a slide effect. You can also go through our guide on the best social proof plugins for WordPress and how to choose the best web design software.

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

9 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Mrteesurez says

    Nice one, thanks for opening my eyes. I will like to share this article to my friend wanted to create a fashion blog with cosmetics store, it can be used to show before and after the cream has been applied.
    thanks.

  3. Jiří Vaněk says

    Thanks for the articles. We are currently preparing a website for solar technology, where it will be great to see the house before and after it, so that people can get an idea. This method seems much more creative to me than two before and after photos next to each other. Great idea and inspiration for creating a website in this context. Thanks for the idea.

  4. Manny T. says

    Hi, I added the slider just fine but I am trying to set it as my featured image for my post? Can you help please?

    • WPBeginner Support says

      Not all themes have a built-in option to add it as a featured image, you would want to check with your theme or page builder for how to add it as a featured image.

      Admin

    • WPBeginner Support says

      FOr this question, you would want to reach out to the plugin’s support and they should be able to let you know.

      Admin

  5. Jule says

    Hi, I just installed this plugin to use with Elementor, and I don’t even see the add 20/20 option on a post. I have to choose to edit with elementor and then use the 20/20 widget in the elementor page builder. Once I have the slider in place, I can’t seem to resize it at all, and it’s gigantic. Do you happen to have any ideas?

    • WPBeginner Support says

      For this, you would want to reach out to the 20/20 plugin’s support to see if this is a known issue with the plugin as the plugin should be compatible with Elementor

      Admin

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.