Creative · Elementor
Content Flip Box widget for Elementor
A card that flips or hover-reveals a second face — icon/title on the front, detail on the back.
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 card that flips or hover-reveals a second face — icon/title on the front, detail on the back.
render() writes HTML data attributes: data-trigger.
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 “Content Flip Box”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Select Icon Type”, “Image”, “Image Size”, “Icon”. Style and Content tabs are listed on this page.
When to use it
- A services grid with short backs.
- Team “fun fact” cards.
- Feature tiles that stay compact.
Tip: After King Addons is active, type king in the Elementor search box to list every widget, including Content Flip Box.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Front Side — Select Icon Type | The chosen value is read in render() and applied on the front end. Options: None; Icon; Image. |
| Front Side — Image | Media Library attachment(s); render() uses the URL/ID as the image source. |
| Front Side — Image Size | Elementor image-size group (thumbnail, medium, large, full, custom). |
| Front Side — Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Front Side — Trigger | The chosen value is read in render() and applied on the front end. Options: Hover on box; Click on box; Click on button. |
| Front Side — Front Button | Printed in the widget HTML from render(). |
| Front Side — Button Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Front Side — Front Title | Printed in the widget HTML from render(). |
| Front Side — Description | Printed in the widget HTML from render(). |
| Back Side — Select Icon Type | The chosen value is read in render() and applied on the front end. Options: None; Icon; Image. |
| Back Side — Image | Media Library attachment(s); render() uses the URL/ID as the image source. |
| Back Side — Image Size | Elementor image-size group (thumbnail, medium, large, full, custom). |
| Back Side — Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Back Side — Link on element | The chosen value is read in render() and applied on the front end. Options: None; Title; Whole Box; Button. |
| Back Side — Link URL | Elementor URL control (href, new tab, nofollow) applied to a front-end link. |
| Back Side — Back Button | Printed in the widget HTML from render(). |
| Back Side — Button Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Back Side — Back Title | Printed in the widget HTML from render(). |
| Back Side — Description | Printed in the widget HTML from render(). |
| Box Settings — Height | Writes CSS `height` onto the widget’s front-end markup. (min 20, max 1000). |
| Box Settings — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 700). |
| Box Settings — Animation | Options: Fade; Flip; Slide; Push; Zoom Out; Zoom In. |
| Box Settings — 3D Animation | Switcher inspector control (`king_addons_content_flip_box_box_anim_3d`). |
| Box Settings — Animation Direction | Options: Left; Right; Top; Bottom. |
| Box Settings — Animation Duration (ms) | Writes CSS `transition-duration` onto the widget’s front-end markup. (default 500, min 0). |
| Box Settings — Animation Timing | The chosen value is read in render() and applied on the front end. Options: Ease; Linear; Ease In; Ease Out. |
| Front Side — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-content-flip-box-front`. |
| Front Side — Overlay Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Front Side — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Front Side — Vertical Position | Writes CSS `justify-content` onto the widget’s front-end markup. Options: Top; Middle; Bottom. |
| Front Side — Alignment | Writes CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Front Side — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-content-flip-box-front`. |
| Front Side — Width | Writes CSS `max-width` onto the widget’s front-end markup. (min 1, max 100). |
| Front Side — Distance | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 300). |
| Front Side — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 150). |
| Front Side — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Front Side — Font Size | Writes CSS `font-size` onto the widget’s front-end markup. (min 0, max 300). |
| Front Side — Distance (King Addons Content Flip Box Front Icon Distance) | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 150). |
| Front Side — Color (King Addons Content Flip Box Front Title Color) | Writes CSS `color` onto the widget’s front-end markup. |
| Front Side — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-content-flip-box-front .king-addons-content-flip-box-title`. |
| Front Side — Distance (King Addons Content Flip Box Front Title Distance) | Writes CSS `margin` onto the widget’s front-end markup. (min 0, max 150). |
| Front Side — Color (King Addons Content Flip Box Front Description Color) | Writes CSS `color` onto the widget’s front-end markup. |
| Front Side — Typography (King Addons Content Flip Box Front Description Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-content-flip-box-front .king-addons-content-flip-box-description`. |
| Front Side — Distance (King Addons Content Flip Box Front Description Distance) | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 150). |
| Back Side — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-content-flip-box-back`. |
| Back Side — Overlay Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Back Side — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Back Side — Vertical Position | Writes CSS `justify-content` onto the widget’s front-end markup. Options: Top; Middle; Bottom. |
| Back Side — Alignment | Writes CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Back Side — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-content-flip-box-back`. |
| Back Side — Width | Writes CSS `max-width` onto the widget’s front-end markup. (min 1, max 100). |
| Back Side — Distance | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 150). |
| Back Side — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 150). |
| Back Side — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Back Side — Font Size | Writes CSS `font-size` onto the widget’s front-end markup. (min 0, max 300). |
| Back Side — Distance (King Addons Content Flip Box Back Icon Distance) | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 150). |
| Back Side — Color (King Addons Content Flip Box Back Title Color) | Writes CSS `color` onto the widget’s front-end markup. |
| Back Side — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-content-flip-box-back .king-addons-content-flip-box-title`. |
| Back Side — Distance (King Addons Content Flip Box Back Title Distance) | Writes CSS `margin` onto the widget’s front-end markup. (min 0, max 150). |
| Back Side — Color (King Addons Content Flip Box Back Description Color) | Writes CSS `color` onto the widget’s front-end markup. |
| Back Side — Typography (King Addons Content Flip Box Back Description Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-content-flip-box-back .king-addons-content-flip-box-description`. |
| Back Side — Distance (King Addons Content Flip Box Back Description Distance) | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 150). |
| Front Button (Normal) — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-content-flip-box-button`. |
| Front Button (Normal) — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Front Button (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Front Button (Normal) — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-content-flip-box-button`. |
| Front Button (Normal) — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 50). |
| Front Button (Normal) — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Front Button (Hover) — Text Color | Writes CSS (king-addons-content-flip-box-button, color) onto the widget’s front-end markup. |
| Front Button (Hover) — Background Color | Writes CSS (king-addons-content-flip-box-button, background-color) onto the widget’s front-end markup. |
| Front Button (Hover) — Border Color | Writes CSS (king-addons-content-flip-box-button, border-color) onto the widget’s front-end markup. |
| Front Button (Hover) — Animation | Animation picker; the chosen effect is applied on the front end. |
| Back Button (Normal) — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-content-flip-box-button-backside`. |
| Back Button (Normal) — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Back Button (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Back Button (Normal) — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-content-flip-box-button-backside`. |
| Back Button (Normal) — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 50). |
| Back Button (Normal) — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Back Button (Hover) — Text Color | Writes CSS (king-addons-content-flip-box-button-backside, color) onto the widget’s front-end markup. |
| Back Button (Hover) — Background Color | Writes CSS (king-addons-content-flip-box-button-backside, background-color) onto the widget’s front-end markup. |
| Back Button (Hover) — Border Color | Writes CSS (king-addons-content-flip-box-button-backside, border-color) onto the widget’s front-end markup. |
| Back Button (Hover) — Animation | Animation picker; the chosen effect is applied on the front end. |
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 Content Flip Box actually change on the page?
A card that flips or hover-reveals a second face — icon/title on the front, detail on the back. Inspector labels from this widget’s PHP include “Select Icon Type”, “Image”, “Image Size”, “Icon”.
How do I add Content Flip Box in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Content Flip Box”, 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.
Creative Button
A button with extra shapes and hover treatments beyond Elementor’s default button.
Pulsing Button
A CTA with a pulse animation so it reads as the next action on a busy page.
3D Holographic Card
A 3D card with holographic sheen, rim light, and parallax — one decorative object, not a post loop.
Spotlight Reveal
A spotlight that follows the pointer and reveals the layer underneath — a hover effect, not a content widget.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Content Flip Box after you activate it.