Hey everyone! Today I'm going to walk you through adding a particle background like the one on my home page to a div in Oxygen Builder with one of my favorite open-source JavaScript libraries, particles.js.

1. Create your particle config

First lets head to particles.js to create our config. Vincent Garraeu lets you configure just about everything super easily through a visual editor on the website. Adjust the speed, the number of particles, lines, etc, and when you're happy with what you have, go ahead and click "Download current config". This will give you a JSON file that we'll use in a few minutes.

2. Import particles.js

There are a few ways to do this. The most correct way is to enqueue it with WordPress' wp_enqueue_script function; however, Oxygen makes enqueueing a little weird because we no longer have access to the theme files where we'd normally do that. If you want to enqueue the script you can create a custom plugin to do so, and I highly recommend doing that method. You can follow my guide here to learn how to do that! Alternatively, if you're not up for that at the moment you can just use a typical HTML script tag in the footer.

Create a code block in oxygen at the bottom of your footer, then add the following to the HTML:

<!-- Import particles.js -->
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>

3. Add an ID to the div

Next, we just need to add an ID to the div we want to contain the particles inside, or you can just make note of the ID automatically given to it by Oxygen.

Note: The position of this div needs to be set to relative.

4. Call the particlesJS() function

Now it's time to finally start seeing some visual progress. There are two ways we can proceed from here. The first option is to upload your particles.json config file to your server somewhere, then feed the file path into the particlesJS() function:

//Wait until the document is loaded
document.addEventListener("DOMContentLoaded", function(){
    /* particlesJS(@dom-id, @path-json)); */
    particlesJS('InsertYourDivIdHere', 'yourpath/particles.json');
});

If you don't want to deal with that you can actually just paste the contents of your particles.json file inside some curly braces where the file path would normally go like so:

//Wait until the document is loaded
document.addEventListener("DOMContentLoaded", function(){
  /*particlesJS.load(@dom-id, @path-json);*/
  particlesJS('InsertYourDivIdHere', {
      //Paste the entire contents of your particles.json here
  });
});

You should be able to see some particles now! (note: they may not be visible in the Oxygen backend, so be sure to view the frontend) Depending on how your page is setup, there's a good chance that the particles canvas is being displayed below the div you wanted it to be in, so I'll show you what I did to fix that next.

5. CSS Fixes

If you have a custom stylesheet started, go ahead and open that and insert the following CSS. If not, create a new one and do the same:

.particles-js-canvas-el{
    position: absolute;
    top: 0;
    z-index: -1; //You will likely need to play around with this
}

On my site, there is nothing behind the div that I attached my particles to, and I set my background color via that div. If yours is any different you may need to adjust the z-index of the particles canvas among other things to get everything layered properly. It's important to make sure your text and buttons have a higher index than your particles canvas or else users won't be able to interact with them.

That's it! I hope this helped you add a cool effect to your sites!