Welcome (I’m new myself, too).
First and foremost, I highly recommend setting up a Child Theme for your Divi installation; that way any modifications you make won’t be overwritten when Elegant Themes do an update.
That said, the best way at this is to use WordPress’ native en queuing system. In your functions.php
file, add the following:
function enqueue_particles() {
wp_register_style('particles-styles', get_stylesheet_directory_uri() .'/particle.css', array());
wp_enqueue_style('particles-styles');
wp_enqueue_script('particles-cdn', '//cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js');
wp_enqueue_script('particles-js', get_stylesheet_directory_uri() .'/particle.js', array('particles-cdn'));
}
add_action('wp_enqueue_scripts', 'enqueue_particles');
…then create 2 new files in your theme directory:
particle.css
canvas {
display: block;
}
#particles-js {
width: 100%;
height: 100vh;
background: -webkit-linear-gradient(top, #000000 1%, #0c0c24 100%);
position: fixed;
top: 0;
left: 0;
z-index: -50;
}
…and particle.js
jQuery(document).ready(
function() {
particlesJS("particles-js", {
"particles": {
"number": {
"value": 160,
"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": 1,
"random": true,
"anim": {
"enable": true,
"speed": 1,
"opacity_min": 0,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": false,
"speed": 4,
"size_min": 0.3,
"sync": false
}
},
"line_linked": {
"enable": false,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 1,
"direction": "none",
"random": true,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 600
}
}
},
"interactivity": {
"detect_on": "window",
"events": {
"onhover": {
"enable": false,
"mode": "grab"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 250,
"size": 0,
"duration": 2,
"opacity": 0,
"speed": 3
},
"repulse": {
"distance": 400,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
});
}
);
Good luck!