Before and After Image Compare for Elementor

When a site needs to show how an image changes from one state to another, a side-by-side display may not make the difference easy to explore. This plugin presents two images in an interactive slider, so visitors can move between the before and after views. It suits portfolios, e-commerce sites, and service provider websites that use visual comparisons to explain their work.

Add image comparisons to an Elementor page and adjust the presentation to fit the content. Choose a horizontal or vertical slider, set its size and height, and customize the text labels and navigation icons. Movement can be controlled through hover, click, or swipe gestures. Multiple comparisons can appear on one page, and the responsive design adapts the sliders to different screen sizes.

Features

• Multiple comparisons: Add unlimited before-and-after sliders to a single page to present several transformations, results, or image comparisons.
• Slider orientation: Choose a horizontal or vertical comparison line to suit the images and the layout of the page.
• Movement controls: Set the slider handle to respond to hover, click, or swipe gestures, giving visitors different ways to compare images.
• Adjustable dimensions: Specify the slider size and height to fit the comparison into the space available in your page design.
• Custom text labels: Personalize the captions for each side of the comparison to describe the images shown to visitors.
• Image overlays: Add overlays to the comparison images to change how they appear within the slider.
• Responsive display: The responsive design adapts image comparison sliders to different screen sizes, keeping them suited to a range of devices.

Best for

• Photographers presenting image transformations
• Designers building visual portfolios
• Businesses showing product or service results