Creative · Elementor
3D Holographic Card widget for Elementor
A 3D card with holographic sheen, rim light, and parallax — one decorative object, not a post loop.
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 3D card with holographic sheen, rim light, and parallax — one decorative object, not a post loop.
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-initialized.
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 “3D Holographic Card”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Title”, “Meta Text”, “Badge Text”, “Topline Right”. Style and Content tabs are listed on this page.
When to use it
- A collectible or NFT-style promo.
- A featured product hero.
- A membership pass mock.
Tip: After King Addons is active, type king in the Elementor search box to list every widget, including 3D Holographic Card.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Content — Title | Printed in the widget HTML from render(). |
| Content — Meta Text | Printed in the widget HTML from render(). |
| Content — Badge Text | Printed in the widget HTML from render(). |
| Content — Topline Right | Printed in the widget HTML from render(). |
| Media — Parallax Layer Type | The chosen value is read in render() and applied on the front end. Options: None; Default SVG; Image; Custom SVG. |
| Media — Image | Media Library attachment(s); render() uses the URL/ID as the image source. |
| Media — Custom SVG Code | Code/HTML stored on the widget and output in render(). |
| Link — Enable Link | Switcher inspector control (`king_addons_holo_card_link_enable`). |
| Link | Elementor URL control (href, new tab, nofollow) applied to a front-end link. |
| Motion — Max Tilt Angle | Spacing/size control (min 0, max 30). |
| Motion — Smoothness In | Higher value = snappier animation. |
| Motion — Smoothness Hover | Smoothness while moving mouse inside the card. |
| Motion — Smoothness Out | Higher value = snappier animation. |
| Motion — Parallax Strength | Spacing/size control (min 0, max 1). |
| Motion — Disable Motion | Completely disable 3D tilt and parallax effects. |
| Motion — Respect Reduced Motion | Disable effects for users who prefer reduced motion. |
| Card Box — Alignment | Writes CSS (display, justify-content) onto the widget’s front-end markup. Options: Left; Center; Right. |
| Card Box — Card Width | Writes CSS `width` onto the widget’s front-end markup. (min 200, max 800). |
| Card Box — 3D Perspective | Writes CSS `perspective` onto the widget’s front-end markup. (min 500, max 2000). |
| Card Box — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Card Box — Content Gap | Writes CSS `gap` onto the widget’s front-end markup. (min 0, max 50). |
| Card Box — Border Radius | Writes CSS (border-radius, king-addons-holo-card) onto the widget’s front-end markup. |
| Card Box — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Card Box — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-holo-card`. |
| Card Box — Box Shadow (King Addons Holo Card Box Shadow Hover) | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-holo-card.is-active`. |
| Card Box — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-holo-card`. |
| Poster — Height | Writes CSS `height` onto the widget’s front-end markup. (min 100, max 600). |
| Poster — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Poster — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-holo-card__poster`. |
| Parallax Layer — Width | Writes CSS `width` onto the widget’s front-end markup. (min 30, max 100). |
| Parallax Layer — Max Width | Writes CSS `max-width` onto the widget’s front-end markup. (min 100, max 600). |
| Parallax Layer — Scale | Spacing/size control (min 0.5, max 2). |
| Parallax Layer — Shadow Color | Writes CSS `filter` onto the widget’s front-end markup. |
| Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-holo-card__title span`. |
| Typography — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Typography (King Addons Holo Card Meta Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-holo-card__meta`. |
| Typography — Color (King Addons Holo Card Meta Color) | Writes CSS `color` onto the widget’s front-end markup. |
| Typography (King Addons Holo Card Badge Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-holo-card__topline`. |
| Typography — Color (King Addons Holo Card Badge Color) | Writes CSS `color` onto the widget’s front-end markup. |
| Typography — Text Shadow | Writes CSS `text-shadow` onto the widget’s front-end markup. |
| Typography — Topline Padding | Writes CSS (top, right, left) onto the widget’s front-end markup. |
| Holographic Effects — Enable Holographic Film | When this switch is on, render() skips the wrapped markup. |
| Holographic Effects — Film Intensity | Spacing/size control (min 0, max 1). |
| Holographic Effects — Enable Rim Glow | When this switch is on, render() skips the wrapped markup. |
| Holographic Effects — Rim Intensity | Spacing/size control (min 0, max 1). |
| Holographic Effects — Enable Poster Shine | When this switch is on, render() skips the wrapped markup. |
| Holographic Effects — Enable Pattern Overlay | When this switch is on, render() outputs the wrapped markup. |
| Holographic Effects — Pattern Opacity | Writes CSS `opacity` onto the widget’s front-end markup. (min 0, max 1). |
| Holographic Effects — Enable Title Mark | When this switch is on, render() outputs the wrapped markup. |
| Holographic Effects — Enable Badge Logo | When this switch is on, render() outputs the wrapped markup. |
| Title Mark — Type | The chosen value is read in render() and applied on the front end. Options: None; Default; Icon Library. |
| Title Mark — Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Title Mark — Size | Writes CSS (width, height, font-size) onto the widget’s front-end markup. (min 8, max 50). |
| Title Mark — Icon Color | Writes CSS `color` onto the widget’s front-end markup. |
| Badge Logo — Type | The chosen value is read in render() and applied on the front end. Options: None; Default; Icon Library. |
| Badge Logo — Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Badge Logo — Size | Writes CSS (width, height, font-size) onto the widget’s front-end markup. (min 8, max 50). |
| Badge Logo — Icon Color | Writes CSS `color` onto the widget’s front-end markup. |
| Divider — Show Divider | When this switch is on, render() outputs the wrapped markup. |
| Divider — Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Divider — Height | Writes CSS `height` onto the widget’s front-end markup. (min 1, max 10). |
| Divider — Margin Top | Writes CSS `margin-top` onto the widget’s front-end markup. (min 0, max 50). |
| Pro Animations — Auto-Sway Animation (Pro) | Card will gently sway/float automatically, simulating mouse hover movement. |
| Pro Effects — Sparkle Effect (Pro) | Add animated sparkle/glitter particles overlay. |
| Pro Effects — Rainbow Shift (Pro) | Animate the holographic film colors in a continuous rainbow cycle. |
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 3D Holographic Card 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 3D Holographic Card in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “3D Holographic Card”, 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 creative widgets
Auto-Scrolling Text
A CSS marquee for a short phrase or logo strip. Keep the text short; this is not a blog loop.
Styled Text Builder
One text block with per-span styling and motion, instead of several heading widgets.
Content Flip Box
A card that flips or hover-reveals a second face — icon/title on the front, detail on the back.
Creative Button
A button with extra shapes and hover treatments beyond Elementor’s default button.
Magnetic Buttons
Buttons that ease toward the cursor on hover. Use on a few CTAs, not every link.
Pulsing Button
A CTA with a pulse animation so it reads as the next action on a busy page.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for 3D Holographic Card after you activate it.