Halo… did you get this solved? If you’re able to link me to the page in question, I can see if anything jumps out at me as to what’s going wrong.
I know you said you’d added a link… but I can’t see it.
Cheers, Lee

Hi rotem,
I’m open to help you figure out the issue… but I would need to see the published page, to check how the elements are rendering. Is there a link you can post here?

Hi Peter
I might be able to help … have you got a link to the page so I can check how it’s rendering?
Cheers.

First thing to try – can you go back in to the “Code Block” element in the page editor, and copy/paste this div again…

<div id="particles-js"></div>

… or retype it… copying from my instructions left some bad characters.

Ok… hopefully this makes sense and is easy to follow for designers/developers that use Enfold regularly.
Firstly here’s a simplified version of the Enfold One Page Portfolio demo that I’ve set up to show results… http://dev.twotreescreative.com.au/. And you’ll notice that I’ve implemented TWO instances of particles.js on the same page, one instance behind a Color Section element (not full width) and one instance behind a Grid Row element (full width). .. this just requires some additional code a little later to call additional instances of particles.js.

NOTE: These steps assume you’re using a child theme with Enfold.

Step 1 – Configure Particles.js and download the package.

Go to http://vincentgarreau.com/particles.js/ and click “Download” on the box in the middle of the screen so you’ll have particles.js-master.zip on your machine. Inside the zip you’ll need particles.js OR the minified version particles.min.js AND the files inside the “demo” folder.
While you’re still on http://vincentgarreau.com/particles.js/ it’s also useful to configure your particles display using the controls on the right of screen. When you’re happy enough… click to “Download current config (json)” at the bottom of the controls panel… the contents of this file (which will be named particlesjs-config.json) will be handy later.

Step 2 – Adding files to your hosting account (via FTP or cPanel or whatever).

FTP to your server and browse to the /wp-content/themes/enfold-child/ folder (where “enfold-child” is the name of your child theme).
Upload particles.js OR the minified version particles.min.js (from the root of the “particles.js-master.zip” package you downloaded previously) to the root of your child theme folder.
Now create two new folders/directories in your child theme directory… one named “js” and one named “css”.
In the “js” folder, upload the file “app.js” from your machine, which you’ll find inside the “particles.js-master.zip” package – it’s in “demo > js > app.js”.
Now jump back up to your child theme directory and open the new “css” folder you created… upload the file “style.css” from your machine, which you’ll find inside the “particles.js-master.zip” package – it’s in “demo > css > style.css”.

Step 3 – Loading script files via the Child Theme Functions.php and adding some css to your Child Theme Stylesheet.

In your WordPress admin, (via “Appearance > Editor”) add the following to your Theme Functions (functions.php)… obviously you’ll replace “dev.twotreescreative.com.au” and “enfold-child” to reflect your own site.

function enfold_customization_custom_js() {
?>
<script type = "text/javascript" src = "http://dev.twotreescreative.com.au/wp-content/themes/enfold-child/particles.js"></script>
<script type = "text/javascript" src = "http://dev.twotreescreative.com.au/wp-content/themes/enfold-child/js/app.js"></script>
<?php
}
add_action( 'wp_footer', 'enfold_customization_custom_js' );

Once you’ve saved/updated the functions file, and you’re still in “Appearance > Editor” … add the following css to your Child Theme stylesheet – some of these properties can be tweaked later to suit your needs.

* =============================================================================
   Particles.js CSS
   ========================================================================== */
/* ---- base ---- */
html{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
canvas{
  display:block;
  vertical-align:bottom;
}
/* ---- particles.js container ---- */
#particles-js {
  position:absolute;
  width: 100%;
  height: 100%;
  background-image: url('');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  top: 0;
}

Step 4 – Time for a test.

Edit the page (in WordPress admin) that you want to add the particles.js to and add a “Code Block” Element (from Avia Layout Builder) as the last element INSIDE the Color Section (or Grid Row) in which you’re after the particles effect.
Edit the “Code Block” and enter

<div id="particles-js"></div>

in the Code Block Content area. Save and Update page and view results on front end. All things being equal, you should be seeing some particles floating around behind the specific Color Section… but they’ll just be the default “look”.

Step 5 – Applying your specific settings for your particles.

FTP to your site (from Step 2) and go into your Child Theme and then open the app.js file inside “js > app.js”.
You’re now going to open and copy all of the contents of the file you downloaded (in Step 1) named “particlesjs-config.json” – which contains your custom configuration options from http://vincentgarreau.com/particles.js/ – into the “app.js” file.
NOTE: In the app.js file, ONLY replace code between curly braces, that is { and } … don’t replace the first line of script “particlesJS(‘particles-js’,” (which I think is at line 14) or the last line, which is just “);” … just replace everything in between with the contents of you “particlesjs-config.json” file.
Save the app.js file on your server and refresh the front-end of your site to check that the config of the particles has updated.

__________________________________

There may be better ways to implement all this… but this is just how I got it to work, with enough flexibility to get the effect I was after.

• This reply was modified 7 years, 6 months ago by Two Trees.

Hi… having exactly the same issue on a standalone WP installation AND Multisite network since updating to WP 4.4.2.
I’m hoping for a quick fix of this issue, as is the OP.

Cheers