How to integrate the Javascript library "Particles.js" in Divi? Have you ever seen this type of interactive background in Divi or on any other type of site? Constellations that magnetize when you move your mouse, stars or even snow falling? This type of interactive background is possible thanks to the Javascript library of Vincent Garreau Particles.js.

There's nothing more hypnotizing than that kind of background, is there?

Advertisement: This article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.

 

In this article, I will explain how to add an interactive background with Particles.js. You will see that in a few minutes, and without much knowledge (without coding), you can get this wonderful effect and use it on your Divi sites.

Here is the procedure:

  1. Install the plugin that will allow you to use the Particles.js library
  2. Define the type of particles you want to display
  3. Add the interactive background in a Divi section
  4. What are the other possibilities?

 

Update of June 23, 2019: after many readers contacting me or leaving a comment about errors encountered, I confirm that Particles.js is well compatible with the latest version of Divi or WordPress. After your many comments, I have just done an audit with the version 3.25.2 of Divi and version 5.2.2 of WordPress. Everything is working well. If you encounter errors, check each step and make sure there is no code error: a simple misplaced space or comma could turn into a failure. I also advise you to do your tests on a Dev site and not on a production site.

 

1. Install the plugin that will allow you to use the Particles.js library in Divi

Even if this plugin is not essential, it will make your life easier and prevent you from getting your hands on your Divi child theme. Even if in many cases, it is interesting not to add too many plugins, this one is really light and will make your life easier, so why not do without it?

So, to add an interactive background in Divi, the first step will be to download, install and activate the extension named ParticleJS-WP-Plugin. If you would like to know more, here is the link to the Github directory.

This means that it is not an extension that is available directly from the official WordPress plugin directory (via the menu Extensions > Install) but from Github, a repository dedicated to developers and in which you can have confidence.

Once you have installed and activated this extension, a new tab appears: "Particle Background"

Arrière-plan interactif / particle-background

So far, nothing good folichon... It's what follows that will be interesting...

Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE"

 

2. Define the type of particles you want to display on your site

The second important step will be to set the type of particles you want to appear as an interactive background. To do this, I would like to meet you at the official website of Particles.js.

Particles.js

This screen will allow you to create your particles and you will be able to define:

  • the particle style: circles, polygons, stars, images etc....
  • speed and number,
  • the binding of particles,
  • the direction of movement,
  • interactivity with the Internet user,
  • the color of the particles / the background color,
  • etc....

Once you have set the ideal particles using the control panel (top right), all you need to do is download the generated code. To do this, click on "Download current config (json)"the last item at the bottom of the particle control panel.

Export current config

 

3. Add the interactive background in a Divi section

Now you have the two essential elements to create your beautiful interactive background in Divi:

  • the Particle Background plugin
  • as well as the code of your particles.

All you have to do is put it all together and integrate it into Divi. Here's what you'll have to do:

 

3.1 - Add the appropriate code in the Particle Background plugin

Go to the Particle Background tab and add this code:

particlesJS('my-particles',
AJOUTEZ VOTRE CODE ICI
);

In this example, the unique identifier (ID) is "my-particles". This can be changed by an identifier of your choice. However, please note that an identifier (HTML ID) can only be used once in a page. This is important information that you should keep in mind.

The line where is noted "ADD YOUR CODE HERE" is the place where you must paste the code obtained after configuring your particles. The one you got in step 2 of this tutorial.

So the code to paste in the field provided in the Particle Background tab should look like this:

particlesJS('my-particles',
{
"particles": {
"number": {
"value": 109,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 3.9458004845442964,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
}
);

 

Since each ID must be unique, if you want to use various interactive backgrounds, you will need to change the ID each time you repeat the code.

If you watched my video at the beginning of the article, you may have noticed that I added 3 backgrounds in a row. This was possible because for each background, I used different IDs such as "my-particles", "my-particles-2" or "my-particles3".

 

Update of June 23, 2019: here is the example of the code I used to integrate 3 different Background Particles within the same page. The 3 code pieces were pasted together in a row with 1 double line break to separate them =>

particlesJS('my-particles',
{
  "particles": {
    "number": {
      "value": 109,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 3.9458004845442964,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 150,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 6,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "repulse"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 400,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8,
        "speed": 3
      },
      "repulse": {
        "distance": 200,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
}
);

particlesJS('my-particles-2',
{
  "particles": {
    "number": {
      "value": 213,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "star",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 7.891600969088593,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": false,
      "distance": 150,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 6,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "repulse"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 400,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8,
        "speed": 3
      },
      "repulse": {
        "distance": 200,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
}
);

particlesJS('my-particles-3',
{
  "particles": {
    "number": {
      "value": 128,
      "density": {
        "enable": true,
        "value_area": 2209.648271344806
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "image",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "https://astucesdivi.com/wp-content/uploads/2017/12/icon-new.png",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 27.620603391810075,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": false,
      "distance": 150,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 6,
      "direction": "bottom-right",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "repulse"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 400,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8,
        "speed": 3
      },
      "repulse": {
        "distance": 200,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
}
);

 

3.2 - Integrating your particles into a Divi section

Now, everything is ready to insert your particles into a Divi section. Depending on whether you prefer to use the Divi Builder or Visual Builderhere is the method:

 

Method with the Divi Builder (in the back office):

When you build your layout (layout)you add sections, lines and modules.

The idea is that these particles cover the bottom of a section (standard section, full width section or even special section).

1 - You will therefore have to add (or edit if already present) a section :

éditer une section

 

2 - Add a colored background of your choice (especially if your particles are white) via the tab Content > Background :

fond particules

 

3 - Insert the ID (unique identifier) you used in the code of the Particle Background plugin (code seen above, example "my-particle"). This ID is inserted in the tab Advanced > ID and CSS classes :

ID particules

 

Want to take it to the next level? Get the Divi theme now!

 

4 - Save your changes, update your page and admire your starry sky! Note that you may need to add some internal margin to enlarge the section.

 

Method with the Visual Builder (front-office):

If you prefer to use the Visual Builder, it will be the same procedure.

IMPORTANT : note you will not see your particles appear live when using the Front End Builder. You will need to save and exit the visual builder to see your intercative background appear.

fond via le visual builder

Add a colored background so that we can see your interactive particles

 

ID via le visual

Add the ID via the Advanced tab > ID and CSS classes

 

4. What are the other possibilities?

Finally, I wanted to inform you that there are other ways to insert particles as an interactive background.

You could simply download the Javascript library and add it to your child theme. This would require the integration of this one manually.

Otherwise, there is a free plugin on the official directory. These are as follows Particle Backgroung WP. It is very easy to use. The only concern is that you will not be able to customize your particles, only the background color. A shortcode will allow you to add it easily but it is not ideal to integrate it into a Divi section....

Before you leave: do you like unusual designs? Discover how to insert a background that changes color in Divi.

Need more resources on Divi? Visit ElegantTheme's blog full of ideas and tutorials!

 

Comment intégrer la librairie Particles.js dans Divi

Pin It on Pinterest

Shares
Share This