The Hero Compare widget turns a flat claim into proof a visitor can feel. Instead of telling people your work makes a difference, you hand them a draggable handle and let them wipe between the before and the after for themselves. Two images sit in perfect register, and a single slider reveals one over the other as the pointer moves. Built natively for Elementor, this widget brings interactive before-and-after storytelling to any page without plugins to stitch together or a single line of code to write.
What Is the Hero Compare Widget?
The Hero Compare is an interactive before-and-after image slider. You give it two images, a handle, and optional labels, and visitors drag horizontally or vertically to compare them. It supports a single comparison or a whole carousel of them, with dots, arrows, and autoplay, plus overlay titles and descriptions that explain each pair. Because the reveal is driven by pure CSS and a light script, it stays smooth on phones and desktops alike, and every label, color, and handle style is editable straight from the Elementor canvas with nothing to code by hand.
Key Features of the Hero Compare Widget
This Elementor slider ships with the controls a real portfolio actually needs:
- Horizontal or vertical comparisons, with four handle styles and an adjustable starting position.
- Single or carousel mode, the latter with dots, arrows, and optional autoplay for multiple pairs.
- Corner labels and full overlay text, so each before-and-after can carry its own title and note.
- Complete control over handle, label, and typography styling to match any brand.
Why Use the Hero Compare Widget on Your Site?
Some results only land when people see them for themselves. A renovation, a retouch, a clean-up, a redesign: described in words it sounds like everyone else’s pitch, but shown as a slider it becomes undeniable. The Hero Compare widget gives visitors something to do, and that small interaction holds attention far longer than a static pair of thumbnails ever could. It loads fast and keeps your Core Web Vitals healthy because there is no heavy video doing the work, only two optimized images and a thin layer of motion. Labels and overlay text mean the comparison explains itself, so it works just as well inside a case study as it does at the top of a landing page. It is responsive and touch friendly, so the same drag that feels natural with a mouse feels just as natural under a thumb, which is exactly why before-and-after sliders convert.
Getting Started With Hero Compare in Minutes
Drop the widget into any Elementor section and add a comparison in the repeater. Give it a before image and an after image, set the two labels, and, if you like, an overlay title and description. Choose horizontal or vertical, pick one of the four handle styles, and set where the slider starts. Turn on carousel mode to stack several pairs with dots and arrows, style the handle and labels to your brand, and preview. Everything updates live in the editor, so you shape the final result without touching code.
See the Hero Compare in Action
The demo page below shows three live builds across very different brands, each with its own orientation, handle, and pacing. Grab a handle and drag it back and forth, then picture your own before-and-after work in its place. It is the fastest way to judge what this Elementor slider can do for your portfolio before you commit to a layout.
The Hero Compare widget is part of the Sentio Addons for Elementor collection, alongside dozens of other performance-first tools. Add it to your toolkit, pair it with your best transformations, and let your results speak for themselves.