Content · Elementor
Liquid Glass Cards widget for Elementor
Liquid Glass Cards is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Liquid Glass Cards” in the Elementor panel.
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
Liquid Glass Cards is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Liquid Glass Cards” in the Elementor panel.
render() writes HTML data attributes: data-depth, data-settings.
Some inspector controls are marked Pro in PHP (eicon-pro-icon / king-addons-pro-control). Those need King Addons Pro, not Elementor Pro.
The widget script reads data attributes: data-depth.
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 “Liquid Glass Cards”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Title”, “Subtitle”, “Description”, “Badge”. Style and Content tabs are listed on this page.
When to use it
- An Elementor page that needs Liquid Glass Cards.
- A layout in the posts, cards, lists, FAQs, and editorial layouts group.
- Search the panel for “Liquid Glass Cards” after King Addons is active.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Cards — Title | Text inspector control (`kng_card_title`). |
| Cards — Subtitle | Text inspector control (`kng_card_subtitle`). |
| Cards — Description | Textarea inspector control (`kng_card_description`). |
| Cards — Badge | Text inspector control (`kng_card_badge`). |
| Cards — Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Cards — Image | Media Library attachment(s); render() uses the URL/ID as the image source. |
| Cards — Image Placement | Options: Background Layer; Thumbnail. |
| 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 — Card Link Mode | Options: None; Button Only; Whole Card. |
| Cards — Show Badge | Switcher inspector control (`kng_card_show_badge`). |
| Cards — Show Icon | Switcher inspector control (`kng_card_show_icon`). |
| Cards — Show Button | Switcher inspector control (`kng_card_show_button`). |
| 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). |
| Layout — Equal Height | Switcher inspector control (`kng_equal_height`). |
| Layout — Content Alignment | The chosen value is read in render() and applied on the front end. Options: Left; Center; Right. |
| Layout — Card Min Height | Writes CSS `min-height` onto the widget’s front-end markup. (min 0, max 600). |
| Layout — Card Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Layout — Content Spacing | Writes CSS `gap` onto the widget’s front-end markup. (min 0, max 40). |
| Layout — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 60). |
| Layout — Shadow | The chosen value is read in render() and applied on the front end. Options: Off; Soft; Medium; Strong. |
| Layout — Title HTML Tag | The chosen value is read in render() and applied on the front end. Options: H2; H3; H4; DIV. |
| Presets — Preset | The chosen value is read in render() and applied on the front end. Options: Clear Glass; Frosted Glass; Dark Glass. |
| Glass Material — Blur | Spacing/size control (min 0, max 30). |
| Glass Material — Tint | The chosen value is read in render() and applied on the front end. Options: Auto; Light; Dark; Custom. |
| Glass Material — Custom Tint | Color written to this widget’s CSS selector. |
| Glass Material — Border Width | Spacing/size control (min 0, max 6). |
| Glass Material — Border Color | Color written to this widget’s CSS selector. |
| Glass Material — Noise Overlay | The chosen value is read in render() and applied on the front end. Options: On; Off. |
| Glass Material — Noise Opacity | Spacing/size control (min 0, max 0.35). |
| Glass Material — Noise Scale | Spacing/size control (min 20, max 120). |
| Glass Material — Highlight Intensity | Spacing/size control (min 0, max 1). |
| Glass Material — Highlight Position | The chosen value is read in render() and applied on the front end. Options: Top Left; Top Right; Center; Bottom. |
| Glass Material — Highlight Color | Color written to this widget’s CSS selector. |
| Glass Material — Image Opacity | Spacing/size control (min 0, max 1). |
| Glass Material — Image Blend Mode | The chosen value is read in render() and applied on the front end. Options: Normal; Screen; Overlay; Soft Light; Multiply. |
| Typography — Title Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-liquid-glass__title`. |
| Typography — Title Color | Writes CSS `color` onto the widget’s front-end markup. |
| Typography — Subtitle Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-liquid-glass__subtitle`. |
| Typography — Subtitle Color | Writes CSS `color` onto the widget’s front-end markup. |
| Typography — Description Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-liquid-glass__description`. |
| Typography — Description Color | Writes CSS `color` onto the widget’s front-end markup. |
| Badge — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-liquid-glass__badge`. |
| Badge — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Badge — Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| Badge — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 30). |
| Badge — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Icon — Size | Writes CSS (font-size, width, height) onto the widget’s front-end markup. (min 12, max 80). |
| Icon — Color | Writes CSS (color, fill) onto the widget’s front-end markup. |
| Button — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-liquid-glass__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 Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| 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 — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. (min 0, max 6). |
| Button — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 100). |
| Button — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Interactive Tilt — Kng Enable Tilt (Pro) | Switcher inspector control (`kng_enable_tilt`). |
| Interactive Tilt — Input Source | The chosen value is read in render() and applied on the front end. Options: Pointer; Device Orientation. |
| Interactive Tilt — Max Tilt Angle | Spacing/size control (min 0, max 12). |
| Interactive Tilt — Tilt Smoothing | Spacing/size control (min 0.02, max 0.5). |
| Interactive Tilt — Glare Highlight | Switcher inspector control (`kng_glare_enable`). |
| Interactive Tilt — Glare Intensity | Spacing/size control (min 0, max 0.8). |
| Interactive Tilt — Glare Size | Spacing/size control (min 20, max 120). |
| Interactive Tilt — Glare Blend Mode | The chosen value is read in render() and applied on the front end. Options: Normal; Screen; Overlay. |
| Interactive Tilt — Hover Lift | Switcher inspector control (`kng_hover_lift`). |
| Interactive Tilt — Lift Distance | Spacing/size control (min 0, max 30). |
| Parallax Layers — Kng Enable Parallax (Pro) | Switcher inspector control (`kng_enable_parallax`). |
| Parallax Layers — Parallax Mode | The chosen value is read in render() and applied on the front end. Options: Pointer; Scroll. |
| Parallax Layers — Image Layer Depth | Spacing/size control (min -30, max 30). |
| Layers — Layer Type | Options: Image; Gradient; Highlight. |
| Layers — Layer Image | Media Library attachment(s); render() uses the URL/ID as the image source. |
| Layers — Layer Color | Color written to this widget’s CSS selector. |
| Layers — Secondary Color | Color written to this widget’s CSS selector. |
| Layers — Depth | Spacing/size control (min -30, max 30). |
| Layers — Opacity | Spacing/size control (min 0, max 1). |
| Layers — Blur | Spacing/size control (min 0, max 30). |
| Layers — Blend Mode | Options: Normal; Screen; Overlay; Soft Light. |
| Parallax Layers — Layers | Repeater rows; render() loops each item to build the list or slides. |
| Adaptive Performance — Kng Performance Mode (Pro) | The chosen value is read in render() and applied on the front end. Options: Auto; Quality; Balanced; Performance. |
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 Liquid Glass Cards 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.
How do I add Liquid Glass Cards in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Liquid Glass Cards”, 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
Comparison Matrix Cards
Comparison Matrix Cards is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Comparison Matrix Cards” in the Elementor panel.
Parallax Depth Cards
Parallax Depth Cards is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Parallax Depth Cards” in the Elementor panel.
Reveal Swipe Cards
Reveal Swipe Cards is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Reveal Swipe Cards” in the Elementor panel.
Announcement / Promo Bar
Announcement / Promo Bar is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Announcement / Promo Bar” in the Elementor panel.
Content Toggle
Content Toggle is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Content Toggle” in the Elementor panel.
Cookie Preferences Button
Cookie Preferences Button is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Cookie Preferences Button” in the Elementor panel.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Liquid Glass Cards after you activate it.