---
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-09-21
lang: en
author: "Aditya Sharma"
description: "A vertical comparison reads better than a horizontal one when the change happens up and down the frame - a room from floor to ceiling, a long landing page, a..."
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: 599
---

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

## 

- The Plus Addons for Elementor Before After widget adds a Vertical style that moves the handle from top to bottom instead of side to side.
- Separator Line starts the handle in the middle at 50%, while leaving it off makes the before image start at zero height until the visitor moves the pointer.
- The Plus Addons for Elementor Pro requires two images of the same size, because vertical comparisons are unforgiving about mismatched heights.
- Vertical clips the before image by height, and the divider cursor changes to an up-down arrow so visitors know it can be moved.

A vertical comparison reads better than a horizontal one when the change happens up and down the frame - a room from floor to ceiling, a long landing page, a tall product shot.

The **Before After** widget in The Plus Addons for Elementor has a **Vertical** style that moves the handle from top to bottom instead of side to side. Everything else works the same as the horizontal version.

***Requirement - This extension is a part of The Plus Addons for Elementor Pro, make sure it's 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)

## Before You Start

- **Edition:** Pro. The widget does not render at all on the free plugin.- **Switch it on:** **The Plus Addons > Widgets**, search **Before After**, turn the toggle on.- **Two images of the same size.** Vertical comparisons are unforgiving about mismatched heights.- New to this widget? Start with [How to Add Before/After Image Comparison in Elementor?](https://theplusaddons.com/docs/add-before-after-image-comparison-in-elementor/)

## Steps

- Add the **Before After** widget to the page.- In **Content > Content**, set **Style** to **Vertical**.- Set **Image for Before** to the starting image, and a short **Label for Before** if you want one.- Set **Image for After** to the finished image, and a **Label for After**.- In **Style > Options**, turn **Separator Line** on so the handle starts in the middle rather than at the very top.

![The Style control in the Content section, with Horizontal, Vertical and Opacity.](https://theplusaddons.com/wp-content/uploads/2026/09/beforeafter-style.webp)

> ***Separator Line** is off by default, and with it off the before image starts at zero height - the page shows only the after image until the visitor moves the pointer over it. Turning it on gives you **Separator Position**, which starts the handle at 50%.*

## What You Will See

The handle follows the pointer up and down the frame. We measured it in a widget 377 px tall: with the pointer a quarter of the way down, 92 px of the before image showed; at 58% it was 217 px; at 75% it was 281 px. The divider's cursor changes to an up-down arrow so visitors know it can be moved.

![The vertical handle dragged down the image.](https://theplusaddons.com/wp-content/uploads/2026/09/beforeafter-result-vertical.webp)

![Animated demo of the vertical before and after comparison slider.](https://theplusaddons.com/wp-content/uploads/2024/04/before-after-vertical-new.gif)

## How It Behaves

- **Vertical** clips the before image by height. **Horizontal** clips it by width, and **Opacity** does not clip at all - it fades between the two images.- **Separator Position** is a percentage from the top, and it defaults to 50.- **Label for Before** fades out while the handle is close to it, so it never sits under the divider. The after label stays visible.- All the separator settings - **Separator Style**, **Separator Width**, **Separator Color**, **Separator Icon**, **Separator Position** - stay hidden until **Separator Line** is on.

## Limitations

- Pro only.- With **Separator Line** left off, the before image starts at zero height and the comparison looks broken until the visitor interacts with it.- Both images need the same dimensions, or the frame will not fill.- We tested with **Mouse Hover option** at its default (on), and did not test touch screens.

## Troubleshooting

### Only the after image shows when the page loads

Turn **Separator Line** on in **Style > Options** and set **Separator Position**. With the separator off the handle starts at the top edge, which collapses the before image to nothing.

### The handle moves sideways instead of up and down

**Style** is still **Horizontal**. Change it to **Vertical** in **Content > Content**.

### There is no Separator Line switch

It is hidden when **Style** is **Opacity**. Switch back to **Vertical**.

## Not verified

So you know exactly what has and has not been checked:

- **Separator Style** set to **Bottom** with the vertical style.- **Mouse Hover option** switched off, **Full Width**, **Alignment**, **Image Resolution** and **Label Options**.- Touch screens.

## Related Docs

- [How to Add Before/After Image Comparison in Elementor?](https://theplusaddons.com/docs/add-before-after-image-comparison-in-elementor/)- [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: When should I use a vertical before and after slider instead of a horizontal one?**
A: Vertical works best when the change happens up and down the frame, like a room from floor to ceiling, a long landing page, or a tall product shot. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH offers this Vertical style in the Before After widget so the handle moves top to bottom instead of side to side. That makes the comparison read more naturally when height is the story.

**Q: Why does only the after image show when the page loads?**
A: That happens when Separator Line is off. With it disabled, the before image starts at zero height, so the page initially shows only the after image until the visitor moves the pointer over it. Turning Separator Line on in Style > Options gives you Separator Position and starts the handle at 50%, which makes the comparison visible immediately instead of looking broken on first load.

**Q: How do I stop the handle from moving sideways in a vertical comparison slider?**
A: Sideways movement means Style is still set to Horizontal. The vertical behavior only appears when Content > Content is switched to Vertical in The Plus Addons for Elementor Before After widget. That setting changes how the image is clipped too: vertical clips by height, while horizontal clips by width. If the motion feels wrong, this is usually the first thing to check.

**Q: Does the vertical before and after slider work on the free plugin?**
A: The widget is Pro only, so it does not render at all on the free plugin. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH requires The Plus Addons for Elementor Pro to use this extension. If you are testing it and nothing appears, that licensing difference is usually the reason rather than a setup mistake.

**Q: What image sizes work best for a vertical before and after comparison?**
A: Both images need to be the same size. Vertical comparisons are unforgiving about mismatched heights, and if the dimensions do not line up, the frame will not fill correctly. That matters more here than in some other layouts because vertical mode clips by height. Matching dimensions keeps the comparison clean and avoids awkward gaps or uneven cropping.

**Q: What is different between Vertical and Opacity in this widget?**
A: Vertical clips the before image by height, while Opacity does not clip at all and just fades between the two images. That difference matters because Vertical gives you a true top-to-bottom reveal, while Opacity is better when you want a crossfade effect instead of a directional wipe. In The Plus Addons for Elementor Before After widget, Separator Line also stays hidden in Opacity mode.