---
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
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?

## Key Takeaways

- The Before After widget from The Plus Addons for Elementor allows users to create a vertical before and after slider.
- Users select the Vertical option in the Style section to configure the Before After block.
- The widget requires installation and activation of The Plus Addons for Elementor to function.

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/)*

## Frequently Asked Questions

**Q: How do I troubleshoot the vertical before and after comparison slider not displaying?**
A: If the vertical before and after comparison slider isn't displaying, ensure that the Before After widget from The Plus Addons for Elementor is properly installed and activated. This widget is essential for creating the slider. Additionally, double-check that you've selected 'Vertical' in the Style section and that both before and after images are correctly uploaded.

**Q: What are the best practices for labeling images in the before and after slider?**
A: When labeling images in the before and after slider, use clear and descriptive labels that convey the essence of the transformation. For instance, instead of generic labels like 'Before' and 'After', consider using specific terms that reflect the changes, such as 'Original Design' and 'Updated Design'. This clarity helps users understand the context of the comparison.

**Q: Does the vertical before and after comparison slider work with other page builders?**
A: The vertical before and after comparison slider is exclusive to Elementor and is part of The Plus Addons for Elementor. It does not work with other page builders like Gutenberg, Beaver Builder, or Divi. If you're using Elementor, you can take full advantage of this widget's capabilities.

**Q: What features does the Before After widget from The Plus Addons for Elementor offer?**
A: The Before After widget from The Plus Addons for Elementor allows you to create engaging before and after comparison sliders with ease. Key features include the ability to select vertical or horizontal orientations, add custom labels for each image, and adjust the slider's appearance to fit your website's design. For a complete feature overview, [click here](https://theplusaddons.com/docs/add-before-after-image-comparison-in-elementor/).