Content · Elementor
Kinetic Text Hover widget for Elementor
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.
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
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.
render() writes HTML data attributes: data-mobile, data-options, data-text, data-trigger.
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 “Kinetic Text Hover”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Text”, “HTML Tag”, “Link”, “Preset”. Style and Content tabs are listed on this page.
When to use it
- An Elementor page that needs Kinetic Text Hover.
- A layout in the posts, cards, lists, FAQs, and editorial layouts group.
- Search the panel for “Kinetic Text Hover” after King Addons is active.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Content — Text | Saved on the widget and consumed in render(). |
| Content — HTML Tag | The chosen value is read in render() and applied on the front end. Options: H1; H2; H3; H4; H5; H6; DIV; SPAN…. |
| Content — Link | Elementor URL control (href, new tab, nofollow) applied to a front-end link. |
| Content — Preset | The chosen value is read in render() and applied on the front end. Options: Split Underline; Glow Stroke; Chroma Shift; Letter Drift; Sheen Sweep; Mask Reveal. |
| Content — Trigger | The chosen value is read in render() and applied on the front end. |
| Content — Mobile Behavior | The chosen value is read in render() and applied on the front end. Options: Disable Effects; Tap to Activate. |
| Kng Varfont Enable | Switcher inspector control (`kng_varfont_enable`). |
| Kng Varfont Wght Min | Numeric value used in this widget’s render/JS (default 400, min 100, max 900). |
| Kng Varfont Wght Max | Numeric value used in this widget’s render/JS (default 700, min 100, max 900). |
| Kng Varfont Wdth Min | Numeric value used in this widget’s render/JS (default 100, min 75, max 125). |
| Kng Varfont Wdth Max | Numeric value used in this widget’s render/JS (default 110, min 75, max 125). |
| Kng Varfont Width Safe | Switcher inspector control (`kng_varfont_width_safe`). |
| Kng Magnetic Enable | Switcher inspector control (`kng_magnetic_enable`). |
| Kng Magnetic Strength | Spacing/size control (min 0, max 100). |
| Kng Magnetic Radius | Spacing/size control (min 40, max 320). |
| Kng Magnetic Max Offset | Spacing/size control (min 0, max 30). |
| Kng Magnetic Smoothing | Numeric value used in this widget’s render/JS (default 0.35, min 0, max 1). |
| Kng Magnetic Clamp | The chosen value is read in render() and applied on the front end. Options: None; Soft; Hard. |
| Kng Magnetic Disable Mobile | Switcher inspector control (`kng_magnetic_disable_mobile`). |
| Kng Reveal Enable | Switcher inspector control (`kng_reveal_enable`). |
| Kng Reveal Type | Written to the `type` HTML attribute in render(). Options: Fade; Slide Up; Clip Reveal. |
| Kng Reveal Duration | Spacing/size control (min 100, max 2000). |
| Kng Reveal Delay | Spacing/size control (min 0, max 1000). |
| Kng Reveal Threshold | Numeric value used in this widget’s render/JS (default 0.2, min 0, max 1). |
| Kng Reveal Once | Switcher inspector control (`kng_reveal_once`). |
| Kng Motion Respect | Switcher inspector control (`kng_motion_respect`). |
| Kng Motion Mode | The chosen value is read in render() and applied on the front end. Options: Disable Animations; Simplify Effects. |
| Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-kinetic-text-hover__visual`. |
| Typography — Alignment | Writes CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Typography — Text Color | Color written to this widget’s CSS selector. |
| Typography — Hover Color | Color written to this widget’s CSS selector. |
| Typography — Stroke Color | Color written to this widget’s CSS selector. |
| Typography — Gradient Text | Switcher inspector control (`kng_gradient_text_enable`). |
| Typography — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-kinetic-text-hover__visual`. |
| Typography — Background (Kng Text Background) | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-kinetic-text-hover__inner`. |
| Typography — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Typography — Letter Spacing on Hover | Spacing/size control (min -5, max 20). |
| Effects — Intensity | Spacing/size control (min 0, max 100). |
| Effects — Speed | Spacing/size control (min 100, max 2000). |
| Effects — Easing | Options: Ease; Linear; Ease In; Ease Out; Ease In Out; Cubic. |
| Effects — Hover Out Duration | Spacing/size control (min 0, max 2000). |
| Split Underline — Thickness | Spacing/size control (min 1, max 8). |
| Split Underline — Offset | Spacing/size control (min 0, max 20). |
| Split Underline — Radius | Spacing/size control (min 0, max 20). |
| Split Underline — Underline Color | Color written to this widget’s CSS selector. |
| Glow Stroke — Stroke Width | Spacing/size control (min 0, max 3). |
| Glow Stroke — Glow Blur | Spacing/size control (min 0, max 30). |
| Glow Stroke — Glow Intensity | Spacing/size control (min 0, max 100). |
| Glow Stroke — Glow Color | Color written to this widget’s CSS selector. |
| Chroma Shift — Chroma Distance | Spacing/size control (min 0, max 12). |
| Chroma Shift — Chroma Opacity | Spacing/size control (min 0, max 100). |
| Chroma Shift — Left Color | Color written to this widget’s CSS selector. |
| Chroma Shift — Right Color | Color written to this widget’s CSS selector. |
| Chroma Shift — Bottom Color | Color written to this widget’s CSS selector. |
| Letter Drift — Max Translate | Spacing/size control (min 0, max 30). |
| Letter Drift — Randomness | Spacing/size control (min 0, max 100). |
| Sheen Sweep — Angle | Spacing/size control (min 0, max 180). |
| Sheen Sweep — Sweep Duration | Spacing/size control (min 200, max 3000). |
| Sheen Sweep — Brightness | Spacing/size control (min 0, max 100). |
| Mask Reveal — Reveal Direction | The chosen value is read in render() and applied on the front end. Options: Left to Right; Right to Left; Bottom to Top; Top to Bottom. |
| Mask Reveal — Edge Softness | Spacing/size control (min 0, max 40). |
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 Kinetic Text Hover 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 Kinetic Text Hover in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Kinetic Text Hover”, 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
Reveal Swipe Cards
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.
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.
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.
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.
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.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Kinetic Text Hover after you activate it.