---
title: "How to Add Before/After Image Comparison in Elementor?"
url: https://theplusaddons.com/docs/add-before-after-image-comparison-in-elementor/
date: 2024-04-11
modified: 2026-09-21
lang: en
author: "Aditya Sharma"
description: "A before and after slider is the clearest way to show a change - a retouched photo, a renovated room, a redesigned page. The visitor drags a handle across the..."
image: https://theplusaddons.com/wp-content/uploads/2024/04/After-Image-Comparison-in-Elementor_-1024x536.jpg
word_count: 954
---

# How to Add Before/After Image Comparison in Elementor?

## 

- The Before After widget in The Plus Addons for Elementor offers three styles: Horizontal, Vertical, and Opacity.
- The Plus Addons for Elementor Pro is required, and the widget does not render at all with only the free plugin active.
- Separator Line is off by default, and turning it on starts the handle at 50% while avoiding a page that shows only the after image.
- Horizontal and Vertical styles move the before image by width or height, while Opacity fades the before image from 1 to 0 as the pointer crosses the widget.

A before and after slider is the clearest way to show a change - a retouched photo, a renovated room, a redesigned page. The visitor drags a handle across the two images and sees the difference for themselves.

The **Before After** widget in The Plus Addons for Elementor gives you three ways to do it: a horizontal handle, a vertical handle, and an opacity cross-fade.

***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. With only the free plugin active the widget does not render at all - there is not even an upgrade placeholder on the page.- **Switch it on:** go to **The Plus Addons > Widgets**, search for **Before After** and turn the toggle on.- **Have two images ready.** They line up best at the same size and aspect ratio - our test used a 1200x800 photo and a desaturated copy of the same photo.

## Steps

- Drag the **Before After** widget onto the page.- In the **Content** tab's **Content** section, pick a **Style**: **Horizontal**, **Vertical** or **Opacity**. The default is **Horizontal**.- Set **Image for Before** to the starting image, and optionally type a short **Label for Before** such as Before or Original.- Set **Image for After** to the finished image, and optionally a **Label for After**.- In the **Style** tab's **Options** section, turn **Separator Line** on. This is the step most people skip - see the warning below.

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

> ***Turn Separator Line on.** It is off by default, and with it off the before image starts collapsed to zero width - the page loads showing only the after image until the visitor moves the pointer over it. Turning **Separator Line** on also gives you **Separator Position**, which starts the handle at 50%.*

## The Style Tab: Options

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| **Alignment** | Aligns the whole widget in its container: **Left**, **Center** or **Right**. | **Left** |
| **Full Width** | Stretches the widget to its parent container's width. | Off |
| **Mouse Hover option** | Moves the handle as the pointer moves across the widget. | On |
| **Separator Line** | Draws the divider between the two images and unlocks the separator settings below. Not available for the **Opacity** style. | Off |
| **Separator Style** | **Middle** puts the handle across the image; **Bottom** puts it on a bar underneath. | **Middle** |
| **Separator Position** | Where the handle sits when the page loads, as a percentage. | 50 |
| **Separator Width**, **Separator Color**, **Separator Bottom Bg Color**, **Separator Icon** | Appearance of the divider and its grab handle. | Black divider |

