Call us (08) 8358 2552 info@eighty8design.com.au

by | Jul 13, 2017

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.

Resources

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.

Simply;
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.

13 Comments

  1. Josh

    Great article.

    Reply
  2. Evgeniy

    Very useful! Thanks!

    Reply
  3. Frans Kemper

    Hello,

    I am not sure where I went wrong, but I am getting it to work.

    Could you please have a look?
    Thank you soo much,
    Frans Kemper

    Reply
    • Arien

      thanks, appreciate the thought

      Reply
  4. borvest inkral

    I am delighted that I observed this web blog, just the right information that I was searching for! .

    Reply
  5. Tim

    Had trouble with this not working. Then noticed that the single quotes you have in step 4 are not quite right:
    particlesJS (‘your_CSS_ ID_here’,

    should be:
    particlesJS (‘your_CSS_ ID_here’,

    Reply
    • Tim

      Now it seems that your blog won’t display the correct apostrophe – even my correction comes out wrong on your blog.

      Reply
      • Arien

        Sorry Tim, I can’t follow your meaning here – perhaps email me if you think there is still a problem I can fix – cheers

        Reply
        • Dan

          Ah! That was where I went wrong too.

          What Tim is saying is, in Step 4 where you reveal the code:
          particlesJS (‘your_CSS_ ID_here’,

          Your site is replacing the correct apostrophe with an unusable version. The code fails if we directly copy and paste the code you’ve provided, but works fine if typed manually.

          Hope that helps 🙂

          Reply
          • Arien

            Thanks Dan and Tim, this makes sense now ill try to fix it

  6. Ben

    Thanks for this really useful. How do I enter the CSS code if I am not running Divi but Twenty Seventeen template?

    Reply

Submit a Comment

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

How to create a unique Moving Particles background effect in Divi was last modified: August 2nd, 2017 by Eighty8Design