How to Add Particles to your Divi Section with Particleground
Find out how to add snazzy backgrounds to your website!
Here is a quick demo of what the effect looks like.
step 1: Right-click this Download Code link and save the HTML file to your computer to access the code.
Be sure to open this in a code editor like Atom. I’ve also included a Divi Layout file if you want to Import that instead through the Divi Builder.
step 2: Download Particleground
Open up the demo in Atom.
step 3: Change settings
Easily change the colors to whatever you’d prefer. Change color of the lines and dots. You can also change the direction chooser from either “right, center, or left”. Make sure to add a comma when adding a direction.
step 4: Change Density and Particle Radius
10000 is default. Keep it between 5000-15000. Add in Particule Radius. Default is 100 but wouldn’t recommend going over 350.
step 5: Colors and some items need to be in a single quote
For example, colors and items like “center, left, right” need to be in single quotes. “True, False” and numbers do NOT need to be in a single quote.
Apply Inside a Divi Page:
For the section you have it in, make sure to put the id to: CSS ID : particleground
step 6: Grab the jquery particle ground js, located in your file folder
Grab Demo code and add it it to module settings. You’ll notice header text is now on the bottom but CSS will fix that. You can put this in theme options or in the module settings