Science confirms that Particles are a small localized object which always changes its position. Adding a particles background in Elementor section is easy then you think. In this article, I’m going to show you each step to create a particle background in your Website using Master Addons plugin.
Note: Make Sure You Have Installed Master Addons and Elementor Plugin
Particles background in Elementor Section
First I will explain how to configure your section background for particle and enable particles then will talk about particles customization.
Select Your Structure
First of all, select your column structure. You are free to use any type of structure. That means you have to create a section first.
Add Some Content
Adding content is necessary because it makes your section real. I am adding 500px Spacer here. If you don’t add any content then the background will not be visible. That’s why it’s important to place anything inside your section. Maybe a single title or spacer like me.
Making Full Width Row
It’s not necessary to make a full width row always. You are free to select box or full width as required. For better view, I’m selecting full-width row.
Edit Section > Style
Click on the edit section option. Then navigate to the Style tab. Here you will see particles option. Before placing Particles you need to add a solid Background Color or Gradient. By default the color of particles is white. If you keep your Background color white then you unable to see the particles effect.
Enable Particle Background
It’s time to navigate the Particles option and enable it. After enabling it you will see the default particles effect. If you like to use the default effect then just hit the update button. But if you like to customize it then please follow the next steps.
Where to customize Particles
Underneath enable particles background you can see a message “click here to generate JSON for the below field”. Hit a click on “Click Here” text link. You can see something like the following screenshot. Click on the “Default” option and you can see another 4 unique particles effect.
Customize Particles Effect
You can see Particles, Interactivity, Page Background (CSS) option. Just focus on the Particles option and skip Interactivity and Page background option.
From the Particles Option, you can change number, color, shape, size, opacity. Also, you can control line linked, movement.
Download Current Config (JSON)
If you are satisfied with your customization then just download the current configuration. You will see the “Download Current Config (JSON)” button at the bottom of the controls. Click on it and you will see a JSON file named Particlesjs-config.json downloaded within a second.
Now open the downloaded file with your desired code editor or the default text editor. Copy the code and now visit your “Particles Background” option in your elementor page editor.
Add Particlesjs Code
You will see Add particle Json code area. Just paste your code here and update your page.
Extra: You can use our Animated Gradient Background instead of using a solid color for the background. Visit Particles Background Demo page to check how Particles look with Gradient Background. I have added a live demo of Gradient+Particles here. Don’t forget to check the Main Particles demo page for more variation.
This is how to add Particles in your WordPress website using Elementor Page builder and Master Addons. Let me know if you face any problem. You can use the live chat option to get your solution or support.