Three CTA buttons in Welcome area?

Hi,
Is it possible to have 2 additional CTA buttons in the Welcome area? I’ve seen a question posted about having a second button and I tried posting the javascript twice with a few adjustments but I’m a novice at this, so hoping you can help me with the right codes.

Thanks!
Asha

Hello Asha,

Yes, it’s possible. Please follow these 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'

   if( $('.welcome-button').length ) {
		
      // Button 1     
      var textButton2 = 'Button 2';
      var linkButton2 = 'http://yoursite.com/link-for-button-2';
      
      // Button 2	
      var textButton3 = 'Button 3';
      var linkButton3 = 'http://yoursite.com/link-for-button-3';      
    
      $('.welcome-button').clone().addClass('second-welcome-button').attr('href', linkButton2).text(textButton2).appendTo('.welcome-info');
      $('.second-welcome-button').clone().addClass('third-welcome-button').removeClass('second-welcome-button').attr('href', linkButton3).text(textButton3).appendTo('.welcome-info');
    
   }

})(jQuery); 

  1. Update
  2. Add this CSS code into Appearance > Customize > Additional CSS

.third-welcome-button {
  margin-left: 4px;
}

Regards,
Kharis

Hello athemes team…

I have spending a lot of time and days trying to personalize some details at: www.tyguamague.com and already tried some suggestions from here, but couldn’t make it work. (Actually installed the plugins you’ve recommended: custom css, and Custom java…) but, I’m afraid I couldn’t make it.

  1. ¿How to change the background colors of different buttons?
  2. Would love to create three buttons in the welcom area.
  3. How to change the color from the circle service icons in the differents widgets?, they always got red a look so weird…

Please, rescue me
Thanks!

Hello @pilimotta,

The common reason of why custom jQuery code won’t work properly as expected is jQuery error found on other script. You can check it with the web browser’s console tool. Please visit this link which will tell you how.

> 1. How to change the background colors of different buttons?

Add this CSS code into Appearance > Customize > Additional CSS in your site dashboard.


/* Second button */
.welcome-button.second-welcome-button {
  background-color: #ff0000;
  box-shadow: 0 5px 0 #b70505;
  color: #fff000;
}

/* Third button */
.welcome-button.third-welcome-button {
  background-color: #fff000;
  box-shadow: 0 5px 0 #d7cb03;
  color: #ff0000;  
} 

2. Would love to create three buttons in the welcom area.

Please follow the instructions I’ve provided and check your site with the web browser’s console tool to verify whether jQuery error presents.

> 3. How to change the color from the circle service icons in the differents widgets?, they always got red a look so weird

Firstly, you have to define a custom class name to the row where your service widget belongs to. e.g. my-services

Cloudup

Then add this CSS code into Appearance > Customize > Additional CSS.


.my-services .service-icon {
  background-color: #ff0000;
  color: #fff000;
}

Regards,
Kharis

Dear Kharis,

¡Thank you very much for your answer!. I really appreciate your help…

I analize my site as indicated through firefox developer console… I fond some red lines, three of them are in the first part:

"06:14:44.149 CustomizableUI:Key element with id ‘key_webide’ for widget ‘webide-button’ not found! 1 CustomizableUI.jsm:1365
06:16:20.137 CustomizableUI:Key element with id ‘key_webide’ for widget ‘webide-button’ not found! 1 CustomizableUI.jsm:1365
07:27:17.306 CustomizableUI:Key element with id ‘key_webide’ for widget ‘webide-button’ not found! 1 CustomizableUI.jsm:1365

10:52:41.755 CustomizableUI:Key element with id ‘key_webide’ for widget ‘webide-button’ not found! 1 CustomizableUI.jsm:1365 "

BUT, ¿What should I do about them?.

Also, I tried your second suggestion to change the circle around Service -icon, but couldn’t make it work… I’ suspecting wont´t work until I have resolve the red lines above.

Could you please Light up again my path?

I have to insist: THANK YOU!!!

Thank you, Kharis. All sorted!
Cheers,
Asha

Hello @pilimotta,

Thank you for the followup! Please share your site address here, so I can take a closer look directly.

Regards,
Kharis

You’re welcome, Asha!

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

Dear Kharis,

Sorry, I didn’t realize you may need my site: www.tyguamague.com

Thank you!

Hello @pilimotta,

As you’re using Sydney theme which has different slide markup and button class name, you have to replace the jQuery code I’ve suggested with this one to add 2 more slide buttons.


;(function($) {

   'use strict'

   if( $('.button-slider').length ) {

      var newSlideButton = function($text, $link, $class) {
        var btn = '<a class="roll-button button-slider '+$class+'" href="'+$link+'">'+$text+'</a>';
        $('.header-slider .slide-inner').append(btn);
      }
     
      // Button 1     
      var textButton2 = 'Button 2';
      var linkButton2 = 'http://yoursite.com/link-for-button-2';

      newSlideButton(textButton2, linkButton2, 'slide-button-2');
      
      // Button 2	
      var textButton3 = 'Button 3';
      var linkButton3 = 'http://yoursite.com/link-for-button-3';      
    
      newSlideButton(textButton3, linkButton3, 'slide-button-3');
      
   }

})(jQuery); 

To style the new buttons color, use this custom CSS code:


/* Second button */

.slide-button-2 {
  margin-right: 3px;
  background-color: #ff0000;
  border-color: #ff0000;
  color: #fff000;  
}

.slide-button-2:hover {
  color: #ff0000;  
}  

/* Third button */

.slide-button-3 {
  background-color: #fff000;
  border-color: #fff000;
  color: #ff0000;  
}

.slide-button-3:hover {
  color: #fff000;  
}  

To colorize the service icon, use this CSS code:


.my-services .roll-icon-box .icon {
  border-color: #fff000;
}

.my-services .roll-icon-box .icon i {
  color: #fff000;
}

Dear Kharis,

I wish some day could thank you (in a proper way), maybe inviting you a Colombian coffee at Bogotá (capital city).
You safe my day!

Sorry because I couldn’t wrote you back before.

Best wishes
your new fan, pili ! :slight_smile:

Hello athemes team,

I was wondering if it is possible for each slide in the header slider to have it’s own CTA button?

I NEED YOUR HELP!

Please and thank you ?

Nichole

Hello Nichole,

Please checkout this snippet that might be what you’re looking for.

Regards,
Kharis

The Jquery code you sent for different CTA buttons with each slide works with the Sydney pro theme?

Hello there,

Because the pro version has the same code base and markup structure, yes it works.

Regards,
Kharis

Kharis,

I downloaded the Custom Javascript plug-in and input the code but it didn’t work…am I missing something?

Thanks

Hello there,

I am sorry, it isn’t your mistake. But, the code is for Sydney theme which has different main slider markup than Moesia.

Regards,
Kharis

Kharis,

I don’t understand your reply, I’m currently using Sydney pro theme, I downloaded the Custom javascript plug-in and input the code and it didn’t work…am I missing something? possibly in the css section on the customize screen?

thanks

Hello there,

I am sorry I didn’t notice it since you’ve wrote your queries in this topic under Moesia theme channel. You should have posted your own topic on Sydney Pro support channel.

To add individual slide buttons, you can use this jQuery snippet.

Regards,
Kharis