---
title: "How to Add a Before and After Opacity Slider in Elementor?"
url: https://theplusaddons.com/docs/add-before-and-after-opacity-slider-in-elementor/
date: 2024-04-11
modified: 2026-08-05
lang: en
author: "Aditya Sharma"
description: "Are you looking to add a before and after opacity slider in Elementor? An opacity comparison slider blends two images together as the viewer moves their cursor, making it a..."
image: https://theplusaddons.com/wp-content/uploads/2024/04/How-to-Add-a-Before-and-After-Opacity-Slider-in-Elementor_-1024x536.jpg
word_count: 296
---

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

## 

- The Plus Addons for Elementor Before After widget crea un control deslizante de opacidad directamente en el editor de Elementor, donde dos imágenes se funden a medida que el visitante mueve el cursor.
- La opción Opacity en la sección Style activa el modo de mezcla por opacidad, y los campos Image for Before e Image for After definen la imagen inicial y la imagen del estado final.
- Los campos Label for Before y Label for After permiten añadir etiquetas cortas como “Before” u “Original”, lo que ayuda a identificar de inmediato cada lado de la comparación.

Are you looking to add a before and after opacity slider in Elementor? An opacity comparison slider blends two images together as the viewer moves their cursor, making it a strong visual choice for product showcases, portfolio reveals, and transformation demonstrations.

The Before After widget in [The Plus Addons for Elementor](https://theplusaddons.com/) lets you create this effect directly in the Elementor editor.

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

**Best Used For:**

- Photography portfolio sites showing original vs. edited images- Beauty, home renovation, or fitness websites highlighting transformation results- SaaS products or design tools demonstrating interface states side by side

***Requirement – This widget is a part of The Plus Addons for Elementor, make sure it is installed and 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 widget to the page and follow the steps -

1. Select **Opacity** from the **Style** section. This sets the widget to use the opacity blend mode, where the two images fade into each other as the viewer moves their cursor.

![Before After widget opacity mode in The Plus Addons for Elementor](https://theplusaddons.com/wp-content/uploads/2024/04/before-after-opacity-new.gif)

2. In the **Image for Before** section, add the image you want to show as the starting state.

In the **Label for Before** field, add a short text label for the before image, such as “Before” or “Original.” Use this when you want to help visitors immediately identify which side of the comparison they are viewing.

3. In the **Image for After** section, add the image for the after state.

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

The widget will now show an opacity before and after comparison slider on the page.

***Suggested Read:** [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/)*