The Particles Effect adds an animated, interactive particle layer to layout elements, creating modern and engaging visual backgrounds. Particles react to user interaction such as mouse hover and click actions, making this effect ideal for hero sections, banners, and promotional areas.
How to Enable Particles Effect
- Edit a page using Elementor or WPBakery
- Select a supported layout element
- Open the Porto Addons or Porto Options tab
- Enable Particles Effect
- Configure particle options as needed
- Save and update the page
Particles Options
Particles Image
| Option | Description |
|---|---|
| Particles Image | Image used as the particle shape (e.g., dot, icon, custom graphic) |
Particles Hover Effect
Controls how particles react when the mouse moves over them.
| Option | Description |
|---|---|
| None | No hover interaction |
| Grab | Particles connect and follow the cursor |
| Bubble | Particles expand when hovered |
| Repulse | Particles move away from the cursor |
Particles Click Effect
Defines particle behavior when the user clicks inside the element.
| Option | Description |
|---|---|
| None | No click interaction |
| Bubble | Particles expand on click |
| Repulse | Particles are pushed away |
| Push | Adds new particles |
| Remove | Removes particles |
Usage Tips
- Best used on full-width sections or rows
- Keep particle density subtle to avoid distraction
- Combine with Scroll Parallax for immersive hero sections
- Avoid heavy particle effects on content-dense pages
Performance Notes
- Particle effects rely on JavaScript and canvas rendering
- Excessive particles or interactions may affect performance
- Recommended for desktop-focused layouts or key visual sections
