I’ve just posted a new tutorial on How to add Interactive Particles Background using a new and interesting tool. checkout the latest tutorial as that is fresh and better.
Recently I applied a nice moving particle background effect on my Free Website Templates Landing Page(s). You will see the effect in the header and in the bottom email subscribe section.
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.
Once the plugin is activated you will see a new Backend menu item called “Particle Background” as seen in the screenshot bellow.
Clicking on this will take you to this screen, where you can add your code which will explain shortly.
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
2) Choose a Preset you like
3) Play with options
4) Download Generated 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.
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.
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.
For Elementor Users:
You may easily apply an ID to a section from the section’s Advance setting as seen bellow.
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.