How to Add a Before After Slider in WordPress? (5 Simple Steps) 

Ever noticed how “before and after” posts always go viral? From home makeovers to photo retouching and fitness results, people can’t resist a good transformation.

Why? Because your audience doesn’t just want to hear about results, they want to see them.

Now imagine giving that same experience on your WordPress site. Instead of stacking two static images, what if your visitors could drag a slider to reveal the transformation instantly?

That’s where a Before After Image Slider comes in.

In this guide, you’ll learn how to add a before after slider in WordPress without touching a single line of code. Whether you’re a photographer, designer, builder, or blogger, this simple addition can turn your portfolio or service page into an interactive showcase that grabs attention and builds instant trust.

Ready to transform the way visitors see your work? Let’s dive in and create a scroll-stopping before after slider that tells your story visually and effortlessly.

What Is a Before After Slider?

A before after slider in WordPress is a visual comparison tool that allows users to drag a slider to show before and after images interactively on a webpage. It’s often used by photographers, designers, real estate agents, and businesses that want to showcase image transformations such as remodels, edits, makeovers, or design updates.

In simple terms, a before after photo slider on WordPress plugin turns static images into an interactive storytelling experience. Instead of just showing two pictures, it lets visitors engage with your content by dragging a handle to reveal the transformation themselves. This not only grabs attention but also builds credibility, making it one of the best WordPress plugins for photographers and designers who want to display real, visual results effectively.

With a WordPress before after image slider plugin, you can:

• Compare two images in WordPress side-by-side or overlaid
  
• Add before after image sliders in WordPress posts, pages, or galleries
  
• Use a responsive before after slider that adjusts beautifully on mobile devices
  
• Integrate easily with the WordPress block editor (Gutenberg) or page builders like Elementor or Divi.

Pretty cool, right? Now that you get what a before after slider is and, let’s take it one step further, here’s how you can actually compare two images in WordPress to bring that magic to life.

How Do You Compare Two Images in WordPress?

When you want to compare two images in WordPress, there are several ways to do it, ranging from manual coding to using feature-rich plugins.

Let’s break down each method so you can choose the one that fits your skills and workflow best.

1. Manual Method (Using Custom CSS & JavaScript)

If you’re comfortable with coding, you can create a before after image effect manually using HTML, CSS, and JavaScript.

This involves:

• Stacking two images on top of each other using HTML and CSS positioning.
  
• Adding a range input or draggable divider via JavaScript to simulate the “slider” movement.
  
• Writing custom scripts to ensure the divider updates dynamically as users drag it.

While this approach gives you complete control, it comes with drawbacks. You’ll need to handle cross-browser compatibility, touch support for mobile, and responsive scaling yourself.

For non-developers, maintaining and styling such a slider can become time-consuming, which is why most users prefer using a WordPress plugin for photo comparison instead.

💡Read More: How to Create a Before & After Image Slider with CSS and JS?

2. Using the WordPress Block Editor (Gutenberg)

If you’re using Gutenberg, WordPress’s block-based editor, you might already have access to an Image Compare or Before After block, depending on your theme or installed extensions.

Here’s how it works:

• You add the WordPress before after block inside your post or page.
  
• Upload your “Before” and “After” images.
  
• Adjust the slider direction (horizontal or vertical) and labels.

This option is great for beginners since it doesn’t require coding, and it integrates seamlessly with your content layout.

However, customization can be limited; for example, you might not be able to adjust handle styles, transition effects, or animations. That’s where more advanced solutions come in.

3. Using Page Builders (Elementor, Divi, or WPBakery)

If you’re building your site with a page builder like Elementor, Divi, or WPBakery, you’re in luck. Many of these tools now include before after comparison widgets or modules built right in.

For example:

• Elementor offers third-party addons (like Essential Addons or PowerPack) that include a “Before After” widget.
  
• Divi users can use a custom module to achieve the same drag-to-reveal effect.
  
• WPBakery has extensions with image comparison elements you can easily drop into your layout.

