Latest SeedProd News

WordPress Tutorials, Tips, and Resources to Help Grow Your Business

How To Add Before and After Photo Slider to WordPress

How To Add Before and After Photo Slider to WordPress (No Code) 

Written By: author image Stacey Corrin
author image Stacey Corrin
Stacey has been writing about WordPress and digital marketing for over 10 years and on other topics for much longer. Alongside this, she's fascinated with web design, user experience, and SEO.
     Reviewed By: John Turner
reviewer image John Turner
John Turner is the co-founder of SeedProd. He has over 20+ years of business and development experience and his plugins have been downloaded over 25 million times.

Do you want to add a before and after photo slider to your WordPress website?

An image comparison slider can help showcase how your products or services work before and after customers use them. Doing so gives your brand more credibility and can prompt potential customers to make a purchase.

In this article, we’ll show you how to easily add before and after image sliders to WordPress without code.

How Does the Before and After Photo Effect Work?

The before and after photo effect allows website visitors to click an interactive divider that transitions one image into another.

Let’s say you have 2 versions of the same photo with slight differences: photo A and photo B. A before and after slider places them next to or on top of each other with a central dividing line.

When you move the slider direction, you’ll see more of one image and less of the other.

Before and after photo slider example

This is a fantastic way to compare different images side-by-side. For example, dentistry websites can demonstrate a client’s teeth before and after dental work. Or you can compare the before and after effects of a particular beauty treatment.

Alternatively, eCommerce websites can use before and after photo sliders to compare the features of different products.

The question remains, how do you add before and after photo sliders to WordPress? Let’s find out.

How to Add Before and After Photo Sliders in WordPress

Typically, adding photo slider widgets and slideshows to your website will involve using Javascript, Jquery, HTML, CSS, and other coding languages. Many website owners won’t know how to write that code, so they turn to web developers for help, which can be pretty costly.

Luckily, there are cheaper ways to add new features to your WordPress site. With some of the best WordPress plugins, you can easily enhance your website without spending a fortune.

The tutorial below shows you how to add before and after photo sliders with SeedProd.

SeedProd WordPress website builder

SeedProd is the best WordPress website builder with drag-and-drop functionality. It lets you use pre-made templates and a visual page builder to create flexible WordPress layouts without code.

With its drag-and-drop WordPress blocks, you can enhance your website with valuable features, including:

  • Before and after sliders
  • Advanced image galleries
  • Pricing tables
  • Optin forms
  • Call-to-action buttons
  • Countdown timers
  • Tabbed content
  • Giveaways
  • Contact forms
  • And much more.

You can also use SeedProd to create a coming soon page and put WordPress in maintenance mode. Plus, everything you make is 100% mobile responsive, ensuring your site is easy to use across mobile devices.

Click the button below to download the SeedProd plugin, then follow the steps to embed a before and after photo slider on your website.

Step 1. Install and Activate SeedProd

After downloading the plugin, find the Downloads tab in your SeedProd account, and copy your license key.

Find your SeedProd license key

Now, go ahead and upload the plugin to your WordPress site. If you need help, you can follow this step-by-step guide on how to install a WordPress plugin.

Once SeedProd is installed, navigate to SeedProd » Settings from your WordPress admin and paste the license key you copied earlier.

enter your license key

Click the Verify Key button to activate your license, then move on to step 2.

Step 2. Create Your WordPress Layout

After installing SeedProd, you’ll need to decide which type of layout you’d like to create. You can create a custom WordPress theme or build high-converting landing pages with SeedProd’s drop-and-drop editor.

The Theme Builder option is a great way to replace your existing website design with a new WordPress theme tailored to your business needs. It generates all the template files of a typical WordPress theme and lets you customize each part visually with its powerful page builder.

Seedprod theme builder template files

Follow this tutorial to create a custom WordPress theme with SeedProd.

Alternatively, you can use the Landing Page Builder to create standalone landing pages that work seamlessly with your current WordPress theme. It uses the same visual editor as the theme builder and is a fantastic lead-generation tactic for any website.

SeedProd drag and drop landing page builder

Here’s a guide on how to create a landing page in WordPress using SeedProd.

