Add Particles Background to your Divi Site

by May 25, 2022Announcements

Today we have another surprise for you. We have just published a new plugin version, where we have added new options that you can use on your Divi page right away 🀩

In the previous release, we added the brand new Expanding CTA module, which you can learn more about here. In this release, we are adding a completely new feature that will allow you to add particles backgrounds to your Divi website.

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

With the new Divi Pixel version, you can easily add particle backgrounds to your Divi site, using the new Divi Pixel settings. This new amazing particle effect is using 3rd party JS library particles.js which allows full control over particle shape, size, color, particle spacing, animation direction and more. Thanks to the advanced options, we can also make the particles respond to the movement of the mouse. Below are a few stunning examples of particle backgrounds.

How to add particle effect using the Divi Pixel plugin

Adding the particle effect with Divi Pixel is quite simple. We just need to enable that effect in the plugin settings, add a custom ID Class to the section, row or module, and finally, customize that effect using the Theme Customizer settings. Since Class ID can be used only once on a page, we are limited to adding only 2 effects, so we can add a maximum of 2 elements on 1 page with the particles effect.
Enable Particles Background in Divi Pixel plugin settings
  1. Go to Divi β†’ Divi Pixel
  2. In General tab, enable the Particles Background toggle
  3. Click the Save Changes button
Add Class ID to section/row or module
  1. Open the page where you want to add Particles 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 field
Customize Particles Background Effect
  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
Now you can customize the particles effect using the Divi Pixel Customizer Settings. You can change particles’ amount, size, animation speed and direction, change particles’ shape and more. Once you are done, don’t forget to save Theme Customizer settings.
Particles 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
That’s all for today. We hope you will like this new Divi Pixel feature. We’d love to hear your voice. Share your opinion in the comments below πŸ™‚ If you would like to connect with other users that are using the Divi Pixel plugin, join the Divi Pixel Community today! You are more than welcome!
Maciej Ekstedt

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.