These widgets work similarly to a photo comparison tool for WordPress, letting you drag a slider to show before and after images visually. They provide flexibility and blend nicely into custom layouts, but they can sometimes increase page load if you rely heavily on builder-based scripts.

4. Using a Dedicated Plugin (Best Option)

Finally and most effectively, you can use a before after image comparison plugin for WordPress. This is by far the easiest and most powerful method.

A dedicated image comparison slider on WordPress plugin is built specifically to handle all the heavy lifting, like responsiveness, touch support, animations, and styling, without writing a single line of code.

With the best before after slider plugin for WordPress, you can:

• Add before after image sliders in WordPress posts, pages, or portfolios.
  
• Create a WordPress before and after gallery to showcase image transformations.
  
• Build a responsive before after slider on WordPress layout that looks great on any device.
  
• Integrate it easily through shortcodes, widgets, or the WordPress before after block.

This approach combines the best of all worlds, such as ease of use, design flexibility, and professional results.

As you can see, there are a few ways to pull off a stunning image comparison. But let’s be honest, nothing beats the simplicity of using the right tool.

So, ready to find out which one’s the best plugin for before and after images in WordPress?

Let’s go plugin hunting!

What is the Best Plugin for Before and After Images in WordPress? (Top Picks)

Choosing the best before after slider plugin for WordPress can feel overwhelming with so many options available. Each plugin offers unique strengths, from simple sliders to advanced customization tools.

To help you decide, here’s a breakdown of the most popular before after image comparison plugins for WordPress and how they stack up against each other.

Key Criteria to Consider

Before picking a before after image comparison plugin for WordPress, keep these important factors in mind:

• Ease of Use: Can you add before after image sliders in WordPress without any coding?
  
• Responsiveness: Does it create a responsive before after slider WordPress layout that adapts to all screen sizes?
  
• Editor Compatibility: Does it work with Gutenberg, Elementor, or Divi using a WordPress before after block or widget?
  
• Styling Options: Can you customize the slider handle, labels, and animation styles?
  
• Performance: Does it keep your website lightweight and fast-loading?

Let’s explore some of the most popular tools that help you create interactive image sliders and display project results on WordPress with a professional, modern look.

1. WP Before After Image Slider (Recommended)

If you’re looking for an easy yet powerful way to add before after image sliders in WordPress, this plugin stands out. It’s designed for creatives who want to compare two images in WordPress without touching code.

It’s a full-featured image comparison slider WordPress plugin that’s perfect for photographers, designers, and businesses that need to showcase image transformations elegantly.

• Pros: Beginner-friendly interface, advanced customization, works with Gutenberg and page builders, mobile-responsive, and lightweight performance.
  
• Cons: You might get addicted to using it on every page once you see how engaging it looks!

2. BEAF – Ultimate Before After Image Slider & Gallery

BEAF is one of the most popular choices for users who want flexibility and multi-slider gallery support. It’s a reliable before after image comparison plugin for WordPress that can display project results on WordPress pages beautifully.

• Pros: Easy to use, integrates with Gutenberg and Elementor, supports multiple layouts and galleries.
  
• Cons: Some of its advanced animations and templates are available only in the premium version.

3. Twenty20 Image Comparison Slider

Twenty20 is a simple and lightweight option for beginners who want a straightforward photo comparison tool for WordPress. It’s great for small projects and fast setups.

• Pros: Minimal, user-friendly, and perfect for quick comparisons.
  
• Cons: Limited customization and styling features; not ideal for those who need advanced control or galleries.

4. Image Comparison Block

If you use Gutenberg, the Image Comparison Block plugin lets you drag a slider to show before and after images directly in your content.

• Pros: Native to Gutenberg; great for quick setups within posts or pages.
  
• Cons: Offers limited customization options and lacks responsiveness controls for complex layouts.

Now that you’ve seen the top contenders, it’s time to get hands-on.

Let’s roll up our sleeves and walk through exactly how to add a before after slider in WordPress step by step, so you can create your own in minutes.

