Want to make your Elementor website more engaging with stunning animated visuals? Adding a particle background is an easy way to do it! With the Elementor Addon Elements plugin, you can now create eye-catching particle animations for both sections and containers — no coding required.
This feature uses the popular particles.js library and works directly from the Elementor editor. In this tutorial, you’ll learn how to enable, customize, and apply a particle background in Elementor in just a few clicks.
Key Takeaways
- How to enable animated particle backgrounds using Elementor Addon Elements
- Customize the particle effect using particles.js
- Learn to use your own JSON configuration for a fully personalized animation
Add Particle Background to Section in Elementor
- Edit section settings and go to the Styles tab. Set your desired background there. It can be any color, image, or gradient.
- Now go to the Particles section under the Styles tab.
- In the Particles section, Enable particles by settings the switcher to Yes.
- Now you will see default Particles moving in your section.
Add Particle Background to Container in Elementor
Adding a particle background to a container in Elementor can bring life and motion to your website design. It’s a simple yet powerful way to make your content stand out and engage visitors. With particles, you can create stunning visual effects that flow across your container, enhancing the overall look and feel of your site.
Here’s how you can add a particle background to a container in Elementor:
- Open your page in Elementor and select the container where you want to add the particle background.
- Go to the Style tab in the container settings and set the background as needed.
- Scroll to the “EAE-Particles” settings and turn on the “Enable Particle Background” option.
- Once enabled, you’ll notice that the default JSON code has been added, and the particle background will appear on the selected container.
Creating your own Particle Background Effect
Default particles are available once you enable Particle Background in settings. You will notice some JSON code in the text area there. You can also generate your own style and use it here.
For this, go to this URL https://vincentgarreau.com/particles.js/
- In the top right corner, you will notice a lot of configuration options. Just play with them and create your own style. You will see the live preview in the background.
- Once you have generated your desired style, click on the “Download Current Config” option at the end of that configuration section. This will download a JSON file.
- Open the JSON file, copy its content, and paste it into the “Particle Json” section mentioned above.
FAQs on Particle Background in Elementor
What is a particle background in Elementor?
A particle background is an animated visual effect that uses moving particles (dots, shapes, lines) to create a dynamic backdrop behind your section or container in Elementor.
Do I need coding knowledge to add particles in Elementor?
No, you can easily enable particle backgrounds using the Elementor Addon Elements plugin with a simple toggle in the Style tab.
Can I apply the particle effect to only one container or multiple?
Yes, you can apply particle backgrounds to any number of individual sections or containers across your page.
Conclusion
That’s it! With just a few clicks, you’ve added eye-catching particle backgrounds to your Elementor sections or containers. Whether you’re building a landing page, a portfolio, or a creative homepage, these subtle animations can make a big impact.
Start exploring custom styles using particles.js, and don’t forget to check out our live demo to see the magic in action.
Want more Elementor widgets? Explore all Elementor Addon Elements Widgets.
Thanks, it worked!