{"id":226178,"date":"2019-10-07T22:00:43","date_gmt":"2019-10-08T05:00:43","guid":{"rendered":"http:\/\/wpbeaveraddons.com\/?p=226178"},"modified":"2019-10-08T03:02:14","modified_gmt":"2019-10-08T10:02:14","slug":"particle-effect-beaver-builder","status":"publish","type":"post","link":"https:\/\/wpbeaveraddons.com\/particle-effect-beaver-builder\/","title":{"rendered":"How to add Particle Effect Background to your Beaver Builder website"},"content":{"rendered":"

Do you ever get mesmerized by the beautiful, moving particle effects background on a website? What if you wanted to create the same for your Beaver Builder<\/a> websites?<\/p>\n

Taking the web by storm, the particle effects background<\/a> style not only highlights your websites’ appearance but also makes a great impression on your visitors.<\/p>\n

With the Background Effects<\/a> feature of PowerPack, you can add excellent animated backgrounds on the website. These animations consist of an extensive list of styling options which give you complete flexibility to customize the color, size & quantity of the moving particles.<\/p>\n

Particle Background Effects in PowerPack is based on the popular Particle.JS library<\/a>. It’s a light-weight JavaScript-powered animation library for creating elegant particle effects on any website.<\/p>\n

\n

What is a Particle Effects Background?<\/h2>\n

The Particle background effects consist of moving elements. These elements can be configured as per different parameters like shape, size, radius, color, etc. The Particle.JS animation library allows us to customize the particle behavior as well.<\/p>\n

The Particle background effect can be used creatively for creating various kinds of styles like snowfall, galaxy, stars, polygons, etc. You can also disable the animation or moving effect and create a static particle effect.<\/p>\n

Where can we use these amazing background effects?<\/h3>\n

Particle background effects can be added to various sections to create stunning visual effects on the website. You can use particle effects for special festive offers or just for fun! How about adding a snow effect during the winters on your website? Or you can add some stars for Christmas?<\/p>\n

Other than the fun part, the particle effects background can be used for contextual design experience as well. E.g., you can add polygon or circular background effects for a music website. You can add a connected dots background for a technology or research website.<\/p>\n

Also Read:<\/strong> 10+ Background effects for Beaver Builder<\/a><\/p>\n

For a photography website, you might like to add some subtle animation with small dots. Here’s an example of a Christmas offer with snowfall particle effect.<\/p>\n

\n\t
\n\t\t
<\/div>\t\t\t\t
\n\t\t\n
\n\t\t\t
\n\t
\n\t
\n\t\t

\n\t\tChristmas offer!!!<\/span>\n\t<\/h2>\n\t<\/div>\n<\/div>\n
\n\t
\n\t\t
\n\t

buy one get one free<\/p>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n

\n

How to add Particle Effect Backgrounds with Beaver Builder?<\/h2>\n

Before we begin, make sure you have installed and activated both Beaver Builder<\/a> and PowerPack Beaver Builder addon<\/a> on your WordPress website.<\/p>\n

Step 1: Set the Animated Particle Background Effect for a Row<\/strong><\/h3>\n

Go to the page where you want to add the particle background effect. Open it with Beaver Builder editor. Once you are in the editor, click on the section you wish to edit.<\/p>\n

From the Style tab,<\/strong> select Animated Background (PowerPack) <\/strong>option.<\/strong><\/p>\n

\"\"<\/p>\n

Step 3: Choose from the Inbuilt Animation Types<\/strong><\/h3>\n

\"\"<\/p>\n

Particle Background Effects feature of PowerPack includes NASA<\/a>, Bubble<\/a> & Snow animations<\/a>. You can choose any of these prebuild effects & add it to your website to enhance its appearance & looks.<\/p>\n

With NASA animation<\/strong>, you can create a beautiful twinkling star effect on your website.<\/p>\n

Bubble animation<\/strong> allows you to create cute bubble animation which helps you to add a magical effect on your website.<\/p>\n

Create a magnificent snowfall effect on your website using Snow animation<\/strong>.<\/p>\n

 <\/p>\n

Step 4: Particle Layout, Design & Customization:<\/strong><\/h3>\n

\"\"<\/p>\n

With Particle background feature of PowerPack, you can customize the background effect as per your preference. It gives you complete flexibility to design every aspect of the particle.<\/p>\n

Some available customizations option are:<\/p>\n

    \n
  1. Size<\/strong><\/li>\n
  2. Color<\/strong><\/li>\n
  3. Opacity<\/strong><\/li>\n
  4. Quantity<\/strong><\/li>\n
  5. Hover Effect<\/strong><\/li>\n
  6. Moving Speed & Direction<\/strong><\/li>\n
  7. Enable or Disable Background Image<\/strong><\/li>\n<\/ol>\n

    By playing with these customization options, you can create creative Particle Background effects for your website.<\/p>\n

    Here is an example of a beautiful Bubble Background Effect created with a Particle Background Feature of PowerPack:
    \n

    \n\t
    \n\t\t
    <\/div>\t\t\t\t
    \n\t\t\n
    \n\t\t\t
    \n\t
    <\/div>\n<\/div>\n\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n<\/div><\/p>\n
    \n

    How to Customize Particle Backgrounds Effect?<\/h2>\n

    \"\"<\/p>\n

    Although in this feature, we have integrated stunning & alluring background effects, however, if you want to create your custom background effect, you can easily do it by customizing background style with JSON<\/strong> code.<\/p>\n

    Let’s see how you can easily add a custom moving particle background effect.<\/p>\n

    Step 1: Generate Custom Particle Backgrounds Effect<\/h3>\n

    \"\"<\/p>\n

     <\/p>\n