Blog

20 Nov 2016

How To Add Particle Effects to Themify Builder

Tutorials / 43 Comments

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
  
  
• Enter particles-js into the Additional CSS Classes field and click Save
  
  

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 Footer Code box:
  

  
  <script src="//cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
  <script>
  let particles_config = {
    "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
  }
  
  window.addEventListener( 'load', function() {
  	document.querySelectorAll( '.themify_builder_row.particles-js' ).forEach( function( el, i ) {
  		const container = document.createElement( 'div' );
  		container.id = 'tf_particles_' + i;
  		container.className = 'tf_abs tf_w tf_h';
  		el.prepend( container );
  
  		particlesJS( 'tf_particles_' + i, particles_config );
  	} );
  } );
  </script>
  

• 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.
  
  
• 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 Footer Code:
let particles_config = {
• Now remove everything from the { character until before this line:
window.addEventListener( 'load', function() {
• By now it should look like this:
• Now right after the =, paste the json code from your file (Ctrl/Cmd+V)