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.

Elementor particle background Effect

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.

elementor particle background Effect

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

Particles background in Elementor Section

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 Your Structure

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. 

Elementor Section strucutre

Add any element before using Particles JSON file

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. 

adding spacer in a empty section

Making the section Full Width (It's up to you)

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. 

make section full width for particles bg

Adding a Background Color to the Section

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.

Background Color for Particles

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

elementor particle background

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.

Where To Customize particles for Elementor

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 elementor particles effect

Elementor particles Customization

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. 

customize particles effect and shape

Particles JSON For Elementor Download

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 Particles JSON for Elementor

Open Particlesjs-config.json file via any text Editor

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. 

Particles Background - particlesjs-config file edit

Add Particles JSON code in Elementor

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.

Particles Background - particlesjs-config file edit

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.

Your Elementor Projects Deserve the Best

Get Master Addons Now

© 2021 - Master Addons| All rights reserved

Master Addons Demos

Heading

Animated Headlines
Dual Heading
Gradient Headline

Image

Image Hover Effects
Image Hotspot
Filterable Image Gallery
Image Comparison
Gallery Slider
Advanced Image

Content

Advanced Accordion
Tabs
Toggle Content
Team Member
Team Slider
Infobox
Flipbox
Blog
Timeline
Business Hours
Pricing Table
Restrict Content
Dynamic Table

Special Elements

Call to Action
Tooltip
Progress Bar
Progress Bars
Creative Button
Creative Links
News Ticker
Table of Contents
Current Time
Domain Search
Nav Menu
Search
Blockquote
Counter Up
Countdown Timer

Extensions

Particles
Animated Gradient BG
Reading Progress Bar
Background Slider
Custom CSS
Custom JS
Positioning
Container Extras
Mega Menu
Entrance Animation
Transforms
Rellax
Reveal
Header,Footer,Comment
Display Conditions
Dynamic Tags
Floating Effects
Custom Breakpoints
Post/Page Duplicator
Wrapper Link

Contact Form

Contact Form 7
Ninja Form
WP Forms
Gravity Forms
Caldera Forms
weForms