![Mouse Hover option and the other controls in the Style tab's Options section.](https://theplusaddons.com/wp-content/uploads/2026/09/beforeafter-options.webp)

## What You Will See

On the live page the handle follows the pointer. We measured it: in a widget 565 px wide, moving the pointer to 25% of the width left 141 px of the before image showing; at 58% it was 328 px; at 75% it was 424 px. The two labels sit in opposite corners, and the before label fades out while the handle is close to it, so it never overlaps the divider.

![The horizontal handle dragged past the middle - before image on the left, after image on the right.](https://theplusaddons.com/wp-content/uploads/2026/09/beforeafter-result-horizontal.webp)

## The Three Styles

| Style | What moves | Doc |
| ----- | ---------- | --- |
| **Horizontal** | The before image is clipped by width as the handle moves left and right. | This page |
| **Vertical** | The before image is clipped by height as the handle moves up and down. Measured 92 px, 217 px and 281 px of 377 px at 25 / 58 / 75%. | [Vertical comparison slider](https://theplusaddons.com/docs/add-vertical-before-and-after-comparison-slider-in-elementor/) |
| **Opacity** | Nothing is clipped. The before image's opacity fades from 1 to 0 as the pointer crosses the widget - measured 0.751, 0.420 and 0.250 at the same three positions. | [Opacity slider](https://theplusaddons.com/docs/add-before-and-after-opacity-slider-in-elementor/) |

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

## How It Behaves

- The handle tracks the pointer horizontally for **Horizontal** and vertically for **Vertical**. The divider's cursor changes to a left-right arrow for horizontal and an up-down arrow for vertical.- With **Separator Line** on, the handle starts at the middle, matching **Separator Position**'s default of 50.- **Label for Before** is hidden while the handle is too near it and reappears once there is room, so the label never sits under the divider. The after label stays visible.- **Separator Line** and its settings are hidden when **Style** is **Opacity** - that style has no divider to draw.

## Limitations

- Pro only, and there is no free alternative widget for this.- With **Separator Line** off - which is the default - the before image starts at zero size and the page looks like it is only showing one image until the visitor interacts with it. This happens with both **Horizontal** and **Vertical**. Turn **Separator Line** on to avoid it.- The widget expects two images of the same shape. Different aspect ratios will not line up.- We only tested with **Mouse Hover option** left on, its default. Touch behaviour was not tested either.

## Troubleshooting

### The page only shows the after image until I move the mouse

This is the **Separator Line** default. Turn **Separator Line** on in **Style > Options**, and set **Separator Position** to where you want the handle to start.

### The Before After widget is not in the Elementor panel

Turn it on at **The Plus Addons > Widgets**, search **Before After**. If you are on the free plugin it will not be there at all.

### I cannot find the Separator Line switch

It is hidden when **Style** is set to **Opacity**. The opacity style has no divider.

### The two images do not line up

Use images with the same dimensions. If they differ, the shorter one will not fill the frame.

## Not verified

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

- **Mouse Hover option** switched off. Only the default was tested, so this page does not describe what changes when you turn it off.- **Full Width**, **Alignment**, **Image Resolution**, **Separator Style** set to **Bottom**, and everything in **Label Options**. Labels and defaults are listed; the effect was not observed.- Touch screens.- Two Before After widgets on the same page.

## Video Tutorial

https://www.youtube.com/watch?v=vi_lRiOeOfc

## Related Docs

- [How to Add a Vertical Before and After Comparison Slider in Elementor?](https://theplusaddons.com/docs/add-vertical-before-and-after-comparison-slider-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: Why does the before image disappear until I move the mouse in Elementor?**
A: That happens when Separator Line is off. In The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH the before image starts at zero width in Horizontal and Vertical styles, so the page looks like it is only showing the after image until the pointer moves. Turning Separator Line on fixes that and also starts the handle at 50% by default.

**Q: What is the best way to line up two images in a before/after slider?**
A: Use two images with the same dimensions and aspect ratio. The widget expects matching shapes, and the page notes that different aspect ratios will not line up. The example used a 1200x800 photo and a desaturated copy of the same photo, which is a good clue that keeping both images as close as possible avoids awkward cropping or empty space.

**Q: Which before/after style should I use for horizontal, vertical, or fade comparisons?**
A: Horizontal clips the before image by width as the handle moves left and right. Vertical clips it by height as the handle moves up and down. Opacity is different because nothing is clipped at all, it fades the before image from 1 to 0 as the pointer crosses the widget. That makes Opacity better for soft transitions, while Horizontal and Vertical are better when you want a clear split.

**Q: Does the before/after widget work on touch screens?**
A: The page only confirms mouse hover behavior, not touch behavior. It says Mouse Hover was left on during testing and that touch screens were not tested. That matters because Horizontal and Vertical both track pointer movement, so touch support should not be assumed from this page alone.

**Q: Why can’t I find the Separator Line switch in Elementor?**
A: Separator Line is hidden when Style is set to Opacity because that style has no divider to draw. In Horizontal and Vertical styles it unlocks separator settings like Separator Position, Separator Width, Separator Color, Separator Bottom Bg Color, and Separator Icon. If you are looking for divider controls, switch away from Opacity first.

**Q: Is there a free version of this before/after slider?**
A: The page says this extension is Pro only and there is no free alternative widget for it. With only the free plugin active, the widget does not render at all and there is not even an upgrade placeholder on the page. That makes it a hard requirement if you want to use this comparison slider inside Elementor.