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.
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’,
YOUR JSON CUSTOMISATION CODE GOES 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 (CakeWP.com) posted in 2016. It captures some recent changes in the process and additional steps. Please comment if you have questions.