Card Effects

Divi Card Effects is a Divi Essential extension that adds interactive hover and interaction effects to card-style modules. Instead of a flat, static card, your modules respond to mouse movement, hover, and interaction with smooth, physics-based visual effects — tilt, glow, shine, depth, and more.

⚠️ Important: Card Effects is an Extension. It adds settings to the Design tab of compatible Divi Essential modules. 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 Card Effects and toggle it On

Step 3: Open a compatible Divi Essential module in the Divi Builder

Step 4: Go to the Design tab → Card Effects section

Step 5: Choose your effect type and configure settings

Settings Reference

Use Card Effect

Type: Toggle Default: Off Activates the card effect on the module. All other settings appear when this is enabled.

Effect Type

Type: Dropdown Choose the type of interactive effect applied to the card. Available options include:

• Lightning — An electric lightning bolt traces across the card surface on hover
• 3D Tilt — Card tilts in 3D space following cursor movement
• Shine / Glare — A light reflection follows the cursor across the card surface
• Glow — A soft glow emanates from the cursor position on the card
• Lift — Card rises with a shadow on hover, simulating physical elevation
• Magnetic — Card subtly pulls toward the cursor as it approaches

Primary Color

Type: Color Picker + Opacity Default: #5227FF at 100% Sets the main color of the card effect. For the Lightning type, this controls the bolt color. For Glow, it sets the glow color. Adjust opacity for subtler variations.

Speed

Type: Slider Unit: px (controls animation timing) Default: 0.18px Controls the animation speed of the effect. Lower values produce a slower, more deliberate animation. Higher values make the effect faster and more intense.

Intensity

Type: Slider Unit: px Default: 0.1px Controls the strength or vividness of the effect. For Lightning, this affects bolt thickness and brightness. For Glow, it controls spread. For Tilt, it controls the tilt magnitude.

Offset X

Type: Slider Unit: px Default: -0.63px Horizontally offsets the effect origin or direction. Negative values shift the effect to the left; positive values shift it to the right. Useful for fine-tuning the visual anchor of the effect.

Lightning Size

Type: Slider Unit: px Default: 1.82px Appears for: Lightning effect type only Controls the thickness and scale of the lightning bolt that traces across the card surface. Larger values produce a bolder, more dramatic bolt.

Pro Tips

💡 Lightning effect works best on dark cards — the electric bolt color (#5227FF by default) pops against dark or deep-colored card backgrounds. Light cards wash out the bolt visibility.

💡 Fine-tune Offset X for directional feel — a negative Offset X shifts the lightning origin to the left edge, making the bolt feel like it's entering from outside the card. Positive values do the opposite.

💡 Keep Speed low for a slow dramatic trace — a Speed of 0.10–0.20px creates a slow, deliberate lightning trace that feels premium. Higher speeds make it feel more electric and energetic.

💡 Use Primary Color to match your brand — swap the default purple (#5227FF) for your brand's accent color. The Lightning and Glow effects are especially responsive to color changes.

💡 Adjust Lightning Size per card size — larger cards need a bigger Lightning Size (2–4px) to remain visually prominent. Smaller cards look better with finer bolts (1–1.5px).