The “Particles Background Widget” allows you to add animated particle effects to sections for free in WordPress Elementor websites. This widget enhances visual appeal by creating interactive, moving backgrounds that respond to user actions or scroll behavior. You can customize particle shapes, colors, motion types, and density to seamlessly match your site’s design.
Let’s explore the features of the “Particles Background Widget” below.
Install Particles Background Widget for Elementor
Add a Particles Background for Elementor
Navigate to Unlimited Elements >> Background Widgets >> Particles Backgrounds
Hover over the widget and click install.
Add the Particles Background Widget to a Section
Edit Section >> Styles >> Unlimited Background >> Particles Background
Elementor Particles Background Settings
Particle Type
- Circle
- Star
- Polygon
- Image
Particle Size
Set the particle size in pixels.
Number of Particles
Set the amount of particles to show on the canvas.
Particle Move Direction
- None
- Top
- Top Right
- Right
- Bottom Right
- Bottom
- Bottom Left
- Left
- Top Left
Randomize Particle Size
Set different random sizes for the particles.
Particles Size Pulse
Add a subtle pulse effect to the particles.
Particle Speed
Set the speed the particles animate.
Multi Color
Set more than one color for the particles.
Particle Color
Set the color for the particles.
Particle Opacity
Set the opacity for the particles.
Randomize Opacity
Add a random opacity to each particle.
Animated Opacity
Animate the opacity of each particle.
Connected Lines
Connect the particles with lines.
Line Width
Set the line width in pixels.
Detect Mouse
- Canvas (Section)
- Window (View Port)
On Hover
Set hover effect:
- Grab
- Bubble
- Repulse
- Grab + Bubble
On Click
Set click effect:
- Push
- Remove
- Bubble
- Repulse
- Push + Repulse
Bubble Size
Set bubble size in pixels.
Use Particles JSON File in Elementor Particles Background
In some cases, you may want to generate a custom JSON file for your particles effect. To create a custom JSON file with advanced features visit this link: Particles.js
Open downloaded particlesjs-config.json file with any text/code editor and copy the code.
Paste the copied code in Widget’s Particle JSON field. It updates the Particles background. Notice that with the custom Particles JSON attribute all previous styling attributes won’t work.
Background Location in Elementor Particles Background
Set the background location
In Background
In the back (behind) of content.
In Foreground
In the front (above) of content.
Usage Examples of Elementor Particles Background
Particles Background for Elementor with Circle Particles
Particles Background for Elementor with Star Particles
Particles Background for Elementor with Polygon Particles
Particles Background for Elementor with Image Particles
Particles Background for Elementor with Randomized Sizes of Particles
Particles Background for Elementor with Multi Color Particles
Particles Background for Elementor with Connected Line Particles
Thank you for using the Particles Background Widget for Elementor! With its animated particles and flexible customization, this is the best Particles Background Widget for Elementor, perfect for creating lively, interactive backgrounds that enhance the visual appeal of your site. If you have any questions or need assistance, feel free to reach out. For more use cases and examples visit the live demo on our website.
