Add Particles Background to your Divi Site
The particle effect allows particles to be added to the background that may react to the movement of the mouse. The molecules may or may not be linked depending on the style chosen. It is a web design technique that is quite common. By conquering the web, particle animations a few years ago managed to carve out quite a niche for themselves. The huge current obsession with designs that have a modern character and geometric decor makes them one of the most sought-after solutions today. The particle effect can be used to create many kinds of scenes, for example, a snowy spread of white dots, a galaxy, raindrops, etc.
Introducing Particle Background for Divi
How to add particle effect using the Divi Pixel plugin
- Go to Divi → Divi Pixel
- In General tab, enable the Particles Background toggle
- Click the Save Changes button
- Open the page where you want to add Particles Background effect
- Open Section/Row or Module settings
- Go to Advanced → CSS ID & Classes toggle and add dipi-particles-1 to the CSS ID field
- Open the page where dipi-particles-1 CSS ID is added on front-end and in the WP Dashboard toolbar go to Theme Customizer.
- Navigate to General → Particles Background
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
Maciej Ekstedt
Maciej, co-founder of Divi Pixel, is a passionate web designer and marketing expert who thrives on turning creative ideas into effective strategies. His fascination with the intricacies of megalopolises influences his work, where he meticulously crafts detailed solutions for his company.
Enhance your Divi Theme with Custom Settings and New Modules. Start Creating Awesome Websites with the Divi Pixel
We offer a 14 Day Money Back Guarantee, so joining is Risk-Free!
hello how can I make the particle background do autoplay? I added the background but its only moving while scrolling. could you help please?
Hello Johan, that’s interesting. Maybe you enabled the Parallax effect in section settings? If you can’t solve it, please submit a support ticket.
That’s so cool. is it possible to add it in multiple back grounds since we have to put it only in CSS ID ? Why not CSS Class for different backgrounds, please ?
Many thanks