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 is the co-founder of Divi Pixel. He is a self-made web designer and marketing expert, and he loves his job so much that he barely leaves the office. He transforms creative ideas into effective strategies for his company. Maciej is fascinated by the phenomenon of a megalopolis. He notices patterns and details which make up the whole thing, and he uses these skills in his work.
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