Back to contents

How to add particles effect to the section’s background

Continue reading this tutorial to learn about how to decorate the section’s background with particles effect using JetTricks functionality.

Liven up the sections with attractive animated particles effect easily and quickly. JetTricks plugin provides some really eye-catching visual tricks for attracting visitors’ attention and will make your website’s appearance outstanding and memorable.

Adding particles effect to the background of the section

Step 1 – Activate JetTricks plugin and open the page, where you would like to animate the section, in Elementor editor.

Step 2 – Create a new section and set needed adjustments in the Content tab on the appeared panel on the left. Make it high enough choosing Min Height option in the Height field that it will be possible to see the particle pattern, which you are going to create.

Layout editing in the Elementor section

Step 3 – After that, open the Advanced > JetTricks block. Here you need to switch on the Enable Particles option and you will see the box, where the particles JSON code should be pasted.

JetTricks tab in the Advanced Elementor settings

Step 4 – You can generate the certain particles JSON code following the link below. Click it and you will go into a magical place, where you are able to craft your own particles for your website. You can access all the settings on the menu on the left top corner. It is available to define the number, density, shape, color, and size of the particles.

generate the certain particles JSON code

Step 5 – The next thing you need to do is to click the Download current config in .json format and open the file in any text editor.

click the Download current config in .json format

Step 6 – Then, select all the code, copy it and go back to Elementor editor, where you have created an empty section. As you can guess, all you have to do now is to paste this code in a certain box.

you have to do now is to paste this code in a certain box

Step 7 – Let’s update the page and have a look at this extra animation effect on your website.

animation-particles-effect-2

Great! Now you know an easy and quick way to make your website more vivid and engaging using JetTricks functionality.