How To Add Particles Background In Elementor Section Using Master Addons

Particles Background in elementor section

Science confirms that Particles are a small localized object which always changes its position. Making a Particles Background in WordPress website is easy then you think. In this article, I’m going to show you each step to create a particles background in your Website using Master Addons plugin.

Here is Elementor Page Background and Elementor Skewed Background source for you. Make sure to check that resource to arrange your page or section’s background in a creative way. 

[ Make Sure You Have Installed Master Addons and Elementor Plugin ]

Particles Background using Master Addons

Select Your Structure: First of all, select your column structure. You are free to use any type of structure.

Particles Background - Select Your Structure

Add Some Content: Adding content is necessary because it makes your section real. I am adding 500px Spacer here.

Particles Background Elementor Section - Adding spacer in a row

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. 

Particles Background using Master Addons -Making 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.

Adding Background Color - Edit section to style

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.

enable particles background in master addons

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 Option

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.

customize particles effect and shape

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.

Download Current Config json file

Particlesjs-config.json file: 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. 

Particles Background - particlesjs-config file edit

Add Particlesjs Code: You will see Add particle Json code area. Just paste your code here and update your page.

Particles Background - Add Particle Json code here

Extra: You can use our Animated Gradient Background instead of using a solid color for the background. Visit MA 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.

Posted in Tutorials