Once you’ve created a new layout, you can move to step 3 and add a before and after slider to your design.

Note: for this guide, we’ll create a custom WordPress theme and edit the homepage template.

Step 3. Add the Before and After WordPress Block

After creating your layout, open the page you want to edit with SeedProd’s page builder.

Since we’re editing the homepage of our WordPress theme, we’ll go to SeedProd » Theme Builder and click Edit Design under the Homepage template.

edit homepage design

On the following screen, you’ll see a layout similar to the one below:

SeedProd drag-and-drop page builder

On the right is a live preview of the template you chose in step 2, and on the left are blocks and sections you can drag and drop onto your design.

Customizing any element is super easy.

For example, you can edit headings by clicking on them and typing in your new content directly on the live preview.

Edit headlines with SeedProd builder

Or, you can edit the text in the settings panel on the left-hand side, which includes countless customization options.

So customize your template until it starts looking the way you want.

Now let’s look at adding features that your template may not automatically include. For example, the Website Kit we chose doesn’t have a before, and after photo slider, so we’ll need to add it ourselves.

To do that, scroll through the WordPress blocks on the left until you find the Before After Toggle. Then drag it into position on your live preview.

Add Before After Toggle WordPress block

When you click the block, you’ll open its customization options in the left-hand settings panel. This is where you can add your before and after images, change the styling, and more.

Before After Toggle settings

Let’s start by adding the first image, which will typically be your “before” photo. You can do this by clicking the Use Your Own Image option and either uploading a new photo or choosing one from your WordPress media library.

Upload your Before image

Now repeat this step for the “after” image. You can edit the labels for each image by replacing the names in the text fields.

With your images in place, let’s look at a few more settings.

Under the Orientation heading, you can make the before and after slider vertical instead of horizontal.

Before After Toggle Orientation settings

You can also make the slider move when you hover over the image with your cursor and apply a color overlay to the photos.

When you open the Comparison Handle heading, you’ll see settings to change the slider color, width, radius pixel size, and more.

Before After Toggle Comparison Handle settings

You can find even more settings by clicking the Advanced tab. For example, you can change the label typography and color, adjust the block spacing and attributes, and hide certain elements on mobile screens.

Advanced Before After Toggle settings

When you’re happy with how the before and after photo slider looks, click the Save button in the top-right corner of your screen, and click Publish.

Save your changes

If you’re creating a landing page, you can now preview your page and see your before and after image slider in action. But if you’re making a custom WordPress theme, you’ll need to complete step 4.

Step 4. Enable Your Changes

Even though your changes are saved and published, you still need to make your WordPress theme live. Don’t worry; this step is quick and easy.

Go to SeedProd » Theme Builder from your WordPress dashboard, and turn the Enable SeedProd Theme toggle to the “Yes” position. That’s it!

enable seedprod theme

Now you can head to your website’s front end and take your new image slider for a spin.

Before and after photo slider example

Before and After Photo Slider FAQs

Do I need coding skills to use a before and after photo slider plugin?

No, you typically don’t need any coding skills to use a before and after photo slider plugin in WordPress. These plugins are designed to be user-friendly, and they usually offer a visual interface for uploading images and customizing the slider.

Are before and after photo slider plugins mobile responsive?

Most before and after photo slider plugins are designed to be mobile responsive. This means that they will automatically adjust to fit the screen size of the device that your website is being viewed on.

Can I use multiple before and after sliders on the same page?

You can typically use multiple before and after sliders on the same page. However, the exact process for doing this may vary depending on the specific plugin you are using.

There you have it!

You now know how to add before and after photo sliders to your WordPress website. There are so many ways to make this feature work for your business’s success.

So what are you waiting for?

Thanks for reading! We’d love to hear your thoughts, so please feel free to leave a comment with any questions and feedback.

You can also follow us on YouTubeX (formerly Twitter), and Facebook for more helpful content to grow your business.

author avatar
Stacey Corrin Writer
Stacey has been writing about WordPress and digital marketing for over 10 years and on other topics for much longer. Alongside this, she's fascinated with web design, user experience, and SEO.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. We only recommend products that we believe will add value to our readers.

Add A Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.