Huge Black Friday Deal! 50% Discount on all Plans. Coupon Code: BLACKFRIDAY50 Grab the Deal

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. 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.

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. 

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.

Select section for Particles Background

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. 

adding spacer in a empty section

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. 

make section full width for particles bg

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.

background color selection

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 particle background

 

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 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.

Particels background for Elementor

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

Person behind Master Addons. He's WordCamp Speaker, Elite Author in Themeforest, Volunteer Theme Reviewer of WordPress.org, Co-Founder of Jewel Theme.

Get Elementor Pro

convinced enough to purchase

Download Now and Speed up your design skill

Still confused? Try 14 days Free Tiral before Purchase. Don't hesitate, we offer hassle free 30-day money-back guarantee.

Subscribe to our Newsletter

Share via
Share this