Recently i applied a nice moving particle background effect on my Free Website Templates Landing Page(s). You will see the effect in header and in the bottom email subscribe section.

View Demo

Many people asked me how to do it so here is the quick Step by Step tutorial.

Integrate ParticleJs library to your theme.

You can download this small JS library from here and follow the instructions mentioned there to integrate it properly in your theme. However to make it more easier for non-techie friends i have created a small plugin which will do this all for you by simply installing and activating the plugin.

Download Plugin

Once the plugin is activated you will see a new Backend menu item called “Particle Background” as seen in the screenshot bellow.

partcilejs_background

Clicking on this will take you to this screen, where you can add your code which will explain shortly.

particlejs_background_wordpress_plugin

Now you are fully ready to apply some nice background effects to your website / page. Let’s first find and configure a cool effect from the particleJs Demo here. There are multiple configurations you can play with and generate an effect as per your liking / need. All options there are self explanatory and you need to play with it and generate a code. Some screenshots to help you find the options.

1) Default Screen on Particle JS Demo

particlejs-default

2) Choose a Preset you like

particlejs-presets

3) Play with options

particlejs-settings

4) Download Generated Code

particlejs-download_code

5) Copy & Paste Code

This is json code ( don’t worry if you what it is ), open the downloaded file in any text editor or ide of you have. The code will look like the image bellow. JUst select all from top to bottom and copy it.

particlejs-code-example

Now go to My Plugin setting page which i showed you in the start of this post. Now you need to paste the code in the text area available there, but you must paste this code in between following code.


particlesJS('UNIQUE_ID_HERE',

PASTE YOUR CODE HERE

);

You need to paste the code exactly where i have pointed, and also assign a Unique id where i have mentioned. You can duplicate this whole code to add another unique id and apply it to another div / Section.

Now the last part is to apply the same id to a section / div on your page where this background effect will be applied.

For Divi Users:

You may easily apply an ID to a section from the section setting as seen bellow.

divi_section_id

You may notice that the moving particle are above your content, in that case just give the content column / row a “z-index:5(or more)”

Hope i have explained it well, i am not a content writer so this tutorial may not be very well structured / written, but i hope you get it 🙂

Let me know for any issues / questions in comment here and i will try best to help you out with it.