Content · Elementor
Advanced Callout Box widget for Elementor
A note, tip, or warning box with an icon and optional button.
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 note, tip, or warning box with an icon and optional button.
Advanced Callout Box Widget (Free).
render() writes HTML data attributes: data-accent, data-align, data-collapsible, data-copy, data-icon-position, data-type.
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 “Advanced Callout Box”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Type”, “Title”, “Title HTML Tag”, “Content”. Style and Content tabs are listed on this page.
When to use it
- A warning on a docs page.
- A tip under a tutorial.
- A “related download” callout.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Content — Type | The chosen value is read in render() and applied on the front end. Options: Note; Tip; Warning. |
| 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; P. |
| Content | Saved on the widget and consumed in render(). |
| Content — Show Icon | Switcher inspector control (`kng_show_icon`). |
| Content — Icon Position | The chosen value is read in render() and applied on the front end. Options: Left; Top; None. |
| Content — Custom Icon | Switcher inspector control (`kng_icon_override`). |
| Content — Select Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| CTA — Button | Switcher inspector control (`kng_button_enable`). |
| CTA — Button Text | Saved on the widget and consumed in render(). |
| CTA — Button Link | Elementor URL control (href, new tab, nofollow) applied to a front-end link. |
| Box — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Box — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-advanced-callout`. |
| Box — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-advanced-callout`. |
| Box — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 80). |
| Box — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Box — Content Alignment | Writes CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Box — Icon Gap | Spacing/size control (min 0, max 60). |
| Box — Margin Bottom | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 200). |
| Box — Left Accent Bar | Switcher inspector control (`kng_accent_enable`). |
| Box — Accent Color | Color written to this widget’s CSS selector. |
| Box — Accent Bar Width | Spacing/size control (min 1, max 16). |
| Icon — Color | Color written to this widget’s CSS selector. |
| Icon — Size | Spacing/size control (min 12, max 80). |
| Title — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-advanced-callout__title`. |
| Title — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Content — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-advanced-callout__content`. |
| Content — Color | Writes CSS `color` 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-advanced-callout__button`. |
| Button — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Button — Spacing | Spacing/size control (min 0, max 60). |
| Button — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 80). |
| Button — Border Width | Spacing/size control (min 0, max 8). |
| Button — Border Style | Options: None; Solid; Dashed; Dotted; Double. |
| Button (Normal) — Background Color | Color written to this widget’s CSS selector. |
| Button (Normal) — Text Color | Color written to this widget’s CSS selector. |
| Button (Normal) — Border Color | Color written to this widget’s CSS selector. |
| Button (Hover) — Background Color | Color written to this widget’s CSS selector. |
| Button (Hover) — Text Color | Color written to this widget’s CSS selector. |
| Button (Hover) — Border 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
What does Advanced Callout Box actually change on the page?
A note, tip, or warning box with an icon and optional button. Inspector labels from this widget’s PHP include “Type”, “Title”, “Title HTML Tag”, “Content”.
How do I add Advanced Callout Box in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Advanced Callout 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 content widgets
Accordion
Collapsible panels for FAQs, policies, and long answers. One heading per panel; the body stays hidden until the visitor opens it.
Advanced Blog Posts Carousel
A carousel of blog posts with image, title, and meta — lighter than a full magazine grid.
Advanced Card Carousel
A carousel of cards you fill yourself (image, text, button) — not a post query.
Charts
Bar, line, pie, or radar charts from values you enter in the widget.
Content Ticker
A scrolling ticker of posts or custom items for headlines and announcements.
Data Table
A table you edit in the widget: rows, columns, and basic styling. For a saved table reused across pages, see the Data Table Builder extension.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Advanced Callout Box after you activate it.