Divi Essential Documentation

⌘K
  1. Home
  2. Docs
  3. Divi Essential Documentat...
  4. Features
  5. Spotlight Card & Card Effect

Spotlight Card & Card Effect

We have introduced two powerful new visual enhancement features—Spotlight Card and Card Effect—designed to bring modern, interactive motion to selected Divi Essential modules. These effects add dynamic highlights, animated borders, and engaging hover/click interactions that instantly elevate the look and feel of any card‑based design.

The goal of these features is simple:
make your modules visually standout, more interactive, and more engaging—without using custom CSS or scripts.

At this moment, these features are available inside the Next Blurb module, and we will continue adding them to more modules across the Divi Essential suite.

1. Spotlight Card — Feature Overview

The Spotlight Card effect adds an animated, interactive highlighting effect over your module’s card area.
It creates a beautiful “spotlight” glow that follows user interaction and enhances visual engagement.

Perfect for:

  • Feature cards
  • Service boxes
  • Team/portfolio cards
  • Any interactive card‑based design

How to Enable Spotlight Card

Inside supported modules (e.g., Next Blurb):
Go to Content → Spotlight Card

Toggle:

Use Spotlight – ON

Once enabled, additional settings appear.

Spotlight Card Settings

➤ Select Color

Choose the main glow color of the spotlight.

➤ Select Color 2

(Optional) Secondary color for two‑tone or gradient-style spotlight.

➤ Variant

Available variants include:

  • Gradient Border
  • Glow
  • Soft Spotlight
  • Radial Highlight

Each variant changes how the spotlight blends with the card.

➤ Mode

Defines user interaction:

  • Hover → Spotlight reacts to mouse movement
  • Click → Spotlight activates when clicked

➤ Duration

Animation duration in milliseconds.
Example: 3000 ms = 3 seconds glow transition.

➤ Auto Play

Enable automatic motion even without user interaction.

➤ Auto Play Animation

Choose how the spotlight travels:

  • Circle
  • Linear
  • Pulse
  • Rotate

➤ Spotlight Size

Adjust the radius of the glowing spotlight.

➤ Intensity

Controls brightness/strength of the spotlight.
Higher intensity = stronger glow.

2. Card Effect — Feature Overview

The Card Effect feature adds animated border and motion effects to your module’s card container.
It creates a premium, animated display useful for:

  • Feature highlights
  • Pricing cards
  • Hover‑interactive cards
  • Portfolio and showcase blocks

How to Enable Card Effect

Inside supported modules (e.g., Next Blurb):
Go to Content → Card Effect

Toggle:

Use Card Effect – ON

Card Effect Settings

➤ Effect Type

Choose from multiple animated border styles:

  • Electric Border
  • Glow Border
  • Neon Sweep
  • Shimmer Line
  • Pulse Border
  • (More variations depending on module updates)

➤ Primary Color

Pick the animation color for the card effect.
This defines glow/border/line color.

➤ Speed

Controls the animation speed.
Lower = slower animation
Higher = faster movement

Example:

  • Speed 1 → moderate
  • Speed 3 → fast animation

Where These Features Are Available

  • Next Blurb 

Why These Features Matter

These effects bring:

  • Higher engagement
  • Modern UI/UX
  • Interactive focus points
  • Unique visual style beyond standard Divi modules

Perfect for modern website designs where user attention and card interaction matter

How can we help?