Say you have a photo that only makes sense next to what it replaced. A retouched product shot, a room caught mid-renovation, a landing page before and after a redesign.
Two static images sitting side by side put all the work on the reader, who has to glance back and forth and guess what actually changed. A before/after image slider does that work for them.
One image sits on top of the other, and a drag handle wipes between the two so the change reveals itself in a single motion.
Elementor does not ship a native before/after widget, so this is an add-on job. Below is how to build one with no code, which settings actually matter, and the image-prep details most tutorials skip.
I will use The Plus Addons for Elementor because its Before After widget covers the modes you will reach for, but the ideas carry over to any addon you pick.
What a before after image slider actually is
A before/after image slider stacks two images in the same frame and puts a movable divider between them. Drag the handle left or right (or up and down, depending on the layout) and one image is revealed while the other is hidden.
It turns a comparison into an interaction, which is why people stop scrolling and actually play with it.
It earns its place anywhere the value of your work lives in the difference between two states:
- Photo editing and retouching, where the edit is the entire pitch.
- Real estate and home renovation, showing a room or exterior before and after work.
- Fitness and wellness, for transformation results.
- Dental, skincare, and cosmetic services, where results sell the treatment.
- Web and product design, comparing an old layout with a redesign.
Your options for adding one in Elementor
Since Elementor core has no comparison widget, you have three routes. You can hand-code one with a small JavaScript library, which works but means you own the maintenance forever.
You can install a single-purpose plugin like the free Before After Image Comparison Slider for Elementor. Or you can use an add-on suite you may already have, since most of them include this widget.
Several do: PowerPack, Element Pack, Ultimate Addons, and The Plus Addons for Elementor among them.
My honest take: if you are already running an Elementor add-on suite, use its widget rather than stacking a single-purpose plugin on top. Fewer plugins means fewer update conflicts and less script bloat.
If you are not, the free dedicated plugin is a perfectly reasonable start. If you want to compare full suites first, our roundup of the best free Elementor addons is a good place to look.
How to add a before after slider with The Plus Addons for Elementor
The Before After widget is part of The Plus Addons for Elementor. Once the plugin is installed and active, the whole build is drag, drop, and upload. Note that this particular widget sits in the Pro tier, so you will need The Plus Addons for Elementor Pro active to use it.
- Edit the page or post with Elementor and open the widget panel.
- Search for Before After and drag the widget onto your section.
- Under Content, set Image for Before and Image for After.
- Add a Label for Before and Label for After if you want text badges on each side, for example “Before” and “After” or “Original” and “Edited”.
- Preview, then adjust the mode and handle to taste.
That is the entire core setup. No shortcodes, no custom CSS. Everything after this is refinement.
Choosing your comparison mode
The widget offers three display styles under the Style setting, and the right one depends on the shape of your images:
- Horizontal (the default): the divider moves left and right. Best for wide, landscape images like room interiors or website screenshots.
- Vertical: the divider moves up and down. Good for tall or portrait shots where a top-to-bottom wipe reads more naturally.
- Opacity mode: instead of a hard wipe, the after image fades over the before image. Useful when the two images differ in tone rather than in one clear region, such as a color grade or lighting change.
Trigger, separator, and layout settings
By default the reader drags the handle. If you turn on the Mouse Hover option, the divider follows the cursor as it moves across the image, which feels effortless on desktop but does nothing on touch screens, so keep drag as the fallback.
A few more controls are worth knowing:
- Separator Line, Style, and Width: turn the divider line on, set its position, and control its thickness.
- Separator Color and Bottom Bg Color: match the divider and its handle to your brand.
- Separator Icon and Position: drop an icon into the handle so it clearly reads as draggable. If you want to recolor a custom icon, our guide to coloring custom SVG icons in Elementor covers it.
- Full Width and Alignment: let the slider fill its container or sit left, center, or right.
Styling the before and after labels
Under Label Options you can set the label Color, Padding, Border, and Border Radius. The only rule that matters here is legibility. The labels sit on top of your images, so give them enough padding and a background or border strong enough to stay readable over a busy photo.
Keep the wording short. “Before” and “After” beat a full sentence every time.
Image prep that makes or breaks it
This is the step every quick tutorial skips, and it is the one that separates a slider that looks sharp from one that looks broken. The widget only lines the images up if you feed it the right files:
- Use identical dimensions and aspect ratio. If the before and after are different sizes, the reveal will jump and the handle will not track cleanly. Crop both to the same pixel dimensions before uploading.
- Shoot or crop from the same angle. A fair comparison needs the same framing. A different camera position reads as a trick, not a result.
- Compress before you upload. Two full-size images load in one widget, so weight doubles fast. Serve them lean, ideally as WebP. See JPG vs WebP for the format tradeoffs, and how to fix blurry images in Elementor if compression softens them.
- Reserve the space. Because two images load, an unsized slider can push content around as it renders and hurt your layout stability. Fixed dimensions keep it from shifting, which matters for Elementor performance and Core Web Vitals.
Mobile and accessibility checks
Before you call it done, load the page on a phone. Drag has to work with a thumb, so confirm the handle is big enough to grab and that the default starting position shows enough of both images to invite a swipe.
If you enabled hover reveal, remember it does nothing on touch, so the drag fallback has to be solid. Finally, write real alt text on both images describing what each one shows, since the comparison itself is visual and a screen reader cannot infer it.
For more interactive image patterns, our image carousel in Elementor and carousel slider widget guides are worth a look.
Wrapping up
A before/after image slider is one of those small touches that does real work: it turns a passive comparison into something the visitor controls, and that tends to hold attention and make results feel credible.
The build itself is genuinely no-code. Pick your mode, prep two matching images, keep the labels legible, and test it on mobile. That is the whole job.
The Before After widget ships inside The Plus Addons for Elementor, alongside the rest of its widget library. If you want the comparison slider plus the other interactive widgets in one add-on, you can browse the full set and pricing below.
