Spotlight Effect is a Divi Essential extension that adds an animated spotlight beam to any Divi section. The spotlight can follow the visitor's cursor on hover, track by proximity, or run as a continuous auto-play animation — moving in a circle, vertically, horizontally, diagonally, or in a figure-8 path.
Four visual variants give you control over the look: a classic filled spotlight, a border-only glow, a gradient fill, or a combined gradient border. All settings are configured directly in the Divi Builder Design tab with zero code.
⚠️ Important: Spotlight Effect is an Extension, not a module. It adds a Spotlight Effect panel to the Design tab of Divi Sections. It does not appear as a standalone module in the Divi Builder.
How to Enable
Step 1: Go to WordPress Admin → Divi Essential → Extensions
Step 2: Find Spotlight Effect and toggle it On
Step 3: Open any Divi Section in the Divi Builder
Step 4: Go to the Design tab → Spotlight Effect section
Step 5: Toggle Use Spotlight on and configure your settings
Settings Reference
Use Spotlight
Type: Toggle Default: Off Activates the spotlight effect on the section. All other settings become visible once this is enabled.
Spotlight Color
Type: Color Picker + Opacity Default: #29C4A9 at 100% Sets the color of the spotlight beam. Works across all four variants — fill color for Default and Gradient, border color for Border and Gradient Border. Adjust opacity for softer, more subtle effects.
Variant
Type: Dropdown Default: Default
Controls the visual style of the spotlight shape:
| Variant | Description |
|---|---|
| Default | Solid filled spotlight circle — the classic torch/cone effect |
| Border | Only the border/outline of the spotlight circle is visible — no fill |
| Gradient | Spotlight circle filled with a gradient radiating from the spotlight color |
| Gradient Border | Gradient fill combined with a visible border ring |
Mode
Type: Dropdown Default: Hover
Controls how the spotlight is triggered and follows interaction:
| Mode | Description |
|---|---|
| Hover | Spotlight follows the cursor position as the visitor moves their mouse across the section |
| Proximity | Spotlight activates and reacts when the cursor is near the section, without requiring direct hover |
Auto Play
Type: Toggle Default: Off When enabled, the spotlight animates automatically along a defined path — without requiring any cursor interaction. Useful for sections where you want a constant ambient spotlight motion.
Autoplay Animation
Type: Dropdown Default: Vertical Appears when: Auto Play is On
Defines the path the spotlight follows during automatic animation:
| Option | Description |
|---|---|
| Circle | Spotlight moves in a continuous circular path around the section |
| Horizontal | Spotlight sweeps left and right across the section |
| Vertical | Spotlight sweeps up and down through the section |
| Diagonal | Spotlight moves diagonally corner to corner |
| Figure 8 | Spotlight traces a figure-8 infinity loop path |
Type: Slider Unit: px Default: 3000px Controls the speed of the autoplay animation cycle. Higher values = slower, more gradual movement. Lower values = faster spotlight sweep.
💡 Despite the "px" unit label, Duration controls animation timing speed — not a pixel distance. Think of it as animation frames: 3000px = a slow, cinematic sweep.
Spotlight Size
Type: Slider Unit: px Default: 330px Controls the diameter of the spotlight circle. Larger values create a broader, softer illumination area. Smaller values create a tighter, more focused beam.
Intensity
Type: Slider Unit: px Default: 0.5px Controls the brightness and vividness of the spotlight at its center. Higher values = brighter, more dramatic spotlight. Lower values = subtler, more ambient glow.
Pro Tips
💡 Works best on dark or deep-colored section backgrounds The contrast between the lit spotlight area and the darker surroundings creates the most visual impact. On light backgrounds the effect is barely noticeable — use dark navy, charcoal, or rich brand colors as the section background.
💡 Use Hover mode for interactive hero sections When the spotlight follows the cursor in a hero section, visitors instinctively move their mouse to "explore" the section. This increases time-on-page and makes the first impression memorable.
💡 Use Auto Play (Figure 8) for ambient background sections A slow Figure 8 spotlight sweep on a dark section with no required interaction creates a premium, cinematic ambient effect — great for feature showcases, testimonial sections, and CTAs.
💡 Match Spotlight Color to your brand accent The default teal (#29C4A9) works well as a demo but swap it for your brand color. A purple or blue spotlight on a dark section feels premium; an orange or yellow spotlight creates warmth and energy.
💡 Use Border variant for a subtler effect The Default filled spotlight can feel dramatic at full intensity. The Border variant shows only the ring outline — much more subtle and elegant for professional or corporate sites.
💡 Combine with Particle Effects A slow auto-play spotlight on a section that also has floating particles creates a layered, atmospheric depth that's hard to achieve without specialist design tools.
FAQ
Q: Does Spotlight Effect work on Rows and Modules, or only Sections?
A: Based on the settings panel location (Section → Design tab), the Spotlight Effect applies at the section level.
Q: Does the Hover mode work on touch/mobile devices?
A: Touch devices do not have a hovering cursor. On mobile, the spotlight defaults to a static center position or the Auto Play animation if enabled.
Q: What is the difference between Hover and Proximity modes?
A: Hover mode tracks the cursor position directly — the spotlight follows exactly where the mouse is. Proximity mode activates the spotlight when the cursor is near the section, creating a more atmospheric reaction without precise cursor tracking.
Q: Can I use multiple spotlight effects on different sections?
A: Yes — each section has its own independent Spotlight Effect settings. Different sections can use different colors, variants, modes, and animation paths.
Q: Does the spotlight affect SEO or page content?
A: No. The spotlight is a pure CSS/JS visual overlay. It has no effect on page content, text, or search engine indexing.
Q: Why does Duration use "px" as its unit?
A: The "px" label in the Duration slider is a display convention in the builder. The setting controls animation timing speed, not a pixel measurement — higher values produce slower animation.