Particle Effects is a Divi Essential extension that adds animated particle backgrounds to any Divi section. From snowfall and fireflies to galaxy spirals, network nodes, and matrix rain — 30+ particle types create immersive, atmospheric backgrounds behind your section content with zero code.
Every particle type is fully configurable — count, speed, size, opacity, glow, wind direction, and trigger timing — all from the Divi Builder Design tab.
⚠️ Important: Particle Effects is an Extension, not a module. It adds a Particle Effects 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 Particle Effects and toggle it On
Step 3: Open any Divi Section in the Divi Builder
Step 4: Go to the Design tab → Particle Effects section
Step 5: Toggle Enable Particles on, choose a Particle Type, and configure
Settings Reference
Enable Particles
Type: Toggle Default: Off Activates the particle effect on the section. All other settings appear once this is enabled.
Particle Type
Type: Dropdown Default: Snowfall
Choose from 30+ particle types across several style categories:
Celebratory
| Type | Description |
|---|---|
| Confetti Burst | Colorful confetti pieces falling and tumbling |
| Fireworks | Bursting firework explosions with trails |
| Party Streamers | Flowing ribbon streamers falling through the section |
| Rising Balloons | Balloons floating upward |
| Champagne Pop | Tiny bubbles and sparkles rising upward |
| Glitter Rain | Fine glitter particles raining down |
| Star Celebration | Stars bursting and falling |
| Emoji Party | Emoji characters floating across the section |
Nature
| Type | Description |
|---|---|
| Snowfall | Gentle white snowflakes drifting downward |
| Fireflies | Glowing dots blinking and drifting — great for evening scenes |
| Cherry Blossoms | Pink petals falling softly |
| Rain Storm | Fast diagonal rain streaks |
| Autumn Leaves | Falling and tumbling colored leaves |
| Bubbles | Translucent bubbles rising upward |
Cosmic
| Type | Description |
|---|---|
| Galaxy Spiral | Swirling star cluster in a spiral formation |
| Starfield | Deep space starfield with parallax depth |
| Nebula Cloud | Soft glowing cloud-like particle clusters |
| Comet Trails | Fast-moving particles with trailing light streaks |
| Aurora Waves | Flowing curtain-like wave patterns |
Tech & Abstract
| Type | Description |
|---|---|
| Matrix Rain | Classic falling character/code rain effect |
| Network Nodes | Connected dot network that shifts and relinks |
| DNA Helix | Rotating double helix particle structure |
| Wave Motion | Particles flowing in synchronized wave patterns |
| Magnetic Orbit | Particles orbiting a central magnetic point |
| Geometric Float | Geometric shapes floating and rotating |
| Pulse Rings | Expanding ring pulses radiating outward |
| Vortex | Particles spiraling into a central vortex |
| Rising Sparks | Upward-drifting glowing spark particles |
| Dust Motes | Fine floating dust particles with ambient drift |
Particle Count
Type: Slider Unit: px Default: 40px Controls how many particles are active on screen at once. Higher values = denser particle field. Keep between 30–100 for a balance of visual impact and performance.
⚠️ High particle counts (150+) can affect performance on lower-end devices. Recommended range: 30–80 for most use cases.
Speed
Type: Slider Unit: px Default: 1px Controls how fast particles move. Lower values = slow, drifting motion. Higher values = fast, energetic movement. The ideal speed depends on the particle type — Snowfall looks best slow (0.5–1px), while Matrix Rain works better faster (2–4px).
Size
Type: Slider Unit: px Default: 1px Controls the diameter or scale of each individual particle. Larger sizes make particles more prominent. Smaller sizes create a finer, more delicate effect.
Opacity
Type: Slider Unit: px Default: 0.8px Controls the transparency of particles. At 0.8px particles are nearly opaque. Lower values create a more ghostly, atmospheric feel. Full opacity (1px) makes particles solid and prominent.
Trigger
Type: Dropdown Default: Always
Controls when the particle animation activates:
| Option | Description |
|---|---|
| Always | Particles animate continuously from page load regardless of scroll position |
| In Viewport | Particles only animate when the section is visible in the browser viewport — saves performance on long pages |
| On Hover | Particles appear and animate only when the visitor hovers over the section |
Glow Effect
Type: Toggle Default: Off (shown as On in screenshot) When enabled, each particle emits a soft glow/luminance effect around it. Particularly effective for Fireflies, Starfield, Network Nodes, and cosmic particle types.
Glow Intensity
Type: Slider Unit: px Default: 1px Appears when: Glow Effect is On Controls the strength of the particle glow. Higher values = stronger, more visible glow halo around each particle.
Wind Direction
Type: Slider Unit: px Default: 0px Adds a horizontal drift force to particle movement. Positive values push particles to the right; negative values push them to the left. At 0px particles move in their natural direction without wind influence. Works especially well with Snowfall, Cherry Blossoms, and Rain Storm.
Pro Tips
💡 Dark backgrounds make particles pop Most particle types are designed for dark or richly colored section backgrounds. Light backgrounds wash out subtle particles like Snowfall, Dust Motes, and Fireflies almost completely. Use dark navy, charcoal, or deep brand colors.
💡 Enable Glow Effect for cosmic and tech types Glow makes a noticeable difference for Fireflies, Starfield, Network Nodes, Aurora Waves, and Pulse Rings — the particles feel illuminated rather than flat. Keep Glow Intensity at 0.8–1.5px for a natural feel.
💡 Use Wind Direction with weather particles Adding a slight Wind Direction (3–8px) to Snowfall or Cherry Blossoms creates a more natural, believable drift rather than perfectly vertical falling. Negative values for a right-to-left wind feel.
💡 Set Trigger to In Viewport for long pages If particles are used mid-page, set Trigger to "In Viewport" so they only animate when visible. This reduces unnecessary GPU load and improves scroll performance on pages with multiple particle sections.
💡 Network Nodes is the most versatile tech type Network Nodes works on dark and semi-dark backgrounds, has a clean professional look, and pairs well with SaaS, fintech, and technology brand aesthetics. Keep count at 40–60 and speed at 0.5–1px.
💡 Combine Snowfall with a seasonal CTA section Snowfall + a dark section background + white text creates an instant festive/winter feel. Use for holiday promotions, seasonal landing pages, or event announcements.
FAQ
Q: Does Particle Effects work on Rows and Modules, or only Sections?
A: The Particle Effects panel appears in the Section Design tab, so it applies at the section level.
Q: Will particles slow down my page?
A: Particle effects are GPU-accelerated but high particle counts across multiple sections can affect performance. Keep counts between 30–80 and use the "In Viewport" trigger on non-hero sections to minimize impact.
Q: Do particles appear in front of or behind section content?
A: Particles render behind section content by default — text, images, and modules remain fully visible and readable above the particle layer.
Q: Do particles animate on mobile devices?
A: Yes, particles are visible on mobile. However, for performance on lower-powered devices, consider reducing Particle Count when mobile visitors are a significant part of your audience.
Q: Can I use multiple different particle effects on different sections of the same page?
A: No. The spotlight is a pure CSS/JS visual overlay. It has no effect on page content, text, or search engine indexingA: Yes — each section has its own independent Particle Effects settings. Different sections can use entirely different particle types, colors, speeds, and triggers.
Q: What does the "px" unit mean on Particle Count, Speed, and Opacity?
A: The "px" label is a display convention in the Divi builder slider. For Particle Count and Speed it represents a numerical intensity value, and for Opacity it represents a 0–1 scale value (0.8px = 80% opacity).