---
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-04-09
author: "Aditya Sharma"
description: "Adding a before and after slider to your website can be an effective way to showcase the transformation of a product or service. It allows your audience to visually see..."
image: https://theplusaddons.com/wp-content/uploads/2024/04/After-Image-Comparison-in-Elementor_-1024x536.jpg
word_count: 538
---

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

## Key Takeaways

- The Before After widget from The Plus Addons for Elementor allows users to create different types of before and after comparison sliders.
- Three Slider Styles are available: Horizontal, Vertical, and Opacity for customizing the before and after comparison.
- The PRO version of The Plus Addons for Elementor is required to access the Before After widget.

Adding a before and after slider to your website can be an effective way to showcase the transformation of a product or service. It allows your audience to visually see the difference and can be a powerful marketing tool.  

With the Before After widget from The Plus Addons for Elementor, you can easily add different types of before and after comparison sliders in Elementor.

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

## Required Setup

- [Elementor FREE Plugin](https://wordpress.org/plugins/elementor/) installed & activated.

- You need to have [The Plus Addons for Elementor](https://wordpress.org/plugins/the-plus-addons-for-elementor-page-builder/) plugin installed and activated.

- This is a Premium widget, and you need the [PRO version of The Plus Addons for Elementor.](https://theplusaddons.com/pricing//?utm_source=tpae&utm_medium=docs&utm_campaign=text)

- Make sure the Heading Animation widget is activated, to verify this visit The Plus Addons → Widgets → and Search for Before After and activate.

## Learn via Video Tutorial:

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

## How to Activate the Before After Widget?

Go to 

- **The Plus Addons **→** Widgets **

- **Search **the widget name** **and** turn on the toggle.**

![](https://theplusaddons.com/wp-content/uploads/2024/04/before-after-images-1024x358.png)

## Key Features

- **Three Slider Styles** - You can select from three different before and after slider styles.

## How to Add an Elementor Before and After Slider?

Add the Before After widget from The Plus Addons for Elementor to the page. 

> *Note: By clicking on the **Import Presets** button, you can import a ready-made design and customize it as per your requirements.*

From the **Style** section, you have to select the slider style. Here you’ll find three options.

- **Horizontal** - To create a horizontal before and after slider.

- **Vertical** - To create [a vertical before and after comparison slider.](https://theplusaddons.com/docs//add-vertical-before-and-after-comparison-slider-in-elementor/)

- **Opacity** - To create [a before and after opacity slider.](https://theplusaddons.com/docs//add-before-and-after-opacity-slider-in-elementor/)

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

Select the option as per your requirements. Let’s select Horizontal here.

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.

Then 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.

From the **Image Resolution** dropdown, you can manage the image size.

## How to Style the Before After Widget?

To style the Before After widget, you’ll find all the options under the **Style** tab.

**Content** - Here, you’ll find different options to style the before after slider.

- **Alignment** - Form here, you can align the slider in the container.

- **Full Width** - By enabling this toggle, you can make the slider full width to its parent container.

- **Mouse Hover option** - By enabling this toggle, you can move the slider separator line along with the mouse cursor. When disabled you have to click on different parts of the image to move the separator line.

- **Separator Line** - By enabling this toggle, you'll get options to style the separator line.

> *Note: For the Opacity option, you won’t see the Separator Line toggle.*

![before after style](https://theplusaddons.com/wp-content/uploads/2024/04/before-after-style.png)

**Label Options** - From here, you can style the slider labels.

**On Scroll View Animation** -  This is our global extension available for all our widgets, this adds scrolling animation as the widget comes in the viewport. You can learn more about this from here.

Advanced options remain common for all our widget, you can explore all it options from here.

[View Advanced tab tutorial.](https://docs.posimyth.com/tpae/advanced-tab/)

## Frequently Asked Questions

**Q: What are the key features of the Before After widget in Elementor?**
A: The Before After widget from The Plus Addons for Elementor offers three slider styles: horizontal, vertical, and opacity. This flexibility allows you to choose the best visual representation for your content. For instance, a horizontal slider is ideal for side-by-side comparisons, while a vertical slider can be more effective for top-to-bottom transformations.

**Q: How do I activate the Before After widget in The Plus Addons for Elementor?**
A: To activate the Before After widget, navigate to The Plus Addons u2192 Widgets in your WordPress dashboard. Search for the widget name and toggle it on. This step is essential to ensure that the widget is available for use on your Elementor pages.

**Q: What are the best practices for styling the Before After widget?**
A: When styling the Before After widget, consider using the alignment options to fit the slider within your design. Enabling the full-width toggle can enhance visibility, while the mouse hover option allows for interactive user engagement. These settings help create a more dynamic and visually appealing comparison.

**Q: Does the Before After widget support mobile devices?**
A: The Before After widget is designed to be responsive, meaning it will work on mobile devices. However, always test the slider on various screen sizes to ensure that the images and functionality display correctly. This ensures a seamless experience for all users.

**Q: What common mistakes should I avoid when setting up the Before After slider?**
A: A common mistake is not properly sizing the images for the Before After slider. Ensure that both images are of similar resolution to avoid distortion. Additionally, neglecting to label the images can confuse users, so always provide clear labels for both the before and after images.