Adding Title and Call to Action button in Video Header

Hello there,

Please share the final code you applied to your site. Also please share your site URL here, so I can have a look.

Regards,
Kharis

Hello Kharis,
I put in my site a video code from coverr and Im trying to put in a hero header subheader an call to action thats also compatible for mobile. Could you please help me out with this?
here is my site day spa
thank you very much!

Hello,

I have inserted the provided code into the custom java script box however it is not appearing on my site, can you help to see what it is i am doing wrong.

Thank you in advance.

https://www.brevidigital.com

Regards,
David

Hi, same issue here, copied and pasted the JS code in the plugin but nothing appears…
Any help would be much appreciated as usual.
Regards,
Andrea

Hello there,

Please share your final code here, so I can replicate and correct it.

Regards,
Kharis

Thank you!
I inserted your second code (the one for the two buttons but in homepage only):

(function($){
      
    "use strict"

  if( $('body').hasClass('home') ) {
    
    var mainTitle    = 'Maintitle goes here';
    var subTitle     = 'Subtitle goes here';
    var buttonURL    = '#';
    var buttonLabel  = 'Click to begin';
    
    var heroContent  = '<div class="slide-inner">';
        heroContent += '<div class="contain text-slider">';
        heroContent += '<h2 class="maintitle">'+mainTitle+'</h2>';
        heroContent += '<p class="subtitle">'+subTitle+'</p>';
        heroContent += '</div>';
        heroContent += '<a href="'+buttonURL+'" class="roll-button button-slider" target="_top">'+buttonLabel+'</a>';
        heroContent += '</div>';

    $('.sydney-hero-area').append(heroContent);

  }  

})(jQuery);

I jus tried it and it’s still displaying fine to me. Please check if there’s a JS script conflict in your site. https://codex.www.ads-software.com/Using_Your_Browser_to_Diagnose_JavaScript_Errors

If possible, share you site link here to allow me checking it directly.

Regards,
Kharis

Hi Kharis, the url is editnapoli.com (pwd: editnapoli)…
Regards,
Andrea

Hello Andrea,

Thank you for sharing. Please try adding the below CSS code to Appearance > Customize > Additional CSS from dashboard.

.slide-inner {
  display: block !important;
}

As caching applied, afterward you’d need to flush cache. Otherwise, the new code addition won’t take any effect. https://codex.www.ads-software.com/I_Make_Changes_and_Nothing_Happens

Regards,
Kharis

Fantastic, all seems ok now!
All the best,
Andrea

You’re welcome Andrea!

Hi Kharis,

i have used below code by seeing this solution given by you. Everything is working fine but call to action is not getting clicked or navigating to any url.
Another thing i want to modify in this code is i need to add animation to the text and call to action such that, maintitle slides first and then subtitle slides in then call to action rolls in.
Can you kindly help me on this. i will be waiting for your reply.

Thanks,
Gnana