Media · Elementor
Image Comparison widget for Elementor
A before/after slider. Two images, one divider the visitor drags.
Get King Addons
This page describes the PHP/JS for this widget — not a renamed stub. Install the free plugin from WordPress.org.
What it actually does
A before/after slider. Two images, one divider the visitor drags.
How to add it in Elementor
- Install King Addons. Install Elementor and King Addons. Get King Addons from WordPress.org.
- Edit with Elementor. Open a page and click Edit with Elementor.
- Insert the widget. Search the panel for “Image Comparison”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Image Before”, “Image Size”, “Image-Fit”, “Image After”. Style and Content tabs are listed on this page.
When to use it
- A renovation before/after.
- A retouching portfolio.
- A product “with vs without”.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| General — Image Before | Media Library attachment(s); render() uses the URL/ID as the image source. |
| General — Image Size | Elementor image-size group (thumbnail, medium, large, full, custom). |
| General — Image-Fit | Writes CSS `object-fit` onto the widget’s front-end markup. Options: None; Cover; Contain; Fill. |
| General — Image After | Media Library attachment(s); render() uses the URL/ID as the image source. |
| General — Image Size (Kng Image Comparison Image After Size) | Elementor image-size group (thumbnail, medium, large, full, custom). |
| General — Image-Fit (Kng Image Comparison Image After Fit) | Writes CSS `object-fit` onto the widget’s front-end markup. Options: None; Cover; Contain; Fill. |
| General — Box Maximum Height (px) | Writes CSS `max-height` onto the widget’s front-end markup. (default 600, min 50). |
| General — CSS Filter for Image Before | CSS filter group (blur, brightness, contrast, saturation). Selector: `{{WRAPPER}} .king-addons-image-comparison-image-before`. |
| General — CSS Filter for Image After | CSS filter group (blur, brightness, contrast, saturation). Selector: `{{WRAPPER}} .king-addons-image-comparison-image-after`. |
| General — Slider Line Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| General — Slider Button Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| General — Slider Initial Position | If there were previous moves of slider, then check the live site for updates on the slider initial position. |
| General — Select Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| General — Icon Color (optional) | Writes CSS (color, fill) onto the widget’s front-end markup. |
| General — Icon Size (px) | Writes CSS (font-size, width, height) onto the widget’s front-end markup. (default 22, min 1). |
| General — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-image-comparison-slider-button`. |
| General — Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-image-comparison-slider-button`. |
| General — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| General — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| General — Border (Kng Image Comparison Box Border) | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-image-comparison`. |
| General — Shadow (Kng Image Comparison Box Shadow) | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-image-comparison`. |
| General — Border Radius (Kng Image Comparison Border Radius) | Writes CSS `border-radius` onto the widget’s front-end markup. |
Content and Style tabs from this widget’s PHP, including repeater fields and group controls (typography, background, border, shadow). Elementor’s Advanced tab is core Elementor and is not listed here.
FAQ
What does Image Comparison actually change on the page?
A before/after slider. Two images, one divider the visitor drags. Inspector labels from this widget’s PHP include “Image Before”, “Image Size”, “Image-Fit”, “Image After”.
How do I add Image Comparison in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Image Comparison”, drag it onto the canvas, then set Content and Style.
Do I need Elementor Pro?
No. King Addons runs on free Elementor. Some King Addons options (for example template-in-accordion, extra popup conditions, parts of the template catalog) need King Addons Pro — not Elementor Pro.
Related media widgets
Image Hover Box
An image tile that reveals title, text, or a link on hover — for services and portfolios.
Hovering Image Stack
Stacked images that shift on hover so a set of shots reads as one object.
Image Grid
A masonry or fit-rows image grid. No post query — just images.
Vertical Scrollable Image
A tall image that scrolls inside a fixed frame on hover — useful for long page mockups.
Image Hotspots
Pins on an image. Each pin can show a tooltip or open extra content — CSS-based, not a heavy map.
Image Accordion
Panels of images that expand on hover or click. This is a gallery layout, not the FAQ Accordion widget.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Image Comparison after you activate it.