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

Thank you for the quick response.

I went to Dashboard= Customisation = Header Area = Hearder Type = Front Page Header Type =Select Video and then Went to Header Media and the added .MP4 type clip from my Media Library.

Link to site is

https://v-learning.creative-edevelopers.com/

Thank you for your quick response.

Regards

IMRAN

• This reply was modified 7 years, 11 months ago by imran79.

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

Thank you Kharis for the code.

I have now added text and a button to my Home page video in the header area. But now when I go to any other page, the text and the button slider appears in the every page. Where as I only wanted it to appear header area on the video in the Home page.

Secondly, Can you please also indicate the name of each section in the Home page. #primary works fine, but when I give link #secondary or #third to any button, it does not scrolls down to any sections like it does when I give #primary to any button. I just wanted to make a Single Page site, and want to assign my menu item the corresponding area in the home page rather making more pages.

Regards,

Muhammad IMRAN

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

Thank you Kharis for the recommendations.

I have made all the changes and they are working perfectly fine now.

I am really impressed by the quick, prompt response.

Regards,

Muhammad IMRAN

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

Thanks so much for leaving a review https://www.ads-software.com/support/topic/excellent-support-and-excellent-theme/.

We really appreciate it!

Regards,
Kharis

Hello,
I too am having an issue with placing text over the home screen video. The video is playing fine, and i followed your instructions for adding the text, but nothing appears. Am i missing some closing code for the java script?
Thank you

• This reply was modified 7 years, 9 months ago by petersax1.

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.

.

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

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 7 years, 2 months ago by lullabyman.

This is a problem on the tablet and especially the smartphone screen. Text and button are both pushed way down on the page so it covers the sections below the video. I have no idea how to fix that. Suggestions?

Hello @lullabyman,

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

Regards,
Kharis

Thanks for Replying Kharis. I ended up giving up on using JavaScript for this and used negative margins to position a title header. Thanks for asking though!

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.