Compare images directly in Elementor
Before After Image Comparison Slider for Elementor Pro is designed for pages that need a clear visual comparison between two images. It works with Elementor Page Builder and lets you create sliders that reveal the relationship between before and after content through an interactive control.
The Pro edition is suitable for portfolios, service presentations, visual demonstrations, renovation examples, design work, and other layouts where two versions of an image need to be viewed together. You can create an unlimited number of sliders and place them on the same page.
Flexible comparison controls
Choose between two slider orientations: horizontal and vertical. Visitors can move the comparison with a mouse click on the image or by moving the mouse over it. These interaction options provide different ways to explore the image transition on desktop layouts.
The plugin also supports Dynamic Tags. You can change the image size, apply custom image dimensions, and set the default slider offset. Before and after text can be customized, helping you label each side of the comparison according to the content of your page.
Appearance and responsive presentation
Pro gives you control over the background and text colors used for the before-and-after labels. You can customize the background for both labels and adjust their text color to suit the surrounding design.
The slider is responsive and touch friendly, making it suitable for browsers, mobile devices, and other touch devices. The source also describes support for modern new browsers and devices. You can use the image dimensions provided by your theme or apply custom width and height values for the images.
Live editing and site-wide styling
While editing a slider, you can preview how it will look on the website. This live preview helps you review the comparison before completing the page design. The product also includes Custom CSS for overriding default styling, along with Global Custom CSS and Global Custom JS options for broader control.
The Pro edition includes the free features described for the plugin, including responsive behavior, touch support, custom image dimensions, live preview, Custom CSS, and unlimited sliders.
Related display extensions
Two related add-ons are described for extending the slider presentation. Gallery Slider AddOn can display sliders as a slideshow with image navigation. Carousel Slider AddOn can display sliders with an image carousel. These are presented as separate add-ons for extending the appearance of the slider.
Installation and workflow
After adding the Pro product to your Elementor-based workflow, create a slider with the before and after images, choose an orientation, and set the interaction and display options. Use the live preview while editing, then adjust labels, colors, dimensions, and custom styling to match the page.
