---
title: "How to Add a Vertical Before and After Comparison Slider in Elementor?"
url: https://theplusaddons.com/docs/add-vertical-before-and-after-comparison-slider-in-elementor/
date: 2024-04-11
modified: 2026-04-09
lang: en
author: "Aditya Sharma"
description: "Do you want to add a vertical before and after comparison slider in Elementor? Adding a vertical before and after comparison slider can help you showcase the transformation of vertical..."
image: https://theplusaddons.com/wp-content/uploads/2024/04/How-to-Add-a-Vertical-Before-and-After-Comparison-Slider-in-Elementor_-1024x536.jpg
word_count: 213
---

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

## 

- Utilizes the Before After widget from The Plus Addons for Elementor to create a vertical comparison slider.
- Requires installation and activation of The Plus Addons for Elementor to access the Before After widget features.
- Instructs users to select 'Vertical' in the Style section and upload images for both before and after comparisons.

Do you want to add a vertical before and after comparison slider in Elementor? Adding a vertical before and after comparison slider can help you showcase the transformation of vertical designs or elements on your website.

With the Before After widget from The Plus Addons for Elementor, you can easily create a vertical before and after slider in Elementor.

*To check the complete feature overview documentation of The Plus Addons for Elementor Before After widget, [click here.](https://theplusaddons.com/docs/add-before-after-image-comparison-in-elementor/)*

***Requirement  - This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/elementor-before-after-slider/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

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

1. Select the **Vertical** from the **Style **section.

![](https://theplusaddons.com/wp-content/uploads/2024/04/before-after-vertical-new.gif)

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

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

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

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

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

***Suggested Read:** [How to Add a Before and After Opacity Slider in Elementor.](https://theplusaddons.com/docs//add-before-and-after-opacity-slider-in-elementor/)*