---
title: "How to Add a Vertical Before and After Comparison Slider in WordPress?"
url: https://qa.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://qa.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 offers a Before After block for creating vertical comparison sliders in WordPress.
- Users select 'Vertical' mode in the Content tab to configure the Before After block settings.
- Before and After images are added through their respective tabs, allowing for custom labels.

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://qa.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://qa.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.