Creative · Elementor
Spotlight Reveal widget for Elementor
A spotlight that follows the pointer and reveals the layer underneath — a hover effect, not a content widget.
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 spotlight that follows the pointer and reveals the layer underneath — a hover effect, not a content widget.
Spotlight Reveal Widget (Free).
render() writes HTML data attributes: data-options.
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 “Spotlight Reveal”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Base Title”, “Base Description”, “Reveal Title”, “Reveal Description”. Style and Content tabs are listed on this page.
When to use it
- A portfolio cover.
- A premium feature tile.
- A brand campaign block.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Content — Base Title | Saved on the widget and consumed in render(). |
| Content — Base Description | Saved on the widget and consumed in render(). |
| Content — Reveal Title | Saved on the widget and consumed in render(). |
| Content — Reveal Description | Saved on the widget and consumed in render(). |
| Content — Interactive Layer | Choose which layer receives pointer interactions. |
| Content — Hide Reveal Layer From Screen Readers | Switcher inspector control (`kng_reveal_aria_hidden`). |
| Content — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-spotlight-reveal__layer--base`. |
| Content — Background (Kng Reveal Background) | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-spotlight-reveal__layer--reveal`. |
| Mask — Mask Size | Spacing/size control (min 60, max 600). |
| Mask — Edge Softness | Spacing/size control (min 0, max 200). |
| Mask — Start Position | The chosen value is read in render() and applied on the front end. Options: Center; Custom. |
| Mask — Start X (%) | Spacing/size control (min 0, max 100). |
| Mask — Start Y (%) | Spacing/size control (min 0, max 100). |
| Mask — Constrain Within Container | Switcher inspector control (`kng_mask_constrain`). |
| Trigger — Reveal Trigger | The chosen value is read in render() and applied on the front end. Options: Follow Cursor; Scroll Progress. |
| Trigger — Smoothing | Numeric value used in this widget’s render/JS (default 0.2, min 0, max 1). |
| Trigger — Activate on Hover Only | Switcher inspector control (`kng_cursor_hover_only`). |
| Trigger — Start Offset (%) | Viewport offset before the reveal starts. |
| Trigger — End Offset (%) | Viewport offset after the reveal ends. |
| Trigger — Show Reveal Layer in Editor | Switcher inspector control (`kng_editor_show_reveal`). |
| Trigger — Fallback When JS Is Disabled | The chosen value is read in render() and applied on the front end. Options: Static Spotlight; Reveal Fully Visible. |
| Container — Min Height | Writes CSS `min-height` onto the widget’s front-end markup. (min 120, max 1000). |
| Container — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 80). |
| Container — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-spotlight-reveal`. |
| Container — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-spotlight-reveal`. |
| Base Layer — Opacity | Numeric control (default 1, min 0, max 1). |
| Base Layer — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Base Layer — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-spotlight-reveal__layer--base .king-addons-spotlight-reveal__t…`. |
| Base Layer — Content Width | Spacing/size control (min 120, max 1200). |
| Base Layer — Color (Kng Base Description Color) | Writes CSS `color` onto the widget’s front-end markup. |
| Base Layer — Typography (Kng Base Description Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-spotlight-reveal__layer--base .king-addons-spotlight-reveal__d…`. |
| Base Layer — Title/Description Spacing | Spacing/size control (min 0, max 120). |
| Base Layer — Padding | Spacing/size control. |
| Base Layer — Text Alignment | Options: Left; Center; Right. |
| Base Layer — Horizontal Position | Options: Left; Center; Right. |
| Base Layer — Vertical Position | Options: Top; Middle; Bottom. |
| Base Layer — Dim Base On Reveal | Switcher inspector control (`kng_dim_base`). |
| Base Layer — Dim Opacity | Numeric control (default 0.6, min 0, max 1). |
| Reveal Layer — Opacity | Numeric control (default 1, min 0, max 1). |
| Reveal Layer — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Reveal Layer — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-spotlight-reveal__layer--reveal .king-addons-spotlight-reveal_…`. |
| Reveal Layer — Content Width | Spacing/size control (min 120, max 1200). |
| Reveal Layer — Color (Kng Reveal Description Color) | Writes CSS `color` onto the widget’s front-end markup. |
| Reveal Layer — Typography (Kng Reveal Description Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-spotlight-reveal__layer--reveal .king-addons-spotlight-reveal_…`. |
| Reveal Layer — Title/Description Spacing | Spacing/size control (min 0, max 120). |
| Reveal Layer — Css Filter | CSS filter group (blur, brightness, contrast, saturation). Selector: `{{WRAPPER}} .king-addons-spotlight-reveal__layer--reveal`. |
| Reveal Layer — Padding | Spacing/size control. |
| Reveal Layer — Text Alignment | Options: Left; Center; Right. |
| Reveal Layer — Horizontal Position | Options: Left; Center; Right. |
| Reveal Layer — Vertical Position | Options: Top; Middle; Bottom. |
| Overlay — Tint Color | Color written to this widget’s CSS selector. |
| Overlay — Opacity | Numeric control (default 0.65, min 0, max 1). |
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 Spotlight Reveal actually change on the page?
A spotlight that follows the pointer and reveals the layer underneath — a hover effect, not a content widget. Inspector labels from this widget’s PHP include “Base Title”, “Base Description”, “Reveal Title”, “Reveal Description”.
How do I add Spotlight Reveal in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Spotlight Reveal”, 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.
3D Holographic Card
A 3D card with holographic sheen, rim light, and parallax — one decorative object, not a post loop.
Content Flip Box
A card that flips or hover-reveals a second face — icon/title on the front, detail on the back.
Magnetic Buttons
Buttons that ease toward the cursor on hover. Use on a few CTAs, not every link.
Creative Button
A button with extra shapes and hover treatments beyond Elementor’s default button.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Spotlight Reveal after you activate it.