Roy 
Static side-by-side images don’t do your work justice. A photo edit, a home renovation, a product transformation, they all deserve better than two pictures sitting next to each other. An elementor image comparison slider fixes that. Visitors drag a handle across the image to reveal the before and after versions themselves, and that bit of interaction keeps them on your page longer.
I’ve been using the Master Addons Image Comparison widget on client landing pages, and it consistently gets more engagement than static screenshots. This tutorial covers setup, customization, and a few things worth knowing before you publish. The widget is free, it sits inside Elementor’s panel like any other widget, and you can have it running in about two minutes.
An image comparison slider layers two images on top of each other with a draggable divider between them. Users slide it left and right (or up and down) to reveal one image over the other. You set a “before” image and an “after” image in the editor, and the widget handles the rest.
You’ve probably seen these on photography portfolios, dental websites, or real estate pages showing renovation projects. Instead of passively looking at two separate photos, visitors physically interact with the comparison. That interaction increases time on page, which helps your SEO and pulls down bounce rates.
Anyone who wants to show a transformation. These are the use cases I run into most often:
Website redesigns look great in a comparison slider. Letting a potential client drag between the old and new design builds more trust than a flat screenshot ever will. You can pair this with the Image Hover Effects widget if you want extra visual variety on portfolio pages.
Probably the most natural fit. If you do retouching, color grading, or restoration work, an image comparison slider lets potential clients see exactly what you can do. Raw file on the left, edited version on the right. Says more than any caption could.
Selling skincare, cleaning products, or anything with visible results? A before after image comparison on your product page is more convincing than a paragraph of copy. I’ve seen this work particularly well for cosmetic and home improvement products where the visual difference is dramatic.
Renovation projects are a natural match. Take a photo before the work starts, take another when it’s done, drop both into the comparison widget. Your portfolio gets more interactive, and visitors tend to spend more time browsing your projects.
Analytics dashboards, ad performance, website traffic charts. Show the “before working with us” and “after working with us” results with a drag-to-compare slider. Works better than pasting two screenshots into a case study.
There are several ways to add a before after slider in Elementor. Some require standalone plugins, some need custom code, and some are locked behind premium addon subscriptions. Master Addons includes the Image Comparison widget in the free version. Worth noting because most competing addons (Ultimate Addons, PowerPack, The Plus Addons) put this feature behind a paywall.
The widget includes:
Master Addons has 76+ widgets and extensions total. The image comparison widget is one that comes up a lot in landing page and portfolio projects.
Before you start, you need both Elementor and Master Addons installed and activated. Both are free. Go to Plugins > Add New, search for each plugin name, install, and activate.
The Image Comparison widget is enabled by default. If you’ve turned off some widgets to keep your panel lean, check that it’s still on. Go to Master Addons > Addons & Extensions in your WordPress dashboard and confirm Image Comparison is toggled on. The Image Comparison documentation has the full setup details. While you’re in that dashboard, you might notice other widgets worth turning on, like Animated Headline or Gallery Slider.
Create a new page or open an existing one with Elementor. I’ve created a fresh landing page for this tutorial, but the comparison slider drops into any existing page the same way.
In the Elementor panel on the left, search for “Image Comparison” (you’ll see the Master Addons icon next to it). Drag the widget into your page wherever you want the slider to appear.
Click the widget and you’ll see two image upload fields: one for the before image, one for the after image. Upload both, and the preview updates immediately with the divider handle in the center.
Quick heads-up: both images should be the same dimensions. If one is 1200×800 and the other is 900×600, the layout will look off. Crop them to the same size before uploading. This trips people up more than anything else.
The default labels say “Before” and “After,” but you can change these to anything. Selling a product? Use “Without” and “With.” Showing a renovation? Try “Day 1” and “Finished.” The label fields accept any text, including non-English characters, so localization isn’t a problem.
Under the Content tab, there are a few more settings worth adjusting:
Switch to the Style tab for visual customization. You can change the divider color, add a border around the comparison container, adjust label typography (font family, size, weight), add box shadows, and control spacing. Spend a couple minutes here to match your site’s design. There’s enough control that you won’t end up with a generic-looking slider.
Hit Publish and your before after slider is live. About two minutes from start to finish, assuming your images are ready.
The widget handles the technical side, but the comparison itself is only as good as your setup. A few things I’ve picked up from building these on client sites:
I mentioned this already, but it’s the mistake I see most often. If your before image is 1920×1080 and your after image is 800×600, the slider will force them to align and the result looks distorted. Crop both images to the exact same pixel dimensions before uploading. Every time.
Take both photos from the same angle, same distance, same framing. If your before photo is a wide shot and the after is a close-up, the contrast doesn’t land the way you want. The slider looks best when the only difference between the two images is the actual change.
Put the most visible change near the center of the image. That’s where the divider starts, so it’s the first thing people notice when they interact with the slider. If the change is off to one side, adjust the visibility ratio to draw attention to it.
One strong comparison per page section is enough. I’ve seen pages with five or six sliders stacked on top of each other, and it waters down the impact. Pick your best before-and-after pair and feature that one. If you have multiple comparisons, organize them in a Filterable Image Gallery or Image Carousel instead.
If the comparison sits on a sales or portfolio page, drop a call-to-action button right below it. Someone who just dragged through an impressive transformation is already engaged. A “Get a Free Quote” or “Shop Now” button right there tends to convert well.
Most setups just work, but a few things trip people up. Here’s how to fix the ones I get asked about.
If none of these fix it, post the details in the Master Addons support forum with your theme and active plugins, it’s usually a conflict that’s quick to pin down.
A quick look at how Master Addons compares to other wordpress image comparison slider options for Elementor:
| Feature | Master Addons | Ultimate Addons (UAE) | ElementsKit | PowerPack |
|---|---|---|---|---|
| Free image comparison widget | Yes | No (Pro only) | Yes | No (Pro only) |
| Horizontal + vertical | Yes | Yes | Yes | Yes |
| Custom label text | Yes | Yes | Yes | Yes |
| Mouse hover mode | Yes | Yes | No | Yes |
| Visibility ratio control | Yes | Yes | No | Yes |
| Mobile touch/swipe | Yes | Yes | Yes | Yes |
| Total widgets in addon | 76+ | 40+ | 90+ | 60+ |
The big difference is free availability. If you don’t want to pay for a Pro addon just to get a before-and-after slider, Master Addons and ElementsKit are your options. Master Addons also includes text overlay techniques and image hover effects in the free tier, so you get a wider set of image tools without upgrading.
The image comparison widget is one of 76+ elements and extensions in Master Addons for Elementor. A lot of users install it for one widget and end up using several others on the same project. That’s how I got started with it too.
Beyond individual widgets, you get a Theme Builder for custom headers, footers, and archive pages. There’s a Popup Builder with exit intent and scroll triggers. And a Template Library with pre-built sections you can import in one click.
V3.0.0 is noticeably faster than older versions, the plugin is actively maintained, and it’s running on 40,000+ WordPress sites. Master Addons Pro adds the Widget Builder, White Label mode, and premium support if you need those down the line.
Setting up a before after image comparison slider in Elementor takes a couple of minutes with Master Addons. No code, no premium addon purchase, no separate comparison plugin to install. The widget is free, works with any Elementor setup, and the customization covers everything from label text to divider color.
Download Master Addons for free and try the Image Comparison widget on your next project. If you need more across your Elementor builds, check out the Pro plans.
Related reading: Elementor Image Carousel Tutorial | Elementor Filterable Gallery Plugins | 25 Elementor Text Over Image Techniques
Install Master Addons (free), open your page in Elementor, search for the Image Comparison widget in the panel, and drag it onto your page. Upload your before and after images, adjust the labels if you want, and publish. Takes about two minutes.
Yes. Master Addons includes a free Image Comparison widget with horizontal/vertical modes, custom labels, drag and hover controls, and full style options. No Pro upgrade needed.
For Elementor users, Master Addons is a solid free option with native integration and multiple control styles. If you are not on Elementor, standalone plugins like BEAF (Before After Gallery) work with Gutenberg and other builders.
Use Elementor with the Master Addons Image Comparison widget. Drag it onto your page, upload two images, configure settings from the visual panel. No code needed at any point.
Yes. The widget is responsive and supports touch gestures. Visitors swipe the divider with their finger to compare images, same as dragging on desktop.
Both images need to be the exact same dimensions. 1200×800 or 1920×1080 are common choices. Mismatched sizes cause the slider to force-align them, which distorts the comparison.
In the widget settings, look for the Orientation option under the Content tab. Switch between Horizontal (left/right divider) and Vertical (top/bottom divider). Horizontal is the default.
Not meaningfully, as long as your images are optimized. The widget script is lightweight; the real weight is the two images themselves. Serve them as compressed WebP at the size they actually display and keep each around 150KB or less, and the slider adds negligible load time.
Almost always caching or a script conflict. Purge your page cache (LiteSpeed, Cloudflare, or WP Rocket) and hard-reload. If the handle still will not drag, exclude Master Addons JavaScript from any combine or defer setting, clear the cache, and retest. A recently disabled Image Comparison widget in the Master Addons Addons and Extensions panel is the other common cause.
Get all the premium widgets and templates you desire, built with clean code that keeps your site fast. Ditch the bloat, not the features.
110+ Premium Widgets & Lifetime Updates – Build Beyond Limits. An Exclusive Creation by Pixar Labs
Every Master Addons Pro license comes with a 14-day no-questions refund, lifetime updates, and priority support. Try it risk-free this Spring – 40% OFF with “RESET40″ coupon.
