Content · Elementor
Unfold widget for Elementor
Unfold is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Unfold” 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
Unfold is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Unfold” in the Elementor panel.
render() writes HTML data attributes: data-animate-type, data-button-position, data-fade-height, data-fade-only-folded, data-fold-duration, data-fold-easing, data-fold-height-desktop, data-fold-height-mobile.
Some inspector controls are marked Pro in PHP (eicon-pro-icon / king-addons-pro-control). Those need King Addons Pro, not Elementor Pro.
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 “Unfold”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Content Source (Pro)”, “Title Enable”, “Title”, “Title HTML Tag”. Style and Content tabs are listed on this page.
When to use it
- An Elementor page that needs Unfold.
- A layout in the posts, cards, lists, FAQs, and editorial layouts group.
- Search the panel for “Unfold” after King Addons is active.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Content — Content Source (Pro) | The chosen value is read in render() and applied on the front end. Options: Editor; Elementor Template; Elementor Template. |
| Content — Title Enable | Switcher inspector control (`kng_title_enable`). |
| Content — Title | Saved on the widget and consumed in render(). |
| Content — Title HTML Tag | The chosen value is read in render() and applied on the front end. Options: H1; H2; H3; H4; H5; H6; DIV. |
| Content | Printed in the widget HTML from render(). |
| Content — Kng Template Id (Pro) | The chosen value is read in render() and applied on the front end. |
| Content — Alignment | Writes CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right; Justify. |
| Button — Button Enable | Switcher inspector control (`kng_button_enable`). |
| Button — Unfold Text | Written to the `data-unfold-text` HTML attribute in render(). |
| Button — Fold Text | Written to the `data-fold-text` HTML attribute in render(). |
| Button — Icon Enable | Switcher inspector control (`kng_icon_enable`). |
| Button — Unfold Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Button — Fold Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Button — Icon Position | Written to the `data-icon-position` HTML attribute in render(). Options: Before; After. |
| Button — Button Size | The chosen value is read in render() and applied on the front end. Options: XS; SM; MD; LG; Block. |
| Button — Kng Button Position (Pro) | The chosen value is read in render() and applied on the front end. Options: Inside; Outside. |
| Button — Button Alignment | Writes CSS `justify-content` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Fade Effect — Fade Enable | Switcher inspector control (`kng_fade_enable`). |
| Fade Effect — Kng Fade Height (Pro) | Spacing/size control (min 0, max 400). |
| Fade Effect — Fade Only When Folded | Switcher inspector control (`kng_fade_only_folded`). |
| Advanced Settings — Initial State | The chosen value is read in render() and applied on the front end. Options: Folded; Unfolded. |
| Advanced Settings — Fold Height Unit | The chosen value is read in render() and applied on the front end. Options: Percent; PX. |
| Advanced Settings — Fold Height | Spacing/size control (min 10, max 100). |
| Advanced Settings — Kng Fold Height Px (Pro) | Spacing/size control (min 50, max 2000). |
| Advanced Settings — Animation Duration | The chosen value is read in render() and applied on the front end. Options: Fast; Normal; Slow; Custom. |
| Advanced Settings — Custom Duration (s) | Numeric value used in this widget’s render/JS (default 0.5, min 0.1). |
| Advanced Settings — Easing | The chosen value is read in render() and applied on the front end. Options: Linear; Ease; Ease In; Ease Out; Ease In Out. |
| Advanced Settings — Kng Fold Duration Mode (Pro) | The chosen value is read in render() and applied on the front end. Options: Use Shared; Fast; Normal; Slow; Custom. |
| Advanced Settings — Fold Custom (s) | Numeric value used in this widget’s render/JS (default 0.5, min 0.1). |
| Advanced Settings — Kng Fold Easing (Pro) | The chosen value is read in render() and applied on the front end. Options: Use Shared; Linear; Ease; Ease In; Ease Out; Ease In Out. |
| Advanced Settings — Kng Unfold Duration Mode (Pro) | The chosen value is read in render() and applied on the front end. Options: Use Shared; Fast; Normal; Slow; Custom. |
| Advanced Settings — Unfold Custom (s) | Numeric value used in this widget’s render/JS (default 0.5, min 0.1). |
| Advanced Settings — Kng Unfold Easing (Pro) | The chosen value is read in render() and applied on the front end. Options: Use Shared; Linear; Ease; Ease In; Ease Out; Ease In Out. |
| Advanced Settings — Kng Animate Height Type (Pro) | The chosen value is read in render() and applied on the front end. Options: Auto to fixed; Max height. |
| Advanced Settings — Kng Scroll After Unfold (Pro) | Switcher inspector control (`kng_scroll_after_unfold`). |
| Advanced Settings — Scroll Offset | Spacing/size control (min 0, max 400). |
| Box — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-unfold__box`. |
| Box — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-unfold__box`. |
| Box — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Box — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-unfold__box`. |
| Box — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Box — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Title — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-unfold__title`. |
| Title — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Title — Margin Bottom | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 200). |
| Content — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-unfold__content`. |
| Content — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Content — Link Color | Writes CSS `color` onto the widget’s front-end markup. |
| Content — Link Hover Color | Writes CSS (a, color) onto the widget’s front-end markup. |
| Content — Paragraph Spacing | Writes CSS (p, margin-bottom) onto the widget’s front-end markup. (min 0, max 50). |
| Button — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-unfold__button`. |
| Button (Normal) — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Button (Normal) — Background Color | 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}} .king-addons-unfold__button`. |
| Button (Normal) — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Button (Normal) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-unfold__button`. |
| Button (Normal) — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Button (Normal) — Icon Spacing | Writes CSS (margin-right, margin-left) onto the widget’s front-end markup. (min 0, max 50). |
| Button (Normal) — Hover Animation | The chosen value is read in render() and applied on the front end. Options: None; Lift; Scale. |
| Button (Hover) — Text Color | Writes CSS (button, color) onto the widget’s front-end markup. |
| Button (Hover) — Background Color | Writes CSS (button, background-color) onto the widget’s front-end markup. |
| Button (Hover) — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-unfold__button:hover`. |
| Button (Hover) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-unfold__button:hover`. |
| Fade Overlay — Fade Color | Color written to this widget’s CSS selector. |
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 Unfold 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 Unfold in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Unfold”, 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
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.
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.
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.
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.
Custom Post Types Grid
Custom Post Types Grid is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Custom Post Types Grid” in the Elementor panel.
Custom Post Types Slider
Custom Post Types Slider is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Custom Post Types Slider” in the Elementor panel.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Unfold after you activate it.