Call us now (08) 8354 2417
How to create a unique Moving Particles background effect in Divi

How to create a unique Moving Particles background effect in Divi

How to create a unique Moving Particles background effect in Divi

I like the moving particles effect because it takes something simple and gives it life. The simple thing is the moving particles. They follow perfectly straight paths, never deviating or colliding. The life is the connections, they perform a dance which give the particles a 3D quality; twisting and tumbling.

What makes the motion come to life is the simple rule for the connections. The connections are programmed to only remain bridged to other particles within a set distance. This creates the evolving mesh of triangles.

Below is a step-by-step guide for how to include an animated particles background to your Divi website. This method also explains how to quickly configure the setting to customise the look. Thanks to Vincent Garreau for the interface.


Resource 1.  WP Particles Plugin download
Resource 2. Moving particles custom configuration .json file
Resource 3. Particles.js source code deposit at Github

These resources are all thankfully shared on GitHub.

Step #1 – Download and install the WP plugin

If you just want the code, go to Resource 3. Otherwise, to do this the easy way, read on…

From Resource 1 download the WP ParticlesJs Plugin. Inside you will find the plugin file: particlesjs.php and also the support library particles.js. These two files must be uploaded to the websites.

a) Upload particles.php to the directory /wp-content/plugins/
b) create a new folder in same directory called ‘includes’.
c) Upload particles.js to the directory /wp-content/plugins/includes/

Step #2 – Activate the Plugin

Once the files in Step #1 are uploaded, log in to your WordPress dashboard and activate the plugin from the standard WP plugin menu.

With the plugin activated, it will now appear in the WP menu. If you click on it, you will find it asks for your Json Code. This is the configuration file that allows you to customise the animation. We will get this code easily in the next step.

Step #3 – Create the JSON customisation file

Resource 2 directs you to the particle.js configuration webpage. This page allows you to customise the animated effects before saving the resulting Json file for the plugin.

When you have finished customising the pre-set effects, click on the “Download current config (json)” button circled in red and download the file.

Step #4 – Copy the JSON code into the Particle Plugin

Open the Json file downloaded from Step #3 with a text editor like Text Wrangler. Copy and paste the code into the field in the Particle Background Plugin from Step #2

The code is incomplete and needs to be pasted between the following code line, as per below, adding one line both above and below the downloaded code.

add line of code above –>

your custom config file –>

add line of code below –>


particlesJS (‘your_CSS_ ID_here’,



The above code all goes into the Particles Background Plugin from Step #2.

Step #5 – Set the Divi section to animate

The last step is to chose the row in Divi that you wish to apply the effect to.  To ‘call’ the effect, simply provide the custom CSS ID that you defined above in the Divi Advanced tab, as highlighted below. Save the changes and reload your page. The animated effect should now be working.

This is an update of a post originally found here ( posted in 2016. It captures some recent changes in the process and additional steps. Please comment if you have questions.