Home » Tutorials » How To Add Particles Background In Elementor Section Using Master Addons
Elementor Particle Background makes a section live with its outstanding moving effect. There are several types of Particles style available, just select the proper one for your elementor background. Science confirms that Particles are a small localized object which always changes its position. Adding a particle’s background in the Elementor section is easy than you think. You can set animated gradient background as a section bg too.
In this article, I’m going to show you each step to create a particle background in your Website using Master Addons plugin.
No one likes to stick with any default feature. We all love customization ability. Here you will get default, NASA (space), Bubble, Snow effects for particles. You can control the particles number, speed, shape, size etc. Master Addons configured with particles.js, which will assist you to customize your layout.
Besides Elementor particles you can check Elementor Page Background and Elementor Skewed Background to design your elementor section background in a creative way.
Note: Make Sure You Have Installed Master Addons and Elementor Plugin
First thing first, I am going to explain how to configure your section’s background before enabling Particles into it. Then we’ll discuss on enabling particle effect in elementor background.
Select the best column structure that suits your section. You are free to use any available type section structure. I’m going to select the one column structure for this post.
Adding content is necessary because it makes your section visible. An empty section’s preview is always empty. That’s why it’s important to place anything inside your section. Maybe a single title or spacer like me.
For example, I am adding 500px Spacer here.
It’s not necessary to make a full width row always. You are free to select box or full width as required. I prefer to go with Full Width for now only. Full width section view with particles feels awesome.
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 will unable to see the particles effect.
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.
I like to see you on the following steps because it will be more amazing and you will learn how to customize and control particles.
If you’ve followed the upper steps properly then I hope you just created your first Particles background for Elementor Section. If you have faced problem, then don’t hesitate to contact us.
Let’s dive into a little advanced step now. Don’t worry you don’t need any coding. Just follow each steps properly.
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.
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. As you can see the full options panel here, I’ve nothing to discuss about it. Using the range selector for each option, you can customize your own particles.
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. Don’t edit or customize the code if you don’t have proper knowledge on it. Just Copy the code and now visit your “Particles Background” option in your elementor page editor.
Finally, You will see Add particle Json code area. Just paste your code here and update your page. It’s the time to check your page preview and that’s all about Adding Custom Particles JSON code in elementor Section background.
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.
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.