Content · Elementor
Posts Grid & Slider widget for Elementor
Posts in a grid, slider, or carousel with query and layout controls (the Posts Grid widget).
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
Posts in a grid, slider, or carousel with query and layout controls (the Posts Grid widget).
render() writes HTML data attributes: data-ajax-filter, data-brackets, data-e-disable-page-transition, data-filter, data-img-on-hover, data-overlay-link, data-parent, data-role.
Content is loaded with WP_Query in PHP (not a hardcoded list in the editor).
get_script_depends() enqueues: lightgallery-lightgallery.
Some inspector controls are marked Pro in PHP (eicon-pro-icon / king-addons-pro-control). Those need King Addons Pro, not Elementor Pro.
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 “Posts Grid & Slider”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Source”, “Selection”, “Order By”, “Order”. Style and Content tabs are listed on this page.
- Preview the published page. render() writes HTML data attributes: data-ajax-filter, data-brackets, data-e-disable-page-transition, data-filter, data-img-on-hover, data-overlay-link, data-parent, data-role.
When to use it
- A homepage “latest posts” row.
- A category landing.
- A related-posts slider.
Tip: After King Addons is active, type king in the Elementor search box to list every widget, including Posts Grid & Slider.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Query — Source | Selects the value used for WP_Query ignore_sticky_posts. |
| Query — Selection | Selects the value used for WP_Query ignore_sticky_posts. Options: Dynamic; Manual. |
| Query — Order By | The chosen value is read in render() and applied on the front end. Options: Date; Title (Pro); Last Modified (Pro); Post ID (Pro); Post Author (Pro); Comment Count (Pro); Custom Field (Pro). |
| Query — Order | The chosen value is read in render() and applied on the front end. Options: Ascending; Descending. |
| Query — Select Taxonomy | The chosen value is read in render() and applied on the front end. |
| Query — Authors | Ajax Select2: options load from a King Addons admin-ajax endpoint. |
| Query — Items Per Page | WP_Query `posts_per_page` — how many posts are fetched (default 9, min 0). |
| Query — Slides to Show | Numeric value used in this widget’s render/JS (default 4, min 0, max 4). |
| Query — Offset | WP_Query `posts_per_page` — how many posts are fetched (default 0, min 0). |
| Query — Not Found Text | Printed in the widget HTML from render(). |
| Query — Display Only Scheduled (Pro) | Switcher inspector control (`display_scheduled_posts`). |
| Query — Randomize Query (Pro) | Switcher inspector control (`query_randomize`). |
| Query — Exclude Items without Thumbnail | When this switch is on, render() outputs the wrapped markup. |
| Layout — Select Layout | Selects the value used for prev/next carousel arrows. Options: FitRows - Equal Height; List Style; Slider / Carousel; Masonry - Unlimited Height (Pro). |
| Layout — Last Element to Bottom | Switcher inspector control (`stick_last_element_to_bottom`). |
| Layout — Last Element Position | Writes CSS `div` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Layout — Image Size | Elementor image-size group (thumbnail, medium, large, full, custom). |
| Layout — Columns | The chosen value is read in render() and applied on the front end. Options: One; Two; Three; Four (Pro); Five (Pro); Six (Pro). |
| Layout — Hide Post Thumbnail | Completely hide the post featured image/thumbnail in the grid. |
| Layout — Alignment | The chosen value is read in render() and applied on the front end. Options: Left; Right; ZigZag. |
| Layout — Width | Spacing/size control (min 0, max 100). |
| Layout — Distance | Spacing/size control (min 0, max 100). |
| Layout — Horizontal Gutter | Spacing/size control (min 0, max 150). |
| Layout — Vertical Gutter | Spacing/size control (min 0, max 150). |
| Layout — Show Filters | Switcher inspector control (`layout_filters`). |
| Layout — Show Pagination | Please note that Pagination doesn't work in editor. |
| Layout — Filters & Load More Dynamic Loading (beta feature) | Switcher inspector control (`filters_experiment`). |
| Layout — Open Links in New Tab (Pro) | Switcher inspector control (`open_links_in_new_tab`). |
| Layout — Lazy Loading (Pro) | When this switch is on, render() outputs the featured image. |
| Layout — Select Animation | The chosen value is read in render() and applied on the front end. Options: None; Zoom; Fade (Pro); Fade + SlideUp (Pro). |
| Layout — Animation Duration | Numeric value used in this widget’s render/JS (default 0.3, min 0, max 5). |
| Layout — Animation Delay | Numeric value used in this widget’s render/JS (default 0.1, min 0, max 5). |
| Layout — Columns (Carousel) | The chosen value is read in render() and applied on the front end. Options: One; Two; Three (Pro); Four (Pro); Five (Pro); Six (Pro). |
| Layout — Slides to Scroll | Numeric value used in this widget’s render/JS (default 1, min 1, max 10). |
| Layout — Gutter | Writes CSS `margin-left` onto the widget’s front-end markup. (min 0, max 50). |
| Layout — Navigation | Switcher inspector control (`layout_slider_nav`). |
| Layout — Show on Hover (Pro) | Switcher inspector control (`layout_slider_nav_hover`). |
| Layout — Select Icon | Selects the value used for prev/next carousel arrows. Options: Angle; Angle Double; Arrow; Arrow Circle; Arrow Circle Alt; Long Arrow; Chevron. |
| Layout — Pagination | Switcher inspector control (`layout_slider_dots`). |
| Layout — Pagination Layout | Options: Horizontal; Vertical (Pro). |
| Layout — Autoplay (Pro) | Passed through to Swiper autoplay. |
| Layout — Infinite Loop | Switcher inspector control (`layout_slider_loop`). |
| Layout — Effect | The chosen value is read in render() and applied on the front end. Options: Slide; Fade. |
| Layout — Effect Duration | Numeric value used in this widget’s render/JS (default 0.7, min 0, max 5). |
| Grid Elements — Select Element | The chosen value is read in render() and applied on the front end. |
| Grid Elements — Show Last Update Date | When this switch is on, render() outputs the wrapped markup. |
| Grid Elements — Location | Options: Above Media; Over Media; Below Media. |
| Grid Elements — Display | Options: Inline; Separate Line; Custom Width. |
| Grid Elements — Element Width | Writes CSS `width` onto the widget’s front-end markup. (min 0, max 100). |
| Grid Elements — Vertical Align | Options: Top; Middle; Bottom. |
| Grid Elements — Horizontal Align | Writes CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Grid Elements — Title HTML Tag | The chosen value is read in render() and applied on the front end. Options: H1; H2; H3; H4; H5; H6; div; span…. |
| Grid Elements — Enable Drop Cap | When this switch is on, render() outputs the wrapped markup. |
| Grid Elements — Trim Text By | Selects the value used for the excerpt produced by wp_trim_words(). |
| Grid Elements — Word Count | Word count passed to WordPress excerpt trimming for each card (default 20, min 1). |
| Grid Elements — Letter Count | Numeric value used in this widget’s render/JS (default 40, min 1). |
| Grid Elements — Show Avatar | When this switch is on, render() outputs the wrapped markup. |
| Grid Elements — Avatar Size | Numeric value used in this widget’s render/JS (default 16, min 8). |
| Grid Elements — Read More Text | Printed in the widget HTML from render(). |
| Grid Elements — Separator | Printed in the widget HTML from render(). |
| Grid Elements — Select Styling | The chosen value is read in render() and applied on the front end. Options: Taxonomy Style 1; Taxonomy Style 2. |
| Grid Elements — No Comments | Saved on the widget and consumed in render(). |
| Grid Elements — One Comment | Saved on the widget and consumed in render(). |
| Grid Elements — Multiple Comments | Saved on the widget and consumed in render(). |
| Grid Elements — Post Format Audio | The chosen value is read in render() and applied on the front end. Options: Default; Meta Value. |
| Grid Elements — Audio Meta Value | Ajax Select2: options load from a King Addons admin-ajax endpoint. |
| Grid Elements — Post Format Video | The chosen value is read in render() and applied on the front end. Options: Default; Meta Value. |
| Grid Elements — Video Meta Value | Ajax Select2: options load from a King Addons admin-ajax endpoint. |
| Grid Elements — Media Overlay | When this switch is on, render() outputs the wrapped markup. |
| Grid Elements — Select Styling (Element Separator Style) | The chosen value is read in render() and applied on the front end. Options: Separator Style 1; Separator Style 2. |
| Grid Elements — Extra Text Display | The chosen value is read in render() and applied on the front end. Options: None; Before Element; After Element. |
| Grid Elements — Extra Text | Printed in the widget HTML from render(). |
| Grid Elements — Extra Icon Position | The chosen value is read in render() and applied on the front end. Options: None; Before Element; After Element. |
| Grid Elements — Select Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Grid Elements — Select Animation | Animation picker; the chosen effect is applied on the front end. |
| Grid Elements — Animation Duration | Writes CSS `transition-duration` onto the widget’s front-end markup. (default 0.3, min 0, max 5). |
| Grid Elements — Animation Delay | Writes CSS (king-addons-animation-wrap, transition-delay) onto the widget’s front-end markup. (default 0, min 0, max 5). |
| Grid Elements — Animation Timing | Select inspector control (`element_animation_timing`). |
| Grid Elements — Animation Size | Options: Small; Medium; Large. |
| Grid Elements — Animation Transparency | Switcher inspector control (`element_animation_tr`). |
| Grid Elements — Disable on Mobile/Tablet | Switcher inspector control (`element_animation_disable_mobile`). |
| Grid Elements — Show on this Device | Switcher inspector control (`element_show_on`). |
| Elements — Grid Elements | Repeater rows; render() loops each item to build the list or slides. |
| Media Overlay — Overlay Width | Writes CSS (width, top, left, bottom, right) onto the widget’s front-end markup. (min 0, max 100). |
| Media Overlay — Overlay Height | Writes CSS (height, top, left, bottom, right) onto the widget’s front-end markup. (min 0, max 100). |
| Media Overlay — Link to Single Page | Switcher inspector control (`overlay_post_link`). |
| Media Overlay — Select Animation | Animation picker; the chosen effect is applied on the front end. |
| Media Overlay — Animation Duration | Writes CSS `transition-duration` onto the widget’s front-end markup. (default 0.3, min 0, max 5). |
| Media Overlay — Animation Delay | Writes CSS (king-addons-animation-wrap, transition-delay) onto the widget’s front-end markup. (default 0, min 0, max 5). |
| Media Overlay — Animation Timing | Select inspector control (`overlay_animation_timing`). |
| Media Overlay — Animation Size | Options: Small; Medium; Large. |
| Media Overlay — Animation Transparency | Switcher inspector control (`overlay_animation_tr`). |
| Image Effects — Secondary Image on Hover (Pro) | When this switch is on, render() outputs the featured image. |
| Image Effects — Select Effect | The chosen value is read in render() and applied on the front end. Options: None; Zoom In (Pro); Zoom Out (Pro); Grayscale In; Grayscale Out (Pro); Blur In; Blur Out (Pro); Slide. |
| Image Effects — Animation Duration | Writes CSS `transition-duration` onto the widget’s front-end markup. (default 0.5, min 0, max 5). |
| Image Effects — Animation Delay | Writes CSS (king-addons-grid-media-wrap, transition-delay) onto the widget’s front-end markup. (default 0, min 0, max 5). |
| Image Effects — Animation Timing | Selects the value used for the featured image. |
| Image Effects — Animation Size | The chosen value is read in render() and applied on the front end. Options: Small; Medium; Large. |
| Image Effects — Animation Direction | The chosen value is read in render() and applied on the front end. Options: Top; Right; Bottom; Left. |
| Lightbox Popup — Autoplay Slides | Passed through to Swiper autoplay. |
| Lightbox Popup — Show Progress Bar | Switcher inspector control (`lightbox_popup_progressbar`). |
| Lightbox Popup — Autoplay Speed | Numeric value used in this widget’s render/JS (default 5, min 1, max 10). |
| Lightbox Popup — Show Counter | Switcher inspector control (`lightbox_popup_counter`). |
| Lightbox Popup — Show Arrows | Switcher inspector control (`lightbox_popup_arrows`). |
| Lightbox Popup — Show Captions | Switcher inspector control (`lightbox_popup_captions`). |
| Lightbox Popup — Show Thumbnails (Pro) | Switcher inspector control (`lightbox_popup_thumbnails`). |
| Lightbox Popup — Show Thumbs by Default (Pro) | Switcher inspector control (`popup_thumbnails_default`). |
| Lightbox Popup — Show Sharing Button (Pro) | Switcher inspector control (`lightbox_popup_sharing`). |
| Lightbox Popup — Show Zoom Button | Switcher inspector control (`lightbox_popup_zoom`). |
| Lightbox Popup — Show Full Screen Button | Switcher inspector control (`lightbox_popup_fullscreen`). |
| Lightbox Popup — Show Download Button | Switcher inspector control (`lightbox_popup_download`). |
| Filters — Select Taxonomy | The chosen value is read in render() and applied on the front end. |
| Filters — Set Linkable Filters | When this switch is on, render() skips the wrapped markup. |
| Filters — Hide Empty Filters | Switcher inspector control (`filters_hide_empty`). |
| Filters — Enable Deep Linking (Pro) | Switcher inspector control (`filters_deeplinking`). |
| Filters — Show "All" Filter | Switcher inspector control (`filters_all`). |
| Filters — "All" Filter Text | Printed in the widget HTML from render(). |
| Filters — Show Count (Pro) | Switcher inspector control (`filters_count`). |
| Filters — Separator | Printed in the widget HTML from render(). |
| Filters — Separator Position | The chosen value is read in render() and applied on the front end. Options: Left; Right. |
| Filters — Align | Writes CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Filters — Select Animation | The chosen value is read in render() and applied on the front end. Options: Default; Zoom; Fade (Pro); Fade + SlideUp (Pro). |
| Filters — Animation Duration | Numeric value used in this widget’s render/JS (default 0.3, min 0, max 5). |
| Filters — Animation Delay | Numeric value used in this widget’s render/JS (default 0.1, min 0, max 5). |
| Pagination — Select Type | Swiper `pagination.type` on the front end. |
| Pagination — Older Posts Text | Printed in the widget HTML from render(). |
| Pagination — Newer Posts Text | Printed in the widget HTML from render(). |
| Pagination — Select Icon | Swiper `pagination.type` on the front end. Options: Angle; Angle Double; Arrow; Arrow Circle; Arrow Circle Alt; Long Arrow; Chevron. |
| Pagination — Previous & Next Buttons | When this switch is on, render() outputs Swiper pagination. |
| Pagination — Prev Page Text | Printed in the widget HTML from render(). |
| Pagination — Next Page Text | Printed in the widget HTML from render(). |
| Pagination — Select Icon (Pagination Pn Icon) | Swiper `pagination.type` on the front end. Options: Angle; Angle Double; Arrow; Arrow Circle; Arrow Circle Alt; Long Arrow; Chevron. |
| Pagination — First & Last Buttons | When this switch is on, render() outputs Swiper pagination. |
| Pagination — First Page Text | Printed in the widget HTML from render(). |
| Pagination — Last Page Text | Printed in the widget HTML from render(). |
| Pagination — Select Icon (Pagination Fl Icon) | Swiper `pagination.type` on the front end. Options: Angle; Angle Double; Arrow; Arrow Circle; Arrow Circle Alt; Long Arrow; Chevron. |
| Pagination — Show Disabled Buttons | When this switch is on, render() outputs Swiper pagination. |
| Pagination — Range | Numeric value used in this widget’s render/JS (default 2, min 1). |
| Pagination — Load More Text | Printed in the widget HTML from render(). |
| Pagination — Finish Text | Printed in the widget HTML from render(). |
| Pagination — Select Animation | Swiper `pagination.type` on the front end. Options: None; Loader 1; Loader 2; Loader 3; Loader 4; Loader 5; Loader 6. |
| Pagination — Alignment | Options: Left; Center; Right; Justified. |
| Grid Item — Apply Styles To | Options: Inner Elements; Wrapper. |
| Grid Item — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Grid Item — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Grid Item — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Grid Item — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Grid Item — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Grid Item — Padding (Grid Item Wrap Padding) | Writes CSS `padding` onto the widget’s front-end markup. |
| Grid Item — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Grid Item — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-grid-item`. |
| Grid Media — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Grid Media — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Grid Media — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Grid Media — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Media Overlay — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Media Overlay — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Title (Normal) — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Title (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Title (Normal) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Title (Hover) — Color | Writes CSS (a, color) onto the widget’s front-end markup. |
| Title (Hover) — Background Color | Writes CSS (a, background-color) onto the widget’s front-end markup. |
| Title (Hover) — Border Color | Writes CSS (a, border-color) onto the widget’s front-end markup. |
| Title — Transition Duration (seconds) | Writes CSS (transition-duration, king-addons-pointer-item) onto the widget’s front-end markup. (default 0.2, min 0, max 5). |
| Title — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-grid-item-title a`. |
| Title — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Title — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Title — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Title — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Content — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Content — DropCap Color | Writes CSS (p, first-child, color) onto the widget’s front-end markup. |
| Content — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Content — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Content — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-grid-item-content`. |
| Content — Drop Cap Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-grid-item-content.king-addons-enable-dropcap p:first-child:fir…`. |
| Content — Justify Text | Switcher inspector control (`content_justify`). |
| Content — Content Width | Writes CSS `width` onto the widget’s front-end markup. (min 10, max 100). |
| Content — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Content — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Content — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Content — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Excerpt — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Excerpt — DropCap Color | Writes CSS (p, first-child, color) onto the widget’s front-end markup. |
| Excerpt — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Excerpt — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Excerpt — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-grid-item-excerpt`. |
| Excerpt — Drop Cap Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-grid-item-excerpt.king-addons-enable-dropcap p:first-child:fir…`. |
| Excerpt — Justify Text | Switcher inspector control (`excerpt_justify`). |
| Excerpt — Excerpt Width | Writes CSS `width` onto the widget’s front-end markup. (min 10, max 100). |
| Excerpt — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Excerpt — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Excerpt — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Excerpt — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Date — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Date — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Date — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Date — Extra Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Date — Extra Icon Color | Writes CSS (color, fill) onto the widget’s front-end markup. |
| Date — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-grid-item-date, {{WRAPPER}} .king-addons-grid-item-date span`. |
| Date — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Date — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Date — Extra Text Spacing | Writes CSS (padding-right, padding-left) onto the widget’s front-end markup. (min 0, max 25). |
| Date — Extra Icon Spacing | Writes CSS (padding-right, padding-left) onto the widget’s front-end markup. (min 0, max 25). |
| Date — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Date — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Time — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Time — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Time — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Time — Extra Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Time — Extra Icon Color | Writes CSS (color, fill) onto the widget’s front-end markup. |
| Time — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-grid-item-time`. |
| Time — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Time — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Time — Extra Text Spacing | Writes CSS (padding-right, padding-left) onto the widget’s front-end markup. (min 0, max 25). |
| Time — Extra Icon Spacing | Writes CSS (padding-right, padding-left) onto the widget’s front-end markup. (min 0, max 25). |
| Time — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Time — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Author (Normal) — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Author (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Author (Normal) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Author (Normal) — Extra Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Author (Hover) — Color | Writes CSS (a, color) onto the widget’s front-end markup. |
| Author (Hover) — Background Color | Writes CSS (a, background-color) onto the widget’s front-end markup. |
| Author (Hover) — Border Color | Writes CSS (a, border-color) onto the widget’s front-end markup. |
| Author — Transition Duration (seconds) | Writes CSS `transition-duration` onto the widget’s front-end markup. (default 0.1, min 0, max 5). |
| Author — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-grid-item-author, {{WRAPPER}} .king-addons-grid-item-author .i…`. |
| Author — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Author — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Author — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Author — Extra Text Spacing | Writes CSS (padding-right, padding-left) onto the widget’s front-end markup. (min 0, max 25). |
| Author — Extra Icon Spacing | Writes CSS (padding-right, padding-left) onto the widget’s front-end markup. (min 0, max 25). |
| Author — Avatar Spacing | Writes CSS `margin-right` onto the widget’s front-end markup. (min 0, max 25). |
| Author — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Author — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Comments (Normal) — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Comments (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Comments (Normal) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Comments (Normal) — Extra Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Comments (Hover) — Color | Writes CSS (a, color) onto the widget’s front-end markup. |
| Comments (Hover) — Background Color | Writes CSS (a, background-color) onto the widget’s front-end markup. |
| Comments (Hover) — Border Color | Writes CSS (a, border-color) onto the widget’s front-end markup. |
| Comments — Transition Duration (seconds) | Writes CSS `transition-duration` onto the widget’s front-end markup. (default 0.1, min 0, max 5). |
| Comments — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-grid-item-comments`. |
| Comments — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Comments — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Comments — Extra Text Spacing | Writes CSS (padding-right, padding-left) onto the widget’s front-end markup. (min 0, max 25). |
| Comments — Extra Icon Spacing | Writes CSS (padding-right, padding-left) onto the widget’s front-end markup. (min 0, max 25). |
| Comments — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Comments — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Comments — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Read More (Normal) — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-grid-item-read-more .inner-block a`. |
| Read More (Normal) — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Read More (Normal) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Read More (Normal) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-grid-item-read-more .inner-block a`. |
| Read More (Hover) — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-grid-item-read-more .inner-block a.king-addons-button-none:hov…`. |
| Read More (Hover) — Color | Writes CSS (a, color) onto the widget’s front-end markup. |
| Read More (Hover) — Border Color | Writes CSS (a, border-color) onto the widget’s front-end markup. |
| Read More (Hover) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-grid-item-read-more .inner-block :hover a`. |
| Read More — Transition Duration (seconds) | Writes CSS (transition-duration, a) onto the widget’s front-end markup. (default 0.1, min 0, max 5). |
| Read More — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-grid-item-read-more a`. |
| Read More — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Read More — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Read More — Extra Icon Spacing | Writes CSS (padding-right, padding-left) onto the widget’s front-end markup. (min 0, max 25). |
| Read More — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Read More — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Read More — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Lightbox (Normal) — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Lightbox (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Lightbox (Normal) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Lightbox (Normal) — Text Shadow | Elementor text-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-grid-item-lightbox i`. |
| Lightbox (Hover) — Color | Writes CSS (span, color) onto the widget’s front-end markup. |
| Lightbox (Hover) — Background Color | Writes CSS (span, background-color) onto the widget’s front-end markup. |
| Lightbox (Hover) — Border Color | Writes CSS (span, border-color) onto the widget’s front-end markup. |
| Lightbox — Transition Duration (seconds) | Writes CSS `transition-duration` onto the widget’s front-end markup. (default 0.1, min 0, max 5). |
| Lightbox — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-grid-item-lightbox`. |
| Lightbox — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Lightbox — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Lightbox — Extra Text Spacing | Writes CSS (padding-right, padding-left) onto the widget’s front-end markup. (min 0, max 25). |
| Lightbox — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Lightbox — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Lightbox — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Filters (Normal) — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Filters (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Filters (Normal) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Filters (Normal) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-grid-filters li > a, {{WRAPPER}} .king-addons-grid-filters li …`. |
| Filters (Normal) — Wrapper Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Filters (Hover) — Color | Writes CSS (a, color, span) onto the widget’s front-end markup. |
| Filters (Hover) — Background Color | Writes CSS (a, background-color, span) onto the widget’s front-end markup. |
| Filters (Hover) — Border Color | Writes CSS (a, border-color, span) onto the widget’s front-end markup. |
| Filters (Hover) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-grid-filters li > a:hover, {{WRAPPER}} .king-addons-grid-filte…`. |
| Filters — Transition Duration (seconds) | Writes CSS (transition-duration, king-addons-pointer-item) onto the widget’s front-end markup. (default 0.1, min 0, max 5). |
| Filters — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-grid-filters li`. |
| Filters — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Filters — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Filters — Distance From Grid | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 100). |
| Filters — Extra Icon Spacing | Writes CSS (padding-right, padding-left) onto the widget’s front-end markup. (min 0, max 25). |
| Filters — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Filters — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Filters — Wrapper Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Filters — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Pagination (Normal) — Color | Writes CSS (color, fill) onto the widget’s front-end markup. |
| Pagination (Normal) — Background Color | Writes CSS (background-color, color) onto the widget’s front-end markup. |
| Pagination (Normal) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Pagination (Normal) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-grid-pagination a, {{WRAPPER}} .king-addons-grid-pagination > …`. |
| Pagination (Normal) — Loader Color | Writes CSS (background-color, king-addons-circle, border-color) onto the widget’s front-end markup. |
| Pagination (Normal) — Wrapper Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Pagination (Hover) — Color | Writes CSS (a, color, fill, span) onto the widget’s front-end markup. |
| Pagination (Hover) — Background Color | Writes CSS (a, background-color, span) onto the widget’s front-end markup. |
| Pagination (Hover) — Border Color | Writes CSS (a, border-color, span) onto the widget’s front-end markup. |
| Pagination (Hover) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-grid-pagination a:hover, {{WRAPPER}} .king-addons-grid-paginat…`. |
| Pagination — Transition Duration (seconds) | Writes CSS `transition-duration` onto the widget’s front-end markup. (default 0.1, min 0, max 5). |
| Pagination — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-grid-pagination, {{WRAPPER}} .king-addons-grid-pagination a`. |
| Pagination — Icon Size | Writes CSS (font-size, width) onto the widget’s front-end markup. (min 5, max 30). |
| Pagination — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Pagination — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Pagination — Distance From Grid | Writes CSS `margin-top` onto the widget’s front-end markup. (min 0, max 100). |
| Pagination — Gutter | Writes CSS (a, margin-right, king-addons-disabled-arrow) onto the widget’s front-end markup. (min 0, max 25). |
| Pagination — Icon Spacing | Writes CSS (padding-right, padding-left, margin-right, margin-left) onto the widget’s front-end markup. (min 0, max 25). |
| Pagination — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Pagination — Wrapper Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Pagination — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Password Protected — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Password Protected — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Password Protected — Input Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Password Protected — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-grid-item-protected p`. |
| Separator Style 1 — Color | Writes CSS `border-bottom-color` onto the widget’s front-end markup. |
| Separator Style 1 — Width | Writes CSS `width` onto the widget’s front-end markup. (min 0, max 300). |
| Separator Style 1 — Height | Writes CSS `border-bottom-width` onto the widget’s front-end markup. (min 1, max 100). |
| Separator Style 1 — Type | Writes CSS `border-bottom-style` onto the widget’s front-end markup. Options: Solid; Double; Dotted; Dashed; Groove. |
| Separator Style 1 — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Separator Style 1 — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Separator Style 2 — Color | Writes CSS `border-bottom-color` onto the widget’s front-end markup. |
| Separator Style 2 — Width | Writes CSS `width` onto the widget’s front-end markup. (min 0, max 300). |
| Separator Style 2 — Height | Writes CSS `border-bottom-width` onto the widget’s front-end markup. (min 0, max 100). |
| Separator Style 2 — Type | Writes CSS `border-bottom-style` onto the widget’s front-end markup. Options: Solid; Double; Dotted; Dashed; Groove. |
| Separator Style 2 — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Separator Style 2 — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Taxonomy Style 1 (Normal) — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Taxonomy Style 1 (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Taxonomy Style 1 (Normal) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Taxonomy Style 1 (Normal) — Extra Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Taxonomy Style 1 (Normal) — Extra Icon Color | Writes CSS (color, fill) onto the widget’s front-end markup. |
| Taxonomy Style 1 (Hover) — Color | Writes CSS (a, color, king-addons-pointer-item, background-color) onto the widget’s front-end markup. |
| Taxonomy Style 1 (Hover) — Background Color | Writes CSS (a, background-color) onto the widget’s front-end markup. |
| Taxonomy Style 1 (Hover) — Border Color | Writes CSS (a, border-color) onto the widget’s front-end markup. |
| Taxonomy Style 1 — Transition Duration (seconds) | Writes CSS (transition-duration, king-addons-pointer-item) onto the widget’s front-end markup. (default 0.1, min 0, max 5). |
| Taxonomy Style 1 — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-grid-tax-style-1`. |
| Taxonomy Style 1 — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Taxonomy Style 1 — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Taxonomy Style 1 — Extra Text Spacing | Writes CSS (padding-right, padding-left) onto the widget’s front-end markup. (min 0, max 25). |
| Taxonomy Style 1 — Extra Icon Spacing | Writes CSS (padding-right, padding-left) onto the widget’s front-end markup. (min 0, max 25). |
| Taxonomy Style 1 — Gutter | Writes CSS `margin-right` onto the widget’s front-end markup. (min 0, max 20). |
| Taxonomy Style 1 — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Taxonomy Style 1 — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Taxonomy Style 1 — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Taxonomy Style 2 (Normal) — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Taxonomy Style 2 (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Taxonomy Style 2 (Normal) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Taxonomy Style 2 (Normal) — Extra Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Taxonomy Style 2 (Normal) — Extra Icon Color | Writes CSS (color, fill) onto the widget’s front-end markup. |
| Taxonomy Style 2 (Hover) — Color | Writes CSS (a, color, king-addons-pointer-item, background-color) onto the widget’s front-end markup. |
| Taxonomy Style 2 (Hover) — Background Color | Writes CSS (a, background-color) onto the widget’s front-end markup. |
| Taxonomy Style 2 (Hover) — Border Color | Writes CSS (a, border-color) onto the widget’s front-end markup. |
| Taxonomy Style 2 — Transition Duration (seconds) | Writes CSS (transition-duration, king-addons-pointer-item) onto the widget’s front-end markup. (default 0.1, min 0, max 5). |
| Taxonomy Style 2 — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-grid-tax-style-2`. |
| Taxonomy Style 2 — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Taxonomy Style 2 — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Taxonomy Style 2 — Extra Text Spacing | Writes CSS (padding-right, padding-left) onto the widget’s front-end markup. (min 0, max 25). |
| Taxonomy Style 2 — Extra Icon Spacing | Writes CSS (padding-right, padding-left) onto the widget’s front-end markup. (min 0, max 25). |
| Taxonomy Style 2 — Gutter | Writes CSS `margin-right` onto the widget’s front-end markup. (min 0, max 20). |
| Taxonomy Style 2 — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Taxonomy Style 2 — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Taxonomy Style 2 — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Slider Navigation (Normal) — Color | Writes CSS (color, fill) onto the widget’s front-end markup. |
| Slider Navigation (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Slider Navigation (Normal) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Slider Navigation (Hover) — Color | Writes CSS (king-addons-grid-slider-arrow, color, fill) onto the widget’s front-end markup. |
| Slider Navigation (Hover) — Background Color | Writes CSS (king-addons-grid-slider-arrow, background-color) onto the widget’s front-end markup. |
| Slider Navigation (Hover) — Border Color | Writes CSS (king-addons-grid-slider-arrow, border-color) onto the widget’s front-end markup. |
| Slider Navigation — Transition Duration (seconds) | Writes CSS `transition-duration` onto the widget’s front-end markup. (default 0.1, min 0, max 5). |
| Slider Navigation — Font Size | Writes CSS (font-size, width) onto the widget’s front-end markup. (min 10, max 200). |
| Slider Navigation — Box Size | Writes CSS (width, height) onto the widget’s front-end markup. (min 10, max 200). |
| Slider Navigation — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Slider Navigation — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Slider Navigation — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Slider Pagination (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Slider Pagination (Normal) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Slider Pagination (Active) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Slider Pagination (Active) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Slider Pagination — Box Width | Writes CSS `width` onto the widget’s front-end markup. (min 1, max 100). |
| Slider Pagination — Box Height | Writes CSS `height` onto the widget’s front-end markup. (min 1, max 100). |
| Slider Pagination — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Slider Pagination — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Slider Pagination — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Slider Pagination — Gutter | Writes CSS (margin-right, margin-bottom) onto the widget’s front-end markup. (min 0, max 100). |
| Slider Pagination — Vertical Position | Writes CSS `top` onto the widget’s front-end markup. (min -20, max 120). |
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
Which Posts Grid & Slider options need King Addons Pro?
Controls marked with the Pro icon in this widget’s PHP. King Addons Pro is a separate license from Elementor Pro.
Why doesn’t Posts Grid & Slider work in the Elementor preview?
AJAX handlers run on the published page. Preview the front end (or a Theme Builder preview of a real post) to test submit/filter requests.
How do I add Posts Grid & Slider in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Posts Grid & Slider”, 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
Magazine Grid & Slider
A magazine layout: mixed tile sizes for featured and secondary posts, as a grid or slider.
Dynamic Posts Grid
A filterable grid of posts with AJAX search and Load More — for blogs and resource libraries.
Quick Post Slider
A lightweight post slider with navigation and pagination that does not overlap the slides.
Timeline Post/Story
A vertical or horizontal timeline for events, history, or a changelog.
Accordion
Collapsible panels for FAQs, policies, and long answers. One heading per panel; the body stays hidden until the visitor opens it.
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 Posts Grid & Slider after you activate it.