[Raphael BParticipant]

Hi there,
I really would like to add particles.js to a hero page with revolution slider and/or in a cornerstone row.

Here’s the link to the JS: http://vincentgarreau.com/particles.js/
and here’s the link to my dev website: http://plusfinder.it/1.0

Can you help?

thanks.

[ChristopherModerator]

Hi there,

Please check this link : http://codepen.io/VincentGarreau/pen/pnlso

Add HTML code in raw content element.
Add CSS and JS code under cornerstone settings tab/custom css and javascript.

Hope it helps.

[Raphael BParticipant]

Thanks a lot it works!
But what about a hero slider in the revolution slider?

[Rue NelModerator]

Hello There,

Regretfully you cannot add the particle.js script inside the slider. Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding.

[Raphael BParticipant]

OK, then can I make a full screen row?
Can I put a row above the menu? (the website is a onpager so I think I can use a custom menu in a row)

[Rue NelModerator]

Hello There,

Thanks for the updates!

To add a fullscreen row above the menu, what you are trying to accomplish requires a template customization and we would like to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Once you already have your child theme active and ready, please insert this following code in your child theme’s functions.php file.

// Add custom fullscreen section above the menu
// =============================================================================
function custom_fullscreen_section() { ?>
  <div id="x-section-0" class="x-section" style="margin: 0px;padding: 0px; background-color: transparent;">
    <div class="x-container marginless-columns" style="margin: 0px auto;padding: 0px; min-height: 100vh;">
      <div class="x-column cs-ta-center x-sm x-1-1" style="padding: 0px; vertical-align: middle;">

        Add your contents here!

      </div>
    </div>
  </div>
<?php }
add_action('x_before_view_global__slider-above', 'custom_fullscreen_section');
// =============================================================================

Hope this works out for you.

[Raphael BParticipant]

Thanks, for the help.

I am still investigating putting particles.js into revolution slider.
For those interested, If I put the css and javascript into the custom css/javascript fields in the revolution slider plugin and then I give the ID “particle-js” in the General Settings-> Defaults tab, I have some results, the script is working but the particles are under any slide and so I had to have a transparent background in the slide (leacing only texts and logo layers) and had to set the full screen image in the particle.js css code.

It seems however to have lost the interactions functionalities of the script.

So, as I said still investigating.

[ChristianModerator]

Thanks for sharing, Raphael.

[Author]

Posts