How to Add a Before After Slider in WordPress (Step-by-Step Tutorial)

Adding a before after image slider in WordPress is one of the most effective ways to visually showcase your work. Whether you’re a photographer, designer, or agency, showing how your project has evolved can instantly build credibility and engagement.

Here’s a detailed before after image effect tutorial using the WP Before After Image Slider, a powerful yet beginner-friendly before after image comparison plugin for WordPress that makes it effortless to compare two images in WordPress interactively.

Step 1: Install & Activate the Plugin

Before you begin, you’ll need to install the plugin that powers this feature, the WP Before After Image Slider. It’s one of the best before after slider plugins for WordPress because it offers powerful customization without requiring any coding.

To install it:

1. Log in to your WordPress dashboard.
   
2. Navigate to Plugins → Add New.
   
3. In the search bar, type “WP Before After Image Slider”.
   
4. Click Install Now → then Activate once the installation completes.

You’ll now see a new menu item on your sidebar labeled “WP Before After”.

Pro Tip:
If you have the Pro version, you can download and upload the ZIP file manually via the Upload Plugin option.

Step 2: Create a New Slider

Once activated, it’s time to create your first before after photo slider that WordPress users can interact with.

Here’s how to create one:

• In your WordPress admin, go to Before After Slider → Add New Slider.
  
• Give your slider a descriptive title, for example, “Portrait Retouch Before/After” or “Home Interior Makeover.”

• Upload your Before Image and After Image.
  
  • Use high-quality but optimized images (JPEG or WebP).
    
  • Ensure both images have the same dimensions to keep the slider smooth and aligned.
    
• Add alt text to each image to improve SEO and accessibility (e.g., “Before retouching portrait photo”).
• You’ll see a live preview of your images as you upload them, allowing you to check alignment and size instantly.

Pro Tip:
You can upload optimized images (in WebP or compressed JPEG formats) to keep the slider lightweight and responsive.

Step 3: Configure Slider Options

Once you’ve uploaded your “Before” and “After” images, it’s time to fine-tune your slider’s behavior and style.

General Settings:

Here’s what you can do inside the settings panel of this image comparison slider on the WordPress plugin:

• Set Divider Default Offset: Define where the slider handle will appear when the page loads, for example, at 50% (centered) or slightly off-center to emphasize a dramatic reveal.
  
• Choose Orientation (Horizontal or Vertical): Select the slider direction that fits your images best.
  • Example: Use horizontal for landscapes or product shots, and vertical for portraits or tall layouts.
    
• Select Trigger Type (Drag or Hover): Decide how users interact with your slider, either by dragging the handle or simply hovering over the image for an automatic reveal.
  
• Toggle Overlay Visibility: Enable or disable the image overlay to control how much contrast appears between your “Before” and “After” states.
  
• Show or Hide Labels: Use the “Show Labels” toggle to display or remove text markers such as “Before” and “After.”
  
• Choose Slider Template: Pick from different pre-built templates to match your website’s style.
  • Example: A sleek minimal slider for modern portfolios, or a bold framed template for client case studies.
    
• Enable Fullscreen Popup View: Activate the popup view option and select your preferred popup position. This allows your before after photo slider on WordPress design to open in a full-screen view when clicked.

Handle Design:

Next, you can style the slider handle, the draggable element that lets visitors compare two images in WordPress interactively.

You can:

• Choose the arrow color that fits your theme.
  
• Apply a solid background color or gradient for a premium look.
  
• Customize border style, width, and color to ensure the handle stands out against your images.

Divider Style:

The divider line is what separates your “Before” and “After” images, and the plugin gives you total control over its appearance.

You can:

• Adjust the divider color to complement your design (for example, white for dark photos or gray for neutral tones).
  
• Modify the divider width for subtle or bold separation effects.
  

Label Customization:

Your labels (“Before” and “After”) play an important role in communicating context. With WP Before After Image Slider, you can style them any way you like:

