YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar thomas.p Support asked

[Tutorial] Adding the particles animation to YOOtheme Pro

This tutorial describes how to add Vincent Garreau's particle animation to the first section in YOOtheme Pro. The descriptions and code examples are based on the frontpage of the Horizon demo package. Therefore, the steps to take and the code to add might differ on each single site.

Before

Image

After

Image

Image

  • extract the file particles.min.js from the zip package

Image

  • use the configurator on the particles.js Website to create your own particles configuration
  • click on Download current config (json) and save the file as particles.json

Image

  • access your site via FTP
  • copy the JavaScript file to /templates/yootheme/js/particles.min.js (Joomla) or /wp-content/themes/yootheme/js/particles.min.js (WordPress)
  • copy the configuration file to /templates/yootheme/js/particles.json (Joomla) or /wp-content/themes/yootheme/js/particles.json (WordPress)

Image

  • login to the backend of your site
  • go to Extensions->Templates->yootheme->OPEN WEBSITE BUILDER->Builder (Joomla) or Appearance->Customize->Builder (WordPress)
  • add an empty row to the first section

Image

  • add the ID particles-js to the row

Image

  • set the height for the first section to viewport, if hasn't been set yet

Image

  • go to Extensions->Templates->yootheme->OPEN WEBSITE BUILDER->Settings->Custom Code (Joomla) or Appearance->Customize->Settings->Custom Code (WordPress)
  • add the following custom JS directly into the box underneath SCRIPT

Joomla

    // particles  
    jQuery(function () {  
        var url = 'templates/yootheme/js/particles.min.js';  
        jQuery.getScript( url, function() {  
            particlesJS.load('particles-js', 'templates/yootheme/js/particles.json');  
        });  
    });

WordPress

    // particles  
    jQuery(function () {  
        var url = 'wp-content/themes/yootheme/js/particles.min.js';  
        jQuery.getScript( url, function() {  
            particlesJS.load('particles-js', 'wp-content/themes/yootheme/js/particles.json');  
        });  
    });
  • add the following custom CSS directly into the box underneath CSS/LESS (adapt the CSS to your needs)

    /* particles */  
    #particles-js {  
        position: absolute;  
        /* prevent the particles from overlaying the navbar */  
        top: 80;  
        left: 0;  
        width: 100%;  
        height: 100%;  
    }
    
  • click save

Image

Example from the Fjord demo package

Image

  • Joomla
  • WordPress
  • YOOtheme Pro

Edited

6 Answers

0

Avatar ozelot answered

Works like a charm!

Just play around with all these different config-possibilities on the particles.js-Website
It gives you much more than only line-styled animations, even an own image-/svg-file could be used.

Edited

0

Avatar thomas.p Support answered

@deyvis.enrique, @elvis.gospic.67

Please create a new, separate question (= thread) on your issues.

When you do so, please provide as much details as possible to improve your chances of getting a useful answer, and of course post a link to your site and a page showing your issue.

Thank you

Know someone who can answer? Share a link to this question via email or twitter.