Particle Background

With Divi PIxel, you can add a particle background to your website with ease. The particle background is a dynamic and visually engaging design element where tiny particles (dots, lines, or shapes) move, interact, or respond to user actions. These backgrounds create an immersive experience on websites.

The Particle Background effect can be enabled in the Divi Pixel settings (Divi → Divi Pixel → General → Enable Particles Background Effect)

1. In your WordPress Dasjboard navigate to Divi → Divi Pixel
2. In the General tab, turn on the Enable Particles Background toggle
3. Click Save Changes button

Add CSS ID to section, row or module

The CSS ID is a unique identifier that can be assigned to a single element on a webpage. The Divi Pixel Particle Background feature allows for the use of two CSS IDs, enabling you to apply this effect to a maximum of two elements per page. Since this effect can be resource-intensive and may impact CPU performance, we recommend using it sparingly and strategically for optimal results.

1. Open the page where you want to add Particle Background effect
2. Open Section/Row or Module settings
3. Go to Advanced → CSS ID & Classes toggle and add dipi-particles-1 to the CSS ID filed

Note: To add this effect to another section, use the dipi-particles-2 CSS ID.

Particle Background Customization

The Particle Background effect can be customized in the Divi Theme Customizer. You have full control over particle shape, size, color, particle spacing, animation direction and more.

1. Open the page where dipi-particles-1 CSS ID is added on front-end and in the WP Dashboard toolbar go to Theme Customizer
2. Navigate to General → Particles Background tab

You can now personalize the particle effect effortlessly using the Divi Pixel Customizer settings. Adjust the particle quantity, size, animation speed, direction, shape, and more to perfectly match your design vision. Once you’ve made your changes, remember to save your Theme Customizer settings to apply them.

Particle Background Settings

Particles Color – particles element color
Link Color – particles link color
Particles Shape – select 1 of 5 available shapes (circle, square, triangle, polygon, star)
Move Direction – select particles animation direction (None = random)
Particles Interactivity – select 1 of 3 options to make the particles interactive (Grab, Bubble, Repulse)
Particles Count – define a number of particles
Particles Size – define the size of particles
Particles Speed – define particles’ animation speed
Link Width – define particle line width
Link Distance – define link distance to connect with particles