Need CTA button on each page header that links to a section in same page

Hi,

I have website with multiple pages, each page has its own header image. I want to add ‘Call to Action’ button on the header image of each page. On hitting the button1 on header image of page1 , it should take me to say row1 of page1. On hitting the button2 on header image of page2 , it should take me to say row1 of page2. Likewise for other pages. Could you please assist.

Regards,
Devashish

Hello Devashis,

How did you setup the header image on each page? Please share a link to one of your pages here, so I can get the exact element selector and assist you in better way.

Regards,
Kharis

Hi Kharis,

I was able to setup the header image on each page by using the Unique headers plugin.

Website link: http://indixotics.com/cashmere/[details=Summary]This text will be hidden[/details]

And I have added CTA button on header image as suggested in post SYDNEY call to action button on Header Image (not slider)

But with this, same button with the same link appears on every page. I want to have different buttons with different link for every page.

Regards,
Devashish

Hello Devashish,

Try replacing the jQuery code with this one:

    jQuery(function($) {

      $.fn.addHeaderButton = function(url,text){

        var headImg = this.find('.header-image');
        var myButton = '<a href="'+url+'" class="roll-button button-slider" style="top: 120px;">'+text+'</a>';

        if( headImg.length ) {
          headImg.css('text-align', 'center').append(myButton);
        }

      };

      // Add header button per page
      
      $('.page-id-464').addHeaderButton('#link1', 'Button 1');
      $('.page-id-593').addHeaderButton('#link2', 'Button 2');

    }); 

The button and link address for specific page is defined with this line:

$('.page-id-464').addHeaderButton('#link1', 'Button 1'); 

.page-id-464 is a unique class name identified by its ID number. Adjust this number to match with your page. You can find it while editing it – in the address bar of web browser you’ll see an address that says: yoursite.com/wp-admin/post.php?post=464&action=edit

Regards,
Kharis

This works perfect. Thank you so much Kharis !!

Regards,
Devashish

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis