Tagged: ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #799896

    there is a cool background animation I want to add to one of my pages (only to this one specific page)
    It’s pretty simple and it look like this (the link is in the private content)
    Problem is it needs two JS files to run (sketch.min.js and index.js)

    I’ve tried numerous ways to get this work with enfold (from other threads in this forum) but none of them worked
    ..i think the only way might work as adding them as function to the Functions.php like stated here https://kriesi.at/support/topic/add-javascript-to-page/#post-497269
    BUT i’m not sure:
    1. how can use this solution with for two scripts instead of one?
    2. how can I limit them to work in only one specific page (in my case -my home page)?


    i also tried:

    function custom_code(){
            if ( is_page( 2599 )) {
    <script> CODE HERE </script>
    add_action('wp_footer', 'custom_code');

    but it didn’t work either



    Have you attempted using a code block directly on the home page?

    Best regards,
    Jordan Shannon


    yes I did
    sketch.min.js and index.js are not short one line code, they are very long
    but I tried anyway putting them warped in a <script> tag inside a code element but it didn’t work
    i’m not sure why


    UPDATE! it works!
    i tried again and it does work
    i thought it wasn’t working because the white background color was overlapping it so i couldn’t see it !
    once i turned the background to transparent (usingbackground-color: rgba(0,0,0,0.0)!important; ) it now works just fine
    thank you so much!


    but now i have a overflow problem..
    there is a scroll bar and he shouldn’t be there..
    I tried adding

    body {
      margin: 0;
      overflow: hidden;  

    and it works but than it effects the whole website and all the other pages..
    is there a way to restrict it the the home page only?

    • This reply was modified 6 years, 9 months ago by Doron.

    Hi Doron,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    body.home {
      margin: 0;
      overflow: hidden;  

    If you need further assistance please let us know.
    Best regards,


    thank you so much!

    I also found that putting <style type = "text/css">html, body { height: 100% !important; overflow: hidden !important; }</style>
    inside a code block in the page builder also do trick
    thank you very very much!



    glad we could help. Let us know in a new ticket if you have some more questions related to the theme. We are happy to assist you.

    Best regards,

Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘how to add 2 Javascript code snippets into specific single pages?’ is closed to new replies.