, 37 Comments

How To Add Particle Effects to Themify Builder

Particles.js Demo

Particles.js is a free script created by Vincent Garreau that can be used to add fun animated elements to the background of your WordPress Theme and Themify Builder row elements. There are a number of ways to implement this script, such as plugins, child themes or custom functions. However, the following tutorial will show you how to add particles to any Builder row of your existing site with a few simple clicks.

To start, you will need a WordPress site with an active Themify theme using the Themify Builder, and a page created with a Builder row where you want the particles to appear. Check out the demo to see how it turns out!

Step 1: Add The Particle Class to Your Builder Element

  • Open the page you want to customize in a new tab and click Themify Builder > Turn on Builder in your admin bar at the top.
  • Click the Options icon in the row’s toolbar that you want to add the particles to

    themify builder row options
  • Enter particles-js into the Additional CSS Classes field and click Save

    builder-row-addl-css-particles

Step 2: Add Particle Script to Your Theme

  • Go to Themify Ultra > Themify Options from the admin menu
  • Under the General settings tab, copy and paste the following into the Header Code box:
    
<script src="//cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
jQuery(window).load(function(){
if( jQuery('.themify_builder_row.particles-js').length ) {
jQuery('.themify_builder_row.particles-js').prepend('<div id="particles-js"></div>');
particlesJS('particles-js', {
  "particles": {
    "number": {
      "value": 80,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 2,
        "color": "#a16eee"
      },
      "polygon": {
        "nb_sides": 7
      },
      "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.945738208161363,
      "random": false,
      "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": false,
        "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
});
}
});
</script>
<style>
#particles-js {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
</style>
  • Click Save at bottom right. View or reload your page in a new tab and voila!

Optional: Customize Your Particles

  • Go to http://vincentgarreau.com/particles.js/ to view the demo.
  • Explore the customization options in the upper-right by expanding the panels. These options allow you to change aspects of the particles such as color, shape and behavior.
  • When satisfied, click Download current config(json) and save the file to your Desktop.

    particles_step1
  • Open the json file in a default text editor or code editor and copy the contents of the file (Ctrl/Cmd+C)
  • Under Themify Ultra > Themify Options, locate the following line in your Header Code:
    • particlesJS('particles-js');
  • Place your cursor before the last parenthesis and add a comma and space:
    • particlesJS('particles-js', |);
  • With your cursor between the comma and the parenthesis, paste the json code from your file (Ctrl/Cmd+V)

    theme-options-header-code-json-paste
  • You may alternatively set a variable to load the json file from your server. You will need to upload the file to WordPress or your server first, then set the file path.

Below is an example of how your second script snippet would look with this path set:


 jQuery(window).load(function(){
 var json_file = 'http://youriste.com/path-to/particlesjs-config.json';
   if( jQuery('.themify_builder_row.particles-js').length ) {
jQuery('.themify_builder_row.particles-js').prepend('
<div id="particles-js"></div>
');
particlesJS('particles-js', json_file );
   }
 });