Add Particles Background to your Divi Site

by May 25, 2022Announcements
Today we have another surprise for you. We have just published a new plugin version, where we have added new options that you can use on your Divi page right away 🤩

In the previous release, we added the brand new Expanding CTA module, which you can learn more about here. In this release, we are adding a completely new feature that will allow you to add particles backgrounds to your Divi website.

The particle effect allows particles to be added to the background that may react to the movement of the mouse. The molecules may or may not be linked depending on the style chosen. It is a web design technique that is quite common. By conquering the web, particle animations a few years ago managed to carve out quite a niche for themselves. The huge current obsession with designs that have a modern character and geometric decor makes them one of the most sought-after solutions today. The particle effect can be used to create many kinds of scenes, for example, a snowy spread of white dots, a galaxy, raindrops, etc.

Contents:

Introducing Particle Background for Divi

With the new Divi Pixel version, you can easily add particle backgrounds to your Divi site, using the new Divi Pixel settings. This new amazing particle effect is using 3rd party JS library particles.js which allows full control over particle shape, size, color, particle spacing, animation direction and more. Thanks to the advanced options, we can also make the particles respond to the movement of the mouse. Below are a few stunning examples of particle backgrounds.
View Demo Page

How to add particle effect using the Divi Pixel plugin

Adding the particle effect with Divi Pixel is quite simple. We just need to enable that effect in the plugin settings, add a custom ID Class to the section, row or module, and finally, customize that effect using the Theme Customizer settings. Since Class ID can be used only once on a page, we are limited to adding only 2 effects, so we can add a maximum of 2 elements on 1 page with the particles effect.
Enable Particles Background in Divi Pixel plugin settings
  1. Go to Divi → Divi Pixel
  2. In General tab, enable the Particles Background toggle
  3. Click the Save Changes button
Add Class ID to section/row or module
  1. Open the page where you want to add Particles Background effect
  2. Open Section/Row or Module settings
  3. Go to Advanced → CSS ID & Classes toggle and add dipi-particles-1 to the CSS ID field
Customize Particles Background Effect
  1. Open the page where dipi-particles-1 CSS ID is added on front-end and in the WP Dashboard toolbar go to Theme Customizer.
  2. Navigate to General → Particles Background
Now you can customize the particles effect using the Divi Pixel Customizer Settings. You can change particles’ amount, size, animation speed and direction, change particles’ shape and more. Once you are done, don’t forget to save Theme Customizer settings.
Particles Background Settings
Particles Color – particles element color
Link Color – particles link color
Particles Shape – select 1 of 5 available shapes (circle, square, triangle, polygon, star)
Move Direction – select particles animation direction (None = random)
Particles Interactivity – select 1 of 3 options to make the particles interactive (Grab, Bubble, Repulse)
Particles Count – define a number of particles
Particles Size – define the size of particles
Particles Speed – define particles’ animation speed
Link Width – define particle line width
Link Distance – define link distance to connect with particles
That’s all for today. We hope you will like this new Divi Pixel feature. We’d love to hear your voice. Share your opinion in the comments below 🙂 If you would like to connect with other users that are using the Divi Pixel plugin, join the Divi Pixel Community today! You are more than welcome!
Maciej Ekstedt

Maciej Ekstedt

Maciej, co-founder of Divi Pixel, is a passionate web designer and marketing expert who thrives on turning creative ideas into effective strategies. His fascination with the intricacies of megalopolises influences his work, where he meticulously crafts detailed solutions for his company.

Enhance your Divi Theme with Custom Settings and New Modules. Start Creating Awesome Websites with the Divi Pixel

See Pricing

We offer a 14 Day Money Back Guarantee, so joining is Risk-Free!

Related Articles

Introducing Custom Mobile Menu for Divi

Introducing Custom Mobile Menu for Divi

Boost Your Black Friday Sales: Top Marketing Strategies for Success

Boost Your Black Friday Sales: Top Marketing Strategies for Success

Introducing New Settings to Easily Manage Divi Cache

Introducing New Settings to Easily Manage Divi Cache

Divi Pixel: Highlights and Best Moments from 2023

Divi Pixel: Highlights and Best Moments from 2023

Introducing Table Maker for Divi

Introducing Table Maker for Divi

Introducing Divider module for Divi

Introducing Divider module for Divi

3 Comments

  1. Johan
    Johan on 1. August 2022 at 14:13

    hello how can I make the particle background do autoplay? I added the background but its only moving while scrolling. could you help please?

    Reply
    • Maciej Ekstedt
      Maciej Ekstedt on 2. August 2022 at 10:27

      Hello Johan, that’s interesting. Maybe you enabled the Parallax effect in section settings? If you can’t solve it, please submit a support ticket.

      Reply
  2. Alexandre Monteiro
    Alexandre Monteiro on 2. April 2023 at 16:48

    That’s so cool. is it possible to add it in multiple back grounds since we have to put it only in CSS ID ? Why not CSS Class for different backgrounds, please ?

    Many thanks

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *