Add Particles to your Divi Section with Particleground | BeSuperfly

How to Add Particles to your Divi Section with Particleground

by

Find out how to add snazzy backgrounds to your website!

This tutorial will help you learn how to add Particles to your Divi Section backgrounds featuring the Javascript Plugin Particleground.

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

step 7: Add in background image, video, or gradient to section settings!

final step: Review the documentation for options

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *