There are a lot of ways to make the design of your website more stand out. One of which is by applying a particle effect to the hero section of your site homepage (or any area on your website). In Elementor, it’s pretty easy to apply this kind of animation effect. We will show you how in this post.
Elementor itself has no default feature to add particle effect. To achieve it, you can use an add-on. Some Elementor add-ons that you can use to add particle effect are JetTricks, Happy Addons, and Essential Addons. In this post, we will use JetTricks.
How to Add Particle Effect in Elementor Using JetTricks
JetTricks is an Elementor add-on from Crocoblock aimed specifically at adding animation effects to Elementor. It can be a solution if you use Elementor Free yet want to add effects like sticky effect, parallax background, image hotspot, and folded content. JetTricks itself is a paid add-on, but it is available at an affordable price: only $19 per year. You can get it on the official website of Crocoblock.
Here is an example of the particle effect created with JetTricks.
Particle effect can be added to an Elementor section. Assuming you have installed and activated the JetTricks add-on on your website, edit a page with Elementor. New to Elementor? You can read our previous article to learn how to use Elementor. On the Elementor editor, add a new section by clicking the plus button on the canvas area. Once the new section is added, go to the Style tab and set the background on the Background block. You can use either a solid background or a gradient background.
Once done setting the background, go to the Advanced tab and open the JetTricks block and enable the Enable Particles option. Paste the JSON code of your particle effect to the available field.
Where to Get the Particle Effect JSON Code?
On the JetTricks block (under the Advanced tab), you can find a Here link which refers to https://particles.js.org/. You can configure your particle effect and get the code here. However, the code generated from this site didn’t work in our case, so we looked for another alternative and found https://vincentgarreau.com/particles.js/. The code generated from the latter site worked perfectly so you can use it if you experience the same issue as us.
Configuring the Particle
First, you can visit the https://vincentgarreau.com/particles.js/ site. Before you start to make the configuration, you can select the particle effect type from the dropdown menu at the top side.
After selecting a particle style, you can open the particles menu to make the configuration. As you can see, there are several sub-menu items you can open. You can set the number of particles on the number sub-menu, set particle color on the color sub-menu, set the particle shape on the shape sub-menu, set the particle size on the size sub-menu, and so on.
To set the hover effect, you can open the interactivity menu.
Once done making the configuration, you can click the Download current config menu to generate the code. The code will be automatically downloaded to your computer (in a JSON format). You can simply open the downloaded JSON file to get the JSON code.