---
title: "How to Add a Vertical Before and After Comparison Slider in WordPress?"
url: https://nexterwp.com/docs/add-a-vertical-before-and-after-comparison-slider-in-wordpress/
date: 2024-12-05
modified: 2026-03-31
author: "Aditya Sharma"
description: "Do you want to add a vertical before and after comparison slider in WordPress? This feature allows you to showcase transformations of vertical designs or elements, providing an engaging way..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-a-Vertical-Before-and-After-Comparison-Slider-in-WordPress_-1024x519.jpg
word_count: 207
---

# How to Add a Vertical Before and After Comparison Slider in WordPress?

## Key Takeaways

- Nexter Blocks Before After block creates a vertical before and after slider in WordPress when the Content tab is set to Vertical in the Mode section.
- Before Image tab adds the before image through Select Before Image, and the Before Label field adds a label for that image.
- After Image tab adds the after image through Select After Image, and the After Label field adds a label for that image.

Do you want to add a vertical before and after comparison slider in WordPress? This feature allows you to showcase transformations of vertical designs or elements, providing an engaging way for visitors to see the impact of your work.

With the Before After block from Nexter Blocks, you can easily create a vertical before and after slider in WordPress.

*To check the complete feature overview documentation of the Nexter Blocks Before After block, [click here](https://nexterwp.com/docs/add-before-after-image-comparison-in-wordpress/).*

***Requirement  - This block is a part of the Nexter Blocks, make sure it's installed & activated to enjoy all its powers.***

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-before-after-image-comparison-slider/)

To do this, add the Before After block to the page and follow the steps - 

1. In the **Content** tab, select **Vertical** from the **Mode **section.

2. Then in the **Before Image** tab, you have to add the before image in the **Select Before Image** section.

In the **Before Label** field, you can add a label for the before image.

3. After that in the **After Image** tab, you have to add the after image from the **Select After Image** section.

In the **After Label **field, you can add a label for the after image.

Now you will see a vertical before and after comparison slider.