Different Call to Action buttons in header slider

Hello,
Is it possible to have a different call to action buttons for each slide in the Sydney theme?
I have tried different things that you have discussed here but none of the works :frowning:

thank you!

Hello there,

Please follow this short tutorial.

Regards,
Kharis

I installed the Custom JavaScript plugin and entered the provided code into the plugin (edited to include the the new buttons and their respective links). I hit update. Nothing in the header slider has changed. Is there an additional step that I need to complete to update the Header Area with the new JS code? Thank you.

Hello there,

Is you site being cached by certain plugin like W3 Total Cache? If so, cache might prevent your site to load new code addition. You should flush cache, then reload your site. If it doesn’t change anything, please share your site URL here, so I can have a look.

Regards,
Kharis

Hi Kharis,

Is there a way to change position, font size and color in each button of each slide?

regards,

Hello there,

For the button in the first slide, use this custom CSS code:


.slide-item:nth-of-type(1) .slide-inner .button-slider {
  /* Button size */
  font-size: 20px;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 20px;
  padding-right: 20px;
  /* Button color */
  color: #ff0000;
  background-color: #fff000;
  border-color: #fff000;
  /* Button position */
  margin-top: 50px;
}

.slide-item:nth-of-type(1) .slide-inner .button-slider:hover {
  /* Button color on hover state */
  color: #fff000;
  background-color: #ff0000;
  border-color: #ff0000;   
}  

For second slide’s, use this:


.slide-item:nth-of-type(2) .slide-inner .button-slider {
  /* Button size */
  font-size: 20px;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 20px;
  padding-right: 20px;
  /* Button color */
  color: #ff0000;
  background-color: #fff000;
  border-color: #fff000;
  /* Button position */
  margin-top: 50px;
}

.slide-item:nth-of-type(2) .slide-inner .button-slider:hover {
  /* Button color on hover state */
  color: #fff000;
  background-color: #ff0000;
  border-color: #ff0000;   
}  

To apply custom CSS to your site, insert CSS code into Appearance > Customize > Additional CSS in your site dashboard.

Regards,
Kharis

Hi Kharis, could you help me please?
First of all if you want to see my site, its name is dazetechnology.com
In the past I made a modification thanks to your tips. First of all I added TCcustom java script plugin, then I write a code thanks to this plugin in order to delete default button of the slider and create custom button for each slide. So when i click on the button of each slide, the site update itself to another page.
The problem is born when I have created multilanguage site (ITA/ENG)
The button of the slide send user in the same page both in italian and english homepage. Sure you can understand if you see the site and if you try to click on the button of the first slider both in italian and english site.
Can you help me?
Thank you in advance

Hello Andrea,

From what you’ve written, you wanted to have different button URLs for each language?

Regards,
Kharis

Goodmorning,
exactly because I have created two pages with a specific url: one in english (dazetechnology/dazeplug) and the other one in Italian (dazetechnology/it/dazeplug-2). If the site is in Italian version, the button must open italian page while if the site is in english version, the same button must open english page.
I hope I explain well what is my problem.
Thank you in advance

Hello there,

To translate your button, replace your current jQuery code with this one:


