Creative · Elementor
Styled Text Builder widget for Elementor
One text block with per-span styling and motion, instead of several heading widgets.
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
One text block with per-span styling and motion, instead of several heading widgets.
render() writes HTML data attributes: data-effect, data-spoiler-desktop, data-spoiler-mobile, data-typing-cursor, data-typing-delay, data-typing-loop, data-typing-speed.
Some inspector controls are marked Pro in PHP (eicon-pro-icon / king-addons-pro-control). Those need King Addons Pro, not Elementor Pro.
The widget script reads data attributes: data-effect.
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 “Styled Text Builder”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Type of content”, “Typography”, “Color”, “Background”. Style and Content tabs are listed on this page.
When to use it
- A hero headline with a highlighted word.
- A slogan with mixed weights.
- An animated phrase on a campaign.
Tip: After King Addons is active, type king in the Elementor search box to list every widget, including Styled Text Builder.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| kng_styled_txt_content_items — Type of content | Options: Text; Image. |
| kng_styled_txt_content_items — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text`. |
| kng_styled_txt_content_items — Color | Writes CSS `color` onto the widget’s front-end markup. |
| kng_styled_txt_content_items — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text`. |
| kng_styled_txt_content_items — Custom Vertical Align | Switcher inspector control (`kng_styled_txt_custom_vertical_align`). |
| kng_styled_txt_content_items — Vertical Align | Writes CSS `vertical-align` onto the widget’s front-end markup. Options: baseline; top; bottom; sub; super; text-top; text-bottom; middle. |
| kng_styled_txt_content_items — Custom Padding | Switcher inspector control (`kng_styled_txt_padding_switcher`). |
| kng_styled_txt_content_items — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| kng_styled_txt_content_items — Custom Margin | Switcher inspector control (`kng_styled_txt_margin_switcher`). |
| kng_styled_txt_content_items — Margin Left | Writes CSS `margin-left` onto the widget’s front-end markup. |
| kng_styled_txt_content_items — Margin Right | Writes CSS `margin-right` onto the widget’s front-end markup. |
| kng_styled_txt_content_items — Custom Border | Switcher inspector control (`kng_styled_txt_custom_border`). |
| kng_styled_txt_content_items — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text`. |
| kng_styled_txt_content_items — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| kng_styled_txt_content_items — Custom Width | Switcher inspector control (`kng_styled_txt_custom_width_switcher`). |
| kng_styled_txt_content_items — Width (px) | The custom width of the current content item is useful for creating multiline text snippets or limiting the image size. |
| kng_styled_txt_content_items — Margin Top | Writes CSS `margin-top` onto the widget’s front-end markup. |
| kng_styled_txt_content_items — Margin Bottom | Writes CSS `margin-bottom` onto the widget’s front-end markup. |
| kng_styled_txt_content_items — Text Effect | Options: None; Text Gradient; Underline Gradient; Outline Stroke; Spoiler / Thanos Snap %s; Typing Text %s. |
| kng_styled_txt_content_items — Reveal on Desktop | Options: Hover; Hover + Click (Remove); Click. |
| kng_styled_txt_content_items — Reveal on Mobile | Options: Tap; Hover; Hover + Tap (Remove). |
| kng_styled_txt_content_items — Spoiler Dots Color | Color written to this widget’s CSS selector. |
| kng_styled_txt_content_items — Spoiler Opacity | Spacing/size control (min 0.1, max 1). |
| kng_styled_txt_content_items — Animation Speed (s) | Spacing/size control (min 0.5, max 5). |
| kng_styled_txt_content_items — Typing Speed (ms) | Numeric control (default 80, min 10, max 500). |
| kng_styled_txt_content_items — Loop Delay (ms) | Numeric control (default 1200, min 0, max 10000). |
| kng_styled_txt_content_items — Loop Typing | Switcher inspector control (`kng_styled_txt_typing_loop`). |
| kng_styled_txt_content_items — Cursor | Text inspector control (`kng_styled_txt_typing_cursor`). |
| kng_styled_txt_content_items — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| kng_styled_txt_content_items — Stroke Color | Color written to this widget’s CSS selector. |
| kng_styled_txt_content_items — Stroke Width (px) | Numeric control (default 1, min 1). |
| kng_styled_txt_content_items — Background (Kng Styled Txt Effect Gradient) | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text .king-addons-styled-text-inner`. |
| kng_styled_txt_content_items — Background (Kng Styled Txt Underline Effects Gradient) | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text .king-addons-styled-text-inner`. |
| kng_styled_txt_content_items — Vertical Position (%) | Writes CSS (background-position, background-repeat) onto the widget’s front-end markup. (min 0, max 100). |
| kng_styled_txt_content_items — Height (%) | Writes CSS `background-size` onto the widget’s front-end markup. (min 0, max 100). |
| kng_styled_txt_content_items — Height on mouse hover (%) | Writes CSS (king-addons-styled-text-inner, background-size) onto the widget’s front-end markup. (min 0, max 100). |
| kng_styled_txt_content_items — Text | Textarea inspector control (`kng_styled_txt_content`). |
| kng_styled_txt_content_items — Image | Media Library attachment(s); render() uses the URL/ID as the image source. |
| kng_styled_txt_content_items — Image Size | Elementor image-size group (thumbnail, medium, large, full, custom). |
| kng_styled_txt_content_items — Width (px) (Kng Image Comparison Box Max Width) | Writes CSS `width` onto the widget’s front-end markup. (default 50, min 0). |
| kng_styled_txt_content_items — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text img`. |
| kng_styled_txt_content_items — Border (Kng Styled Txt Image Border) | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text img`. |
| kng_styled_txt_content_items — Border Radius (Kng Styled Txt Image Border Radius) | Writes CSS `border-radius` onto the widget’s front-end markup. |
| kng_styled_txt_content_items — Custom Vertical Align (Kng Styled Txt Image Custom Vertical Align) | Switcher inspector control (`kng_styled_txt_image_custom_vertical_align`). |
| kng_styled_txt_content_items — Vertical Align (Kng Styled Txt Image Vertical Align) | Writes CSS `vertical-align` onto the widget’s front-end markup. Options: baseline; top; bottom; sub; super; text-top; text-bottom; middle. |
| kng_styled_txt_content_items — Custom Margin (Kng Styled Txt Image Margin Switcher) | Switcher inspector control (`kng_styled_txt_image_margin_switcher`). |
| kng_styled_txt_content_items — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| kng_styled_txt_content_items — Custom CSS Class | Switcher inspector control (`kng_styled_txt_custom_css_class_switcher`). |
| kng_styled_txt_content_items — CSS Class | Text inspector control (`kng_styled_txt_custom_css_class`). |
| kng_styled_txt_content_items — Transform | Switcher inspector control (`kng_styled_txt_transform_switcher`). |
| kng_styled_txt_content_items — Rotate | Writes CSS (transform, display) onto the widget’s front-end markup. (default 0, min -360, max 360). |
| kng_styled_txt_content_items — Offset X | Writes CSS (transform, display) onto the widget’s front-end markup. (min -100, max 100). |
| kng_styled_txt_content_items — Offset Y | Writes CSS (transform, display) onto the widget’s front-end markup. (min -100, max 100). |
| kng_styled_txt_content_items — Link | Switcher inspector control (`kng_styled_txt_link_switcher`). |
| kng_styled_txt_content_items — Link (Kng Styled Txt Link) | Elementor URL control (href, new tab, nofollow) applied to a front-end link. |
| Content — Kng Styled Txt Content Items | Repeater rows; render() loops each item to build the list or slides. |
| Common Styles — Item Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-styled-text`. |
| Common Styles — Item Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Common Styles — Content Align | Writes CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Common Styles — Item Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Common Styles — Item Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Wrapper Tag Settings — HTML Tag | The chosen value is read in render() and applied on the front end. Options: div; h1; h2; h3; h4; h5; h6; section…. |
| Wrapper Tag Settings — Tag Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-styled-text-builder-items`. |
| Wrapper Tag Settings — Tag Color | Writes CSS `color` onto the widget’s front-end markup. |
| Wrapper Tag Settings — Tag Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Wrapper Tag Settings — Tag Margin | Writes CSS `margin` onto the widget’s front-end markup. |
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 Styled Text Builder 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 Styled Text Builder in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Styled Text Builder”, 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.
Content Flip Box
A card that flips or hover-reveals a second face — icon/title on the front, detail on the back.
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 Styled Text Builder after you activate it.