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

Key Takeaways

  • The Before After widget from The Plus Addons for Elementor allows users to create a before and after opacity slider.
  • Users must select Opacity from the Style section to configure the Before After widget.
  • The widget requires installation and activation of The Plus Addons for Elementor to function properly.
Table Of Content

Are you looking to add a before and after opacity slider in Elementor? Adding a before and after opacity comparison slider can add a visual touch to your website as the images slowly blend over each other as you move your cursor.

With the Before After widget from The Plus Addons for Elementor, you can easily create a before and after opacity slider in Elementor.

To check the complete feature overview documentation of The Plus Addons for Elementor Before After widget, click here.

Requirement  – This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.

To do this, add the Before After block on the page and follow the steps –

1. Select the Opacity from the Style section.

Before after opacity new how to add a before and after opacity slider in elementor? From the plus addons for elementor

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 an opacity before and after comparison slider.

About the Author

Photo of Aditya Sharma CMO of The Plus Addons for Elementor
CMO · The Plus Addons for Elementor · 10 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordPressElementorn8nAIClaudeAutomationServer
Get Instant Answers to all your questions about The Plus Addons for Elementor, trained on 1000+ Docs and Videos

Related Frequently Asked Questions

What should I do if the before and after opacity slider isn't displaying correctly?

If the before and after opacity slider isn't showing up, ensure that the Before After widget from The Plus Addons for Elementor is installed and activated. This widget is essential for creating the slider. If it's activated and still not working, double-check that you've added images in both the 'Image for Before' and 'Image for After' sections.

What settings work best for the before and after opacity slider in Elementor?

For optimal results with the before and after opacity slider, use high-quality images that clearly illustrate the differences. Ensure that the images are similar in size and aspect ratio for a seamless transition. You can adjust the opacity settings in the Style section to enhance the blending effect, making it more visually appealing.

What happens if I forget to add a label for the before or after image?

If you skip adding a label for the before or after image, the slider will still function, but it may lack context for your visitors. Labels help clarify what each image represents, enhancing user understanding and engagement. It's a good practice to include descriptive labels to improve the overall user experience.

Does the before and after opacity slider work on mobile devices?

The before and after opacity slider is designed to be responsive, meaning it should work on mobile devices. However, always test the slider on various screen sizes to ensure that the images display correctly and the slider functionality remains intact. This ensures a consistent user experience across all devices.

Last reviewed: April 9, 2026