Media · Elementor
Image Grid widget for Elementor
A masonry or fit-rows image grid. No post query — just images.
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 masonry or fit-rows image grid. No post query — just images.
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 Grid”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Grid Layout”, “Image Height (px)”, “Image Fit”, “Image Fit Position”. Style and Content tabs are listed on this page.
When to use it
- A photography index.
- A mood board.
- A simple gallery page.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Grid Settings — Grid Layout | The chosen value is read in render() and applied on the front end. Options: Fit Rows; Masonry. |
| Grid Settings — Image Height (px) | Writes CSS `height` onto the widget’s front-end markup. (default 200, min 0). |
| Grid Settings — Image Fit | Writes CSS `object-fit` onto the widget’s front-end markup. Options: Cover; Contain. |
| Grid Settings — Image Fit Position | Writes CSS `object-position` onto the widget’s front-end markup. Options: Top; Bottom; Left; Right; Center. |
| Grid Settings — Number of columns | Writes CSS `width` onto the widget’s front-end markup. (min 1). |
| Grid Settings — Space between (px) | Writes CSS `padding` onto the widget’s front-end markup. (min 0). |
| kng_image_grid_content_items — Image | Media Library attachment(s); render() uses the URL/ID as the image source. |
| kng_image_grid_content_items — Image Size | Elementor image-size group (thumbnail, medium, large, full, custom). |
| Items — Kng Image Grid Content Items | Repeater rows; render() loops each item to build the list or slides. |
| Image — Scale image on hover | Switcher inspector control (`kng_image_grid_image_scale_switcher`). |
| Image — Scale size | Writes CSS (img, transform) onto the widget’s front-end markup. (default 1.1, min 0). |
| Image — Transition duration on hover (ms) | Writes CSS `transition` onto the widget’s front-end markup. (default 300, min 0). |
| Image — CSS Filter | CSS filter group (blur, brightness, contrast, saturation). Selector: `{{WRAPPER}} .king-addons-image-grid-item img`. |
| Image — CSS Filter for image on hover | CSS filter group (blur, brightness, contrast, saturation). Selector: `{{WRAPPER}} .king-addons-image-grid-item img:hover`. |
| Image — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-image-grid-item .king-addons-image-grid-item-inner`. |
| Image — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-image-grid-item .king-addons-image-grid-item-inner`. |
| Image — 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 Grid actually change on the page?
A masonry or fit-rows image grid. No post query — just images. Inspector labels from this widget’s PHP include “Grid Layout”, “Image Height (px)”, “Image Fit”, “Image Fit Position”.
How do I add Image Grid in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Image Grid”, 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
Hovering Image Stack
Stacked images that shift on hover so a set of shots reads as one object.
Image Comparison
A before/after slider. Two images, one divider the visitor drags.
Image Hover Box
An image tile that reveals title, text, or a link on hover — for services and portfolios.
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.
Advanced Image Gallery
A gallery of images and optional videos from the Media Library or a manual list, with lightbox.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Image Grid after you activate it.