jQuery(function($) {
 
   //Define the new buttons. Delete the lines you don't need
   var button1 = '<a href="http://example.org" class="roll-button button-slider">Button 1</a>'; //Slide 1
   var button2 = '<a href="http://example.org" class="roll-button button-slider">Button 2</a>'; //Slide 2
   var button3 = '<a href="http://example.org" class="roll-button button-slider">Button 3</a>'; //Slide 3
   var button4 = '<a href="http://example.org" class="roll-button button-slider">Button 4</a>'; //Slide 4
   var button5 = '<a href="http://example.org" class="roll-button button-slider">Button 5</a>'; //Slide 5

  //Hide the default button
  $('.slide-inner a').hide();
 
  //Add the new buttons. Delete the lines you don't need
  $( '.slide-item:nth-of-type(1) .slide-inner' ).append(button1); //Slide 1
  $( '.slide-item:nth-of-type(2) .slide-inner' ).append(button2); //Slide 2
  $( '.slide-item:nth-of-type(3) .slide-inner' ).append(button3); //Slide 3
  $( '.slide-item:nth-of-type(4) .slide-inner' ).append(button4); //Slide 4
  $( '.slide-item:nth-of-type(5) .slide-inner' ).append(button5); //Slide 5

  var lang    = $('html').attr('lang');

  if( lang == 'id-ID' ) {

    // Slide 1
    
    var btnLink1 = 'http://example.org/other-page';
    var btnText1 = 'Translated Button';    
      
    $( '.slide-item:nth-of-type(1) .slide-inner .button-slider' ).text(btnText1).attr('href', btnLink1); 

    // Slide 2
    
    var btnLink2 = 'http://example.org/other-page';
    var btnText2 = 'Translated Button';    
      
    $( '.slide-item:nth-of-type(2) .slide-inner .button-slider' ).text(btnText2).attr('href', btnLink2);

    // Slide 3
    
    var btnLink3 = 'http://example.org/other-page';
    var btnText3 = 'Translated Button';    
      
    $( '.slide-item:nth-of-type(3) .slide-inner .button-slider' ).text(btnText3).attr('href', btnLink3);          

    // Slide 4 
    
    var btnLink4 = 'http://example.org/other-page';
    var btnText4 = 'Translated Button';    
      
    $( '.slide-item:nth-of-type(1) .slide-inner .button-slider' ).text(btnText4).attr('href', btnLink4);

    // Slide 5
    
    var btnLink5 = 'http://example.org/other-page';
    var btnText5 = 'Translated Button';    
      
    $( '.slide-item:nth-of-type(1) .slide-inner .button-slider' ).text(btnText5).attr('href', btnLink5);          
    
  }  

  
});

Adjust the language code in this line in the code above:


if( lang == 'id-ID' ) {

Replace id-ID with your language code. You can find it by viewing the source code of your site which can be done through Tools > Web Developer > Page Source (on Firefox). Then see this line near the most top line.


<html lang="id-ID">

Regards,
Kharis

Hi Kharis,
I did what you have suggested me, unfortunately button still doesn’t work like I have explained you.
Could you see my Custom Java Script?
Do you have other tips in order to figure out my problem?
Thank you in advance
Andrea

Hello Andrea,

Please share your site URL here, so I can inspect what’s exactly going on. Be sure that the last code I suggested remains.

Regards,
Kharis

Hi Kharis:
URL is: http://dazetechnology.com
Thank you in advance
Andrea

Hello there,

Please try replacing the below line:


if( lang == 'it_IT' ) {

to


if( lang == 'it-IT' ) {

Let me know how it goes.

Regards,
Kharis

Hi Kharis,
It works!! It’s amazing.
Let me thank you for your appreciated work.
Kind regards
Andrea

You’re welcome!

Feel free to open a new topic if you need anything else.

Regards,
Kharis

Hi Kharis,
I have updated my web site (dazetechnology.com) and now I can’t see the button in the slide of my homepage. I dont know why because I have not done any change in the code of Javascript that you sent me about 4 months ago.
Could you help me?
I would like to restore the button in the slide for both English and Italian homepage.
Thank you in advance

Hello there,

Since you’ve enabled stopped slider, you should replace this line:

$( '.slide-item:nth-of-type(1) .slide-inner' ).append(button1); //Slide 1

to:

$( '.header-slider .slide-inner' ).append(button1); // Stopped slider 

Clear any applied cache after updating, otherwise the code changes won’t take effect.

Regards,
Kharis

Hi Kharis,
it doesn’t work like I wish because if I change from english to italian
page, the button has the same url and remind me to the english page in both
cases.

Hello there,

I visited your site once again; I saw the button gets translated correctly. Try clearing your site cache (if applied). You should clear your web browser history/cache as well.

Regards,
Kharis