Content · Elementor
Parallax Depth Cards widget for Elementor
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.
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
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.
Parallax Depth Cards Widget (Free).
render() writes HTML data attributes: data-depth, data-depth-strength, data-disable-touch, data-intensity, data-max-tilt, data-parallax, data-reduce-motion, data-reset-duration.
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 “Parallax Depth Cards”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Mode”, “Columns”, “Column Gap”, “Row Gap”. Style and Content tabs are listed on this page.
When to use it
- An Elementor page that needs Parallax Depth Cards.
- A layout in the posts, cards, lists, FAQs, and editorial layouts group.
- Search the panel for “Parallax Depth Cards” after King Addons is active.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Layout — Mode | The chosen value is read in render() and applied on the front end. Options: Cards (Repeater); Single Card. |
| Layout — Columns | Numeric control (min 1, max 6). |
| Layout — Column Gap | Spacing/size control (min 0, max 80). |
| Layout — Row Gap | Spacing/size control (min 0, max 80). |
| Layout — Card Height | The chosen value is read in render() and applied on the front end. Options: Auto; Min Height. |
| Layout — Card Min Height | Spacing/size control (min 160, max 600). |
| Layout — Content Alignment | The chosen value is read in render() and applied on the front end. Options: Left; Center; Right. |
| Layout — Vertical Alignment | The chosen value is read in render() and applied on the front end. Options: Top; Center; Bottom. |
| Layout — 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…. |
| Cards — Media Type | Options: None; Image; Icon. |
| Cards — Image | Media Library attachment(s); render() uses the URL/ID as the image source. |
| Cards — Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Cards — Media Width | Spacing/size control (min 40, max 320). |
| Cards — Icon Size | Spacing/size control (min 16, max 120). |
| Cards — Media Alignment | Options: Left; Center; Right. |
| Cards — Title | Text inspector control (`kng_pdc_title`). |
| Cards — Description | Textarea inspector control (`kng_pdc_description`). |
| Cards — Button Text | Text inspector control (`kng_pdc_button_text`). |
| Cards — Button Link | Elementor URL control (href, new tab, nofollow) applied to a front-end link. |
| Cards — Badge Text | Text inspector control (`kng_pdc_badge_text`). |
| Cards — Badge Position | Options: Top Left; Top Right. |
| Cards | Repeater rows; render() loops each item to build the list or slides. |
| Single Card — Media Type | The chosen value is read in render() and applied on the front end. Options: None; Image; Icon. |
| Single Card — Image | Media Library attachment(s); render() uses the URL/ID as the image source. |
| Single Card — Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Single Card — Media Width | Spacing/size control (min 40, max 320). |
| Single Card — Icon Size | Spacing/size control (min 16, max 120). |
| Single Card — Media Alignment | The chosen value is read in render() and applied on the front end. Options: Left; Center; Right. |
| Single Card — Title | Saved on the widget and consumed in render(). |
| Single Card — Description | Saved on the widget and consumed in render(). |
| Single Card — Button Text | Saved on the widget and consumed in render(). |
| Single Card — Button Link | Elementor URL control (href, new tab, nofollow) applied to a front-end link. |
| Single Card — Badge Text | Saved on the widget and consumed in render(). |
| Single Card — Badge Position | The chosen value is read in render() and applied on the front end. Options: Top Left; Top Right. |
| Interaction — Enable Tilt | Switcher inspector control (`kng_pdc_enable_tilt`). |
| Interaction — Enable Parallax | Switcher inspector control (`kng_pdc_enable_parallax`). |
| Interaction — Trigger | The chosen value is read in render() and applied on the front end. Options: On Hover; Always Active. |
| Interaction — Intensity | Spacing/size control (min 0, max 100). |
| Interaction — Perspective (px) | Spacing/size control (min 200, max 2000). |
| Interaction — Max Tilt (deg) | Spacing/size control (min 0, max 30). |
| Interaction — Parallax Depth (px) | Spacing/size control (min 0, max 60). |
| Interaction — Background Layer Depth | Spacing/size control (min -1, max 1). |
| Interaction — Media Layer Depth | Spacing/size control (min -1, max 1). |
| Interaction — Content Layer Depth | Spacing/size control (min -1, max 1). |
| Interaction — Smoothing | Spacing/size control (min 0.02, max 0.4). |
| Interaction — Hover Out Duration (ms) | Spacing/size control (min 100, max 1200). |
| Interaction — Respect Reduced Motion | Switcher inspector control (`kng_pdc_reduce_motion`). |
| Interaction — Disable on Touch Devices | Switcher inspector control (`kng_pdc_disable_touch`). |
| Card — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-parallax-depth-cards__card`. |
| Card — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-parallax-depth-cards__card`. |
| Card — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Card — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-parallax-depth-cards__card`. |
| Card — Box Shadow (Kng Pdc Card Shadow Hover) | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-parallax-depth-cards__card:hover, {{WRAPPER}} .king-addons-par…`. |
| Card — Hover Background | Writes CSS (card, background-color) onto the widget’s front-end markup. |
| Card — Hover Border Color | Writes CSS (card, border-color) onto the widget’s front-end markup. |
| Card — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Card — Hover Scale | Writes CSS `card` onto the widget’s front-end markup. (min 0.9, max 1.2). |
| Card — Hover Lift (Y) | Writes CSS `card` onto the widget’s front-end markup. (min -20, max 0). |
| Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-parallax-depth-cards__title`. |
| Typography — Title Color | Writes CSS `color` onto the widget’s front-end markup. |
| Typography (Kng Pdc Description Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-parallax-depth-cards__description`. |
| Typography — Description Color | Writes CSS `color` onto the widget’s front-end markup. |
| Typography — Content Spacing | Spacing/size control (min 0, max 40). |
| Typography — Media Bottom Spacing | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 60). |
| Badge — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-parallax-depth-cards__badge`. |
| Badge — Text Color | Color written to this widget’s CSS selector. |
| Badge — Background | Color written to this widget’s CSS selector. |
| Badge — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Badge — Padding | Writes CSS `padding` 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-addons-parallax-depth-cards__button`. |
| Button (Normal) — Text Color | Color written to this widget’s CSS selector. |
| Button (Normal) — Background | Color written to this widget’s CSS selector. |
| Button (Normal) — Border Color | Color written to this widget’s CSS selector. |
| Button (Hover) — Text Color | Color written to this widget’s CSS selector. |
| Button (Hover) — Background | Color written to this widget’s CSS selector. |
| Button (Hover) — Border Color | Color written to this widget’s CSS selector. |
| Button — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Button — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. (min 0, max 5). |
| Button — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Media — Image Size | Elementor image-size group (thumbnail, medium, large, full, custom). |
| Media — Icon Color | Color written to this widget’s CSS selector. |
| Media — Icon Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| Media — Icon Padding | Writes CSS `padding` onto the widget’s front-end markup. (min 0, max 40). |
| Media — Icon Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Media — Image Radius | Spacing/size control. |
| Background Layer — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-parallax-depth-cards__layer--bg`. |
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 Parallax Depth Cards actually change on the page?
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. Inspector labels from this widget’s PHP include “Mode”, “Columns”, “Column Gap”, “Row Gap”.
How do I add Parallax Depth Cards in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Parallax Depth 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
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.
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.
Interactive Image Sheen
Interactive Image Sheen is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Interactive Image Sheen” in the Elementor panel.
Kinetic Text Hover
Kinetic Text Hover is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Kinetic Text Hover” in the Elementor panel.
Liquid Glass Cards
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.
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.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Parallax Depth Cards after you activate it.