Adding Title and Call to Action button in Video Header

Hello Imran,

Could you please share the process you took to setup that video header, so I could reproduce it on my test site?

Also please share the link to your site, so I could be more exact.

Regards,
Kharis

Hello there,

To achieve your objective, you can use jQuery approach as there is no options while video header is being enabled. Please do the following steps:

1. Install and activate the TC Custom JavaScript plugin
2. Go To Appearance > Custom JavaScript
3. Paste the following code into the provided box

(function($){
      
    "use strict"

    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);

4. Update

Regards,
Kharis

I only wanted it to appear header area on the video in the Home page.

Please replace the code I suggested with this one:

(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);

Secondly, Can you please also indicate the name of each section in the Home page.

Every section you made from page builder row is attributed to an unique ID name. You can get it by inspecting it using the web browser’s inspector tool. On Firefox, right click > select “Inspect Element”.

Then put the ID name into your custom link menu item.

Regards,
Kharis

Never mind. I was glad to have an opportunity to assist you. 🙂

Thanks so much for leaving a review https://wordpress.org/support/topic/excellent-support-and-excellent-theme/.

We really appreciate it!

Regards,
Kharis

Hello quick question, I have the same issue, I added a video in the Home page Header. How can I add a Title in the middle and two call to action buttons on the video but spaced. I can’t seem to figure out the code.

rainasariah –

Everything you need to know to do that is on this page. In Kharis’ javascript code above he is appending to the HTML with each line that starts with “heroContent += “. Just keep doing that and use the HTML it would take to do what you would normally need to do. Test out first the layout of what you want to do by just doing the needed HTML at JSFiddle. You can do what you want to do with DIVs, spans, or even tables (yes, that’s okay… just set borders=0).

When you get your layout correct at JSFiddle paste the resulting HTML code into the website javascript editor (Appearance/Custom Javascript), each line preceded by
heroContent += ‘
and ending with
‘;

• This reply was modified 6 years, 7 months ago by lullabyman.

Hello @lullabyman,

Please share the link to your site, so I can have a look.

Regards,
Kharis

Hi,

I’m having the same issue stated above. I’m unable to place hero text over my video header. When I put in that code it works at first but when I put my information in it disappears. Please help. THank you.