Add Particles background to Sections in Elementor Page Builder

Now with the recent release of Elementor Addon Elements (V 1.1), you can add animated particles background on sections.
There feature is utilizing Particle js library developed by Vincent Garreau.

This feature is also inspired by another Elementor Addon – Granular Controls for Elementor by Zulfikar Nore (unfortunately not in active development at the moment).

Here are some simple steps to add Particles background to Elementor’s section.
(we are assuming that you have our plugin Elementor Addon Elements installed and active.)

  • Edit section settings and go to Styles tab. Set your desired background there. It can be any, color, image or gradient.
  • Now go to Particles section under the Styles tab.
  • In Particles section, Enable particles by settings the switcher to Yes.
  • Now you will see default Particles moving in your section.

Creating your own particle effect

  • Default particles are available once you enable Particle Background in Section’s settings. You will notice some JSON code in the text area there. You can also generate your own style and use it here.
  • For this go to this URL https://vincentgarreau.com/particles.js/
  • On the right top corner, you will notice a lot of configuration options. Just play with them and create your own style. You will see the live preview in the background.
  • Once you have generated your desired style, click on “Download Current Config” option and the end of that configuration section. This will download a JSON file.
  • Open the JSON file and copy its content and paste in “Particle Json” section mentioned above.

Leave a Reply