• Set label alignment and orientation for the perfect placement.
  
• Customize text color, background color, or even add a gradient background.
  
• Choose border style, padding, and font settings to create professional, branded labels.

Step 4: Insert the Slider into Posts / Pages

Once your slider is customized, it’s time to display it on your website. The WP Before After Image Slider plugin makes this process effortless.

You can embed your slider in three easy ways:

Option 1: Using Shortcode

Each slider you create has a unique shortcode (e.g., [wpbafs id=”123″]).

You can paste this shortcode anywhere, inside:

• Blog posts
  
• Pages
  
• Sidebars or widget areas

This method is ideal for users who prefer the Classic Editor or page builders like WPBakery.

Option 2: Using Gutenberg (Block Editor)

If you’re using the WordPress Block Editor, the plugin includes a WordPress before after block for seamless integration.

To use it:

1. Open your post or page in the Gutenberg editor.
   
2. Click the + Add Block icon.
   
3. Search for “Before After Slider.”
   
4. Select your pre-created slider from the dropdown list.

Now, your slider appears directly in your editor, making it easy to preview and adjust layout spacing.

Option 3: Using Page Builders (Elementor, Divi, etc.)

If you’re a visual builder user, don’t worry, the plugin works smoothly with major builders. You can use:

• Shortcodes inside Elementor’s “Shortcode” widget.
  
• HTML modules in Divi or Beaver Builder.

This approach ensures your visual change slider for websites integrates naturally with your custom layouts.

Step 5: Preview & Test

Before you hit publish, it’s essential to test your slider for responsiveness, alignment, and smooth performance.

Check these key points:

• The handle moves smoothly when you drag the slider to show before and after images.
  
• Both images load quickly without distortion.
  
• The slider functions perfectly on mobile devices.
  
• The “Before” and “After” labels are visible and positioned correctly.

Pro Tip:
Test your slider on multiple browsers (Chrome, Safari, Edge) to ensure a consistent viewing experience.

Bonus Step: Common Issues & Troubleshooting

Even with the best WordPress plugin for photo comparison, minor setup issues can occur, but they’re easy to resolve.

Common issues and quick solutions:

• Images not aligned properly: Make sure both images have the same pixel dimensions.
  
• Slider not moving: Check for conflicting JavaScript from other plugins or caching issues.
  
• Not responsive: Enable the responsive option under the settings panel or clear the site cache.
  
• Labels not appearing: Verify that label text is filled in and the color contrast matches your background.

You did it! Easy, right?

But if you’d rather see how it’s done in real time, we’ve got you covered. Up next is a quick video tutorial on how to add a before after slider in WordPress so you can follow along visually.

Video Tutorial on How to Add a Before After Slider in WordPress

Still wondering how to set up your first WordPress before after image slider? Don’t worry, we’ve got you covered! In this step-by-step video tutorial, you’ll learn exactly how to add a before after image slider in WordPress using the WP Before After Image Slider plugin.

From installing the plugin to customizing your slider design and embedding it in posts or pages, this video walks you through every step visually.

Hit play and follow along to bring your transformations to life, visually, interactively, and effortlessly!

Got the hang of it now? Awesome! 

Before you dive in and start creating your own sliders, let’s wrap things up with a few final thoughts on how to make your before after images stand out even more.

Final Thoughts

Adding a before after image slider in WordPress is one of the easiest and most impactful ways to showcase image transformations and engage your audience. With a powerful before after image comparison plugin for WordPress, like WP Before After Image Slider, you can compare two images in WordPress, create a responsive before after slider, and display project results beautifully, all without writing a single line of code.

Whether you’re a photographer, designer, or agency, this image comparison slider WordPress plugin helps you create interactive image sliders that tell visual stories, build trust, and make your portfolio truly stand out.

So, install the WP Before After Image Slider today, and let your visitors swipe to see the difference!

Frequently Asked Questions (FAQs)

This page was last edited on 30 October 2025, at 5:15 pm