Call to action button in header area

  • Hy.

    This probably either a stupid question or a question with a really complicated answer.
    The header on my website is a static image. It’s not a slider. Is there a way to add a call to action button to it but have it in specific area inside the image?

    I’ve made a quick mockup of what I mean.
    I tried doing this using different means (injecting bootstrap in to a module and adding that to the top as a banner. The thing is that I can’t figure out how to do it properly in wordpress :P.

    View post on imgur.com

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)

  • Hello there,

    Try doing the below 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

    
jQuery(function($) {

  var headerImg = $('.header-image');
  var ctaBtn    = '<div class="slide-inner">'+
                  '<a href="https://yoursite.com/link" class="roll-button button-slider">Button Text</a>'+
                  '</div>';

  if ( headerImg.is(':visible') ) {
    headerImg.append(ctaBtn);
    $('.header-image').addClass('header-image-has-button');
  }  

});

    4. Update
    5. Add this CSS code to Appearance > Customize > Additional CSS from dashboard. 

    
.header-image.header-image-has-button .slide-inner{
  top: 50%;
  -webkit-transform: translateY(-10%);
  -moz-transform: translateY(-10%);
  -ms-transform: translateY(-10%);
  -o-transform: translateY(-10%);
  transform: translateY(-10%);
}

    Regards,
    Kharis

Viewing 1 replies (of 1 total)
  • The topic ‘Call to action button in header area’ is closed to new replies.