Support » Theme: Sydney » Adding Title and Call to Action button in Video Header

  • Resolved imran79

    (@imran79)


    Hello,

    First, I would say that this is an amazing and simple to use theme. I am facing an issue for which I could not find a solution and I am hoping that you could direct me to some solution to resolve this issue.

    I added a video in the Home page Header which works fine, but then I do not see any option to add the Text and call to action button which you normally have when you have image on the Home pager header. How can I add a Title in the middle and call to action button on the video?

    I will appreciate your help.

    Regards

    IMRAN

Viewing 15 replies - 1 through 15 (of 27 total)
  • 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

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

    Thank you for your quick response.

    Regards

    IMRAN

    • This reply was modified 3 years, 10 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”.

    Page builder find row id

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

    Custom links elem id target

    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://wordpress.org/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 3 years, 8 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 3 years, 1 month ago by lullabyman.
    • This reply was modified 3 years, 1 month ago by lullabyman.
    • This reply was modified 3 years, 1 month 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 3 years, 1 month 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!

    evolutiondigital

    (@evolutiondigital)

    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.

Viewing 15 replies - 1 through 15 (of 27 total)
  • The topic ‘Adding Title and Call to Action button in Video Header’ is closed to new replies.