The Particles Background plugin is a simple yet powerful plugin that extends the popular WPBakery Page Builder with particle backgrounds. This plugin adds new particle element and options for particle backgrounds to pre existing elements of the WPBakery Page Builder.


Plugin Installation:

To install the plugin upload ‘’ folder to the Dashboard > Plugins > Add New > Upload New and then drag and drop or use the file selection to upload the plugin folder to your wordpress site.
Activate the The Basement.Agency Particles Background plugin through the ‘Plugins’ menu in WordPress.


Requirments, Plugin Features & How to use them:

Plugin Requirements:

  • First of all the plugin works as an addon for the `WPBakery Page Builder` plugin, meaning that you will need an active installation of the WPBakery in order to use the Particles Backgrounds Addon for WPBakery Page Builder plugin. Click Here to visit the original WPBakery Page Builder plugin Website.

Plugin Features:

This plugin adds new tabs and options to a bunch of WPB( WPBakery Page Builder ) elements.

List of elements:

  • ‘Particles Background’ this element is a new WPB element that utilizes the ‘particles.js’ library. Adding this element to a row or a section gives you 7 tabs where you can modify, adjust and select values based on you preference to design your custom Particles Background.
  • The plugin also adds pre built Particle Background templates and a ‘particles.js’ template for you to pick your own options and styling for your backgrounds.

Notes! : 

  • All pre existing elements of WPB that are included in the list of elements above will have a tab named ‘Particles’ where inside of it are being applied the above functionalities of the plugin.
  • For more details on the plugins options go through the documentation images.


Option Details:

New Element ‘Particles Background’ 7 tabs configuration:

  • General
    • Id – unique per page:
      ‘The Id – unique per page field is used to set the html elements id equal to the value of the field’
    • Particles number:
      ‘Particles number is responsible for the ammount of particles that will be rendered in the element’s frame’
    • Particles density:
      ‘Use this value instead of particles number to avoid scaling issues on mobile’
    • Particle type:
      ‘Particle Type is the shape of the particles you want to display’
    • Particle color:
      ‘Particle Color is the color of the particles’
    • Particle stroke color:
      ‘Particle Stroke Color is the Color of the Particle’s Background as an item’
    • Particle stroke width:
      ‘Particle Stroke width is the width difference between the main color and the stroke color of the particle
  •  Sizing
    • Particle size:
      ‘Particle Size is the Size of the individual particles’
    • Randomize particle size:
      ‘When set to yes Randomzie particle size will create display different sizes of the selected particles’
    • Animate particle size:
      • Animation speed
        ‘Animation Speed determines the time it takes for a particle to change its size to a different value’
      • Minimum particle size:
        ‘The Minimum particle size is the smallest size a particle can resize to’
      • Sync animation:
        ‘When set to yes the Sync animation functionality will sync all the resizing animations and trigger them all at once and on the same time’
  • Opacity:
    • Particle opacity:
      ‘Particle opacity is the equivalent of the rgba opacity’
    • Randomize opacity:
      ‘Randomizing opacity simply renders the different particles with different values of opacity’
    • Animate particle opacity:
      • Animation speed:
        ‘Animation Speed determines the time it takes for a particle to change its opacity value to another one’
      • Minimum particle opacity:
        ‘The Minimum particle opacity is the smallest opacity a particle can change its value to’
      • Sync animation:
        ‘When set to yes the Sync animation functionality will sync all the opacity animations and trigger them all at once and on the same time’
  • Movement
    • Enable movement:
      • Direction:
        ‘Direction is an option responsible for the direction of the particles’
      • Enable random particles:
        ‘Enabling Random Particles will set random shapes to random particles’
      • Enable straight particles:
        ‘Enabling Straight Particles will make your particles static’
      • Speed:
        ‘By default particles are moving around the container they render in. If straight particles is not set to yes, then the value of speed will control the speed in which the particles will move around the container’
      • Boundary mode:
        ‘Boundary mode comes with 2 simple options the “Bounce” and the “Out” option, where when set to Bounce the particles stay inside the container and bounce off the limits and when set to Out the particles leave the container’s visible area’
  • Line linking:
    ‘Line Linking is the straight line connections between the particles’

    • Enable line linking:
      • Maximum distance:
        ‘Maximum distance of the particles link’
      • Line color:
        ‘The color of the linking line’
      • Line opacity:
        ‘The opacity of the linking line’
      • Line width:
        ‘The width of the linking line’
  • Interactivity:
    ‘Interactivity is the type of mouse effect you can apply to interact with the current particles inside the container’

    • Enable:
      • Mode:
        •  GRAB:
          • Grab distance:
            ‘The distance between the mouse and the particles’
          • Grab opacity:
            ‘The opacity of the grabbing lines’
        • REPULSE:
          • Repulse distance:
            ‘The distance between the mouse and the particles ( shaped as circle )’
  • Compatability:
    • VC Row hookup classes:
      ‘If your theme is using custom VC Row classes add custom class name’
    • Z-index:
      ‘Z-index is responsible for the position of your background particles in the z axes’