Content · Elementor
Quick Card Grid widget for Elementor
A fast card grid with simple fields. Use when you do not need a post query or heavy animations.
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 fast card grid with simple fields. Use when you do not need a post query or heavy animations.
Quick Card Grid Widget (Free).
render() writes HTML data attributes: data-card-link, data-card-link-rel, data-card-link-target.
The widget script reads data attributes: data-card-link.
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 “Quick Card Grid”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Image”, “Title”, “Description”, “Button Text”. Style and Content tabs are listed on this page.
When to use it
- A features grid.
- A team of four without bios.
- A link hub.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Cards — Image | Media Library attachment(s); render() uses the URL/ID as the image source. |
| Cards — Title | Text inspector control (`kng_card_title`). |
| Cards — Description | Textarea inspector control (`kng_card_description`). |
| Cards — Button Text | Text inspector control (`kng_card_button_text`). |
| Cards — Button Link | Elementor URL control (href, new tab, nofollow) applied to a front-end link. |
| Cards — Make Whole Card Clickable | Editor safety: the card link is disabled in the Elementor editor to prevent accidental navigation. |
| Cards — Card Link | Elementor URL control (href, new tab, nofollow) applied to a front-end link. |
| Cards — Image Size | Elementor image-size group (thumbnail, medium, large, full, custom). |
| Cards | Repeater rows; render() loops each item to build the list or slides. |
| Layout — Columns | Writes CSS `grid-template-columns` onto the widget’s front-end markup. (default 3, min 1, max 6). |
| Layout — Gap | Writes CSS `gap` onto the widget’s front-end markup. (min 0, max 80). |
| Card — Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| Card — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-card-grid__card`. |
| Card — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 60). |
| Card — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-card-grid__card`. |
| Card — Disable Box Shadow | Switcher inspector control (`kng_card_shadow_disable`). |
| Card — Disable Box Shadow on Hover | Switcher inspector control (`kng_card_shadow_hover_disable`). |
| Card — Card Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Text — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-card-grid__title`. |
| Text — Title Color | Writes CSS `color` onto the widget’s front-end markup. |
| Text — Title Bottom Spacing | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 60). |
| Text — Typography (Kng Description Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-card-grid__description`. |
| Text — Description Color | Writes CSS `color` onto the widget’s front-end markup. |
| Text — Description Bottom Spacing | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 80). |
| Text — Text Alignment | The chosen value is read in render() and applied on the front end. Options: Left; Center; Right. |
| Button — Button Alignment | The chosen value is read in render() and applied on the front end. Options: Left; Center; Right. |
| Button — Button Text Alignment | The chosen value is read in render() and applied on the front end. Options: Left; Center; Right. |
| Button — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-card-grid__button`. |
| Button (Normal) — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Button (Normal) — Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| Button (Normal) — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-card-grid__button`. |
| Button (Normal) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-card-grid__button`. |
| Button (Hover) — Text Color | Writes CSS (button, color) onto the widget’s front-end markup. |
| Button (Hover) — Background | Writes CSS (button, background-color) onto the widget’s front-end markup. |
| Button (Hover) — Border Color | Writes CSS (button, border-color) onto the widget’s front-end markup. |
| Button (Hover) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-card-grid__button:hover`. |
| Button — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Button — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 80). |
| Button — Disable Box Shadow | Switcher inspector control (`kng_button_shadow_disable`). |
| Button — Disable Box Shadow on Hover | Switcher inspector control (`kng_button_shadow_hover_disable`). |
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 Quick Card Grid actually change on the page?
A fast card grid with simple fields. Use when you do not need a post query or heavy animations. Inspector labels from this widget’s PHP include “Image”, “Title”, “Description”, “Button Text”.
How do I add Quick Card Grid in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Quick Card 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 content widgets
Advanced Blog Posts Carousel
A carousel of blog posts with image, title, and meta — lighter than a full magazine grid.
Advanced Card Carousel
A carousel of cards you fill yourself (image, text, button) — not a post query.
Dynamic Posts Grid
A filterable grid of posts with AJAX search and Load More — for blogs and resource libraries.
Quick Card Slider
The slider version of Quick Card Grid: same cards, one row that moves.
Timeline Post/Story
A vertical or horizontal timeline for events, history, or a changelog.
Content Ticker
A scrolling ticker of posts or custom items for headlines and announcements.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Quick Card Grid after you activate it.