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

Key Takeaways

  • The Before After widget from The Plus Addons for Elementor allows users to create a vertical before and after slider.
  • Users select the Vertical option in the Style section to configure the Before After block.
  • The widget requires installation and activation of The Plus Addons for Elementor to function.
Table Of Content

Do you want to add a vertical before and after comparison slider in Elementor? Adding a vertical before and after comparison slider can help you showcase the transformation of vertical designs or elements on your website.

With the Before After widget from The Plus Addons for Elementor, you can easily create a vertical before and after 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 Vertical from the Style section.

Before after vertical new how to add a vertical before and after comparison 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 a vertical 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

How do I troubleshoot the vertical before and after comparison slider not displaying?

If the vertical before and after comparison slider isn't displaying, ensure that the Before After widget from The Plus Addons for Elementor is properly installed and activated. This widget is essential for creating the slider. Additionally, double-check that you've selected 'Vertical' in the Style section and that both before and after images are correctly uploaded.

What are the best practices for labeling images in the before and after slider?

When labeling images in the before and after slider, use clear and descriptive labels that convey the essence of the transformation. For instance, instead of generic labels like 'Before' and 'After', consider using specific terms that reflect the changes, such as 'Original Design' and 'Updated Design'. This clarity helps users understand the context of the comparison.

Does the vertical before and after comparison slider work with other page builders?

The vertical before and after comparison slider is exclusive to Elementor and is part of The Plus Addons for Elementor. It does not work with other page builders like Gutenberg, Beaver Builder, or Divi. If you're using Elementor, you can take full advantage of this widget's capabilities.

What features does the Before After widget from The Plus Addons for Elementor offer?

The Before After widget from The Plus Addons for Elementor allows you to create engaging before and after comparison sliders with ease. Key features include the ability to select vertical or horizontal orientations, add custom labels for each image, and adjust the slider's appearance to fit your website's design. For a complete feature overview, click here.

Last reviewed: April 9, 2026