Content · Elementor
Reveal Swipe Cards widget for Elementor
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.
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
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.
Reveal Swipe Cards Widget. Creative card widget with wipe-reveal effect triggered by hover or scroll. Pro version adds custom mask shapes, blur edge, touch swipe, and sequence mode.
render() writes HTML data attributes: data-card-index, data-settings.
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 “Reveal Swipe Cards”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Media Type”, “Image”, “Icon”, “Title”. Style and Content tabs are listed on this page.
When to use it
- An Elementor page that needs Reveal Swipe Cards.
- A layout in the posts, cards, lists, FAQs, and editorial layouts group.
- Search the panel for “Reveal Swipe Cards” after King Addons is active.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| 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 — Title | Text inspector control (`title`). |
| Cards — Description | Textarea inspector control (`description`). |
| Cards — Button Text | Text inspector control (`button_text`). |
| Cards — Button Link | Elementor URL control (href, new tab, nofollow) applied to a front-end link. |
| Cards — Show Badge | Switcher inspector control (`badge_enabled`). |
| Cards — Badge Text | Text inspector control (`badge_text`). |
| Cards | Repeater rows; render() loops each item to build the list or slides. |
| Layout — Columns | Options: 1; 2; 3; 4; 5; 6. |
| Layout — Gap | Spacing/size control (min 0, max 100). |
| Layout — Card Min Height | Spacing/size control (min 150, max 800). |
| Layout — Content Alignment | Options: Top; Middle; Bottom. |
| Layout — Text Alignment | Options: Left; Center; Right. |
| Reveal Settings — Trigger | The chosen value is read in render() and applied on the front end. Options: Hover; Scroll; Hover + Scroll. |
| Reveal Settings — Direction | The chosen value is read in render() and applied on the front end. Options: Left to Right; Right to Left; Top to Bottom; Bottom to Top. |
| Reveal Settings — Duration (ms) | Spacing/size control (min 150, max 2000). |
| Reveal Settings — Easing | Options: Linear; Ease; Ease In; Ease Out; Ease In Out; Smooth. |
| Reveal Settings — Reset on Hover Leave | Switcher inspector control (`kng_rsc_reset_on_leave`). |
| Reveal Settings — Threshold (%) | Spacing/size control (min 0, max 100). |
| Reveal Settings — Reveal Once | Switcher inspector control (`kng_rsc_scroll_once`). |
| Reveal Settings — Reset When Out of View | Switcher inspector control (`kng_rsc_scroll_reset`). |
| Card — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .kng-rsc-card__content`. |
| Card — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .kng-rsc-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}} .kng-rsc-card`. |
| Card — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Card — Hover Transform | The chosen value is read in render() and applied on the front end. Options: None; Lift Up; Scale Up; Tilt. |
| Card — Hover Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .kng-rsc-card:hover`. |
| Content — Icon Size | Writes CSS (font-size, width, height) onto the widget’s front-end markup. (min 16, max 120). |
| Content — Icon Color | Writes CSS (color, fill) onto the widget’s front-end markup. |
| Content — Icon Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| Content — Icon Padding | Writes CSS `padding` onto the widget’s front-end markup. (min 0, max 50). |
| Content — Icon Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Content — Image Width | Writes CSS `width` onto the widget’s front-end markup. (min 40, max 400). |
| Content — Image Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Content — Media Spacing | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 60). |
| Content — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .kng-rsc-card__title`. |
| Content — Title Color | Writes CSS `color` onto the widget’s front-end markup. |
| Content — Title Spacing | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 40). |
| Content — Typography (Kng Rsc Desc Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .kng-rsc-card__description`. |
| Content — Description Color | Writes CSS `color` onto the widget’s front-end markup. |
| Content — Description Spacing | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 40). |
| Button — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .kng-rsc-card__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}} .kng-rsc-card__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 — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Button — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Badge — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .kng-rsc-card__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. |
| Badge — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Badge — Position | The chosen value is read in render() and applied on the front end. Options: Top Left; Top Right; Bottom Left; Bottom Right. |
| Reveal Overlay — Overlay Color | Color written to this widget’s CSS selector. |
| Reveal Overlay — Overlay Opacity | Spacing/size control (min 0, max 1). |
| Reveal Overlay — Content Type | The chosen value is read in render() and applied on the front end. Options: None; Icon; Text. |
| Reveal Overlay — Overlay Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Reveal Overlay — Overlay Text | Printed in the widget HTML from render(). |
| Reveal Overlay — Content Color | Writes CSS (color, fill) onto the widget’s front-end markup. |
| Reveal Overlay — Content Size | Writes CSS (font-size, width, height) onto the widget’s front-end markup. (min 12, max 100). |
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 Reveal Swipe 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 Reveal Swipe Cards in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Reveal Swipe 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
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.
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.
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.
Floating Tags Marquee
Floating Tags Marquee is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Floating Tags Marquee” 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.
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.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Reveal Swipe Cards after you activate it.