Viewing 30 posts - 31 through 60 (of 60 total)
  • Author
  • #901624

    Nice one Two Trees you are a diamond!
    3 questions (for anyone):
    – Is there a way to add it to the header and footer background?
    – Is there a way to add it to an entire page behind the color sections and show through?
    – It only works in the first color section I add the code block to. How do I get it to appear in more than one color section?
    Thanks again



    I haven’t tested the script personally but maybe you can try the following.

    1.) Use the “#header” and “#footer” selectors, respectively.

    2.) Use the color sections’ Section ID field.

    3.) Maybe you need to re-initialize another particlesJS callback for another selector or container.


    particlesJS.load('another-particles-js', 'another-particles.json', function() {
      console.log('another-particles.js loaded - callback');


    <div class="another-particles-js"></div>

    JSON: (another-particles.json)

    Same as:

    Best regards,


    Thanks – worked on the first try!



    Glad to hear that :) Let us know if you need further assistance.

    Best regards,


    Hey guys, would it be possible to show the particle animation as a background of a full screen slider?

    • This reply was modified 5 years, 11 months ago by yingyang.


    Probably yes but you would probably need to customize the theme files. It’s something which is beyond the scope of our support forum. I’ll leave this thread open in case another user can help you.

    Best regards,


    Hi Guys,

    I’m maybe a bit behind on this but having issues with the particles appearing below the color section content rather than behind it.

    Followed the steps as required and my custom styling for app.js is all working fine, just can’t seem to get it behind the other color section content.

    I’ve typed the main <div id="particles-js"></div> into the top content area in the code block (Code Block Content. Add your own HTML/CSS/Javascript here.

    Should I tick any of the check boxes (escape HTML Code, Disable Shortcode Processing, Deactivate markup?

    Also, is it possible to use in a color section to keep content within the wrapper but allow the particle background to be 100% width to match the background color of the color section?

    Any help much appreciated.


    • This reply was modified 5 years, 3 months ago by mint.


    Have you tried adding the target ID in the color section’s Section ID field?


    Best regards,


    Hi Ismael,

    Sorry for the delay in replying. Unfortunately, this doesn’t work either. I tried adding position: absolute (which works in Inspect/Dev Tools when added to the particles-js id via but doesn’t seem to work when added to the actual style.css.

    Thanks for the suggestion though.


    If your css is working in the inspector but not when you add it to the style.css of your child theme, please try this step:
    perhaps your css/js file merging is on in your performance settings, so your merged css needs to be re-built. Please try going to Enfold Theme Options > General Styling > Quick CSS field and add a blank space in the field, then save your theme settings by clicking the big blue button “Save all changes”, then clear or purge any cache plugin, then clear your browser cache.
    Your css should work now, if not then try disabling your merged css in the performance settings, and clear any cache.
    If this still doesn’t work, please try adding your css to the: WordPress > Customize > Additional CSS field:
    This loads last and overrides all other css if you are using !important;.

    Best regards,


    Hi Mike,

    Thanks for the quick response. It was indeed the Performance css merging that was causing the issues. I now have it loading as a background element within a color section using the code block method. It looks ok but ideally I would prefer this to be the full width of the color section rather than just the content container but when trying to add to the color section ID it throws the particles to the very top of the screen (position: absolute, top: 0).

    I’ll stick with what I have at the moment unless I get a flash of inspiration.

    Thanks Mike.


    I’m glad this helped some, but to try to adjust the script we will need to see the site and backend.
    I don’t see any links to your site in the thread.

    Best regards,


    Morning Mike,

    Thanks for coming back on this. It’s not a massive issue but if you have 5 minutes to take a look and offer any suggestions that would be great.



    Thanks for the login, but it doesn’t include admin access so I can’t see the css you are currently using, please check.

    Best regards,


    Sorry, Mike, login access level updated.


    Try adding this code to the end of your functions.php file in Appearance > Editor:

    function custom_script(){
      $( '#particles-js:first' ).insertBefore( '#av_section_3 .container' );
    add_action('wp_footer', 'custom_script');

    and add this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    #particles-js {
    z-index: 10 !important;

    Best regards,


    Morning Mike,

    Again thanks for the input on this. It worked a treat and all is good now. Thanks again for the continued support and going above and beyond.

    As usual, the service and support in regards to Enfold and, in general, is second to none.



    Glad to help, I assume we can close this now, but I like to ask first. Shall we close this then?

    Best regards,


    Mike, sorry for delay in getting back to you. Yes all is good now with my requests. I did jump onto someone elses old thread so I’m happy for you to close action on my requests. Not sure if that also means closing off replies to the original posting though.



    Hi mintsuze,

    Thanks for the update :-)

    Best regards,


    Hello, I’m not a very experienced web developer… but I have confidence that I followed the steps properly. After reviewing my work, I still have a problem:

    The particle effect is not in the background but is instead underneath the color section content. I’ve checked and double checked my work. I’ve tried reworking my files (this is the only custom code in my theme), and redoing the process… I can’t find the problem, any help is appreciated.
    The problem may be outside of Enfold support but I would appreciate it if a moderator could at lease check the things that are in the realm of support, like the code block and page settings.

    Thank you, access is in the private content.

    • This reply was modified 5 years ago by chanjelin.


    : Add this css code to move the particle container inside the color section.

    canvas.particles-js-canvas-el {
        position: absolute;
        left: 0;
        top: 0;

    Thank you for using Enfold.

    Best regards,


    Thank you @Ismael for the quick response, however it hasn’t worked. I am a novice and I may not have added the code correctly… maybe I had to remove some code as well? This is simple enough, I’m not sure what I might have done incorrectly…

    Would you take another look?

    Thank you!



    Thank you for the update.

    The Enfold > Performance > File Compression settings are enabled when we checked. The site probably loaded the old version of the stylesheet the last time you checked. We disabled the compression temporarily and added the code in the Quick CSS field. Please enable the particle script again.

    If you have the time, please create your own thread so that we can close this one.

    Best regards,


    Thanks Ismael, it’s working decently well now. The element is stretched and doesn’t quite respond to my cursor’s precise location, but it’s working well enough. I’m happy with how it is now.

    Have a great day :)


    Glad Ismael could help, thank you for using Enfold.

    Best regards,


    I tried the above methods and work fine, the only issue, I get this error (Uncaught TypeError: Cannot read property ‘getElementsByClassName’ of null) in all pages I don’t using the particles-js effect.
    How I can fix this?
    Any help will be grate!
    Sorry my English is not my best.
    Also I try Mike solution (#1094932) to make it full width on color section i use it but goes in every color section on the page.


    Please see this solution

    Best regards,


    Thanks again Mike for your quick respond.
    I’m not a very experienced web developer, so the steps to follow from the solution you recommend me is looking very hard for me.
    Thanks for try to help me.



    : What exactly are you trying to do? Please open your own thread and try to explain there what you’re trying to create — screenshots will also help. You can upload them to imgur or dropbox. We’ll close this thread for now.

    Best regards,

Viewing 30 posts - 31 through 60 (of 60 total)
  • The topic ‘Trying to Add JS Particles Background via Enfold theme’ is closed to new replies.