Adding a clickable phone number for smartphones to the header slider subtitle

I want very much to have my phone number on the landing page in a format that is clickable for smartphones. I have the number in the slider subtitle but I really would like for smartphone users to be able to click it and call. Any suggestions? If I can’t have that work with the subtitle, can I get the phone number into the header elswhere in clickable format?

Hello there,

You should wrap your number with an A tag and put tel: value into its href attribute to make a dial-able number. Since the slide subtitle input box doesn’t accept any HTML code, you can manually do this with a couple of jQuery code. 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($){

      if( $('.text-slider .subtitle').length ) {

        var phone     = '12345';
        var phoneHTML = ' <a href="tel:'+phone+'">'+phone+'</a>';

        $('.text-slider .subtitle').append(phoneHTML);

      }

    })(jQuery);

4 . Update

Regards,
Kharis

This worked beautifully! Unfortunately, the color of the number has been changed to dark blue and that color has a poor contrast with the photo in the slider. Is there a way to pick a different color for just that number? It remained white on my desktop version but on the phone, since it now a link, it turned dark blue.

Hello there,

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

    .text-slider .subtitle a {
      color: #fff000;
    }

    .text-slider .subtitle a:hover {
      color: #ff0000;
    }

Regards,
Kharis

Kharis, I’d buy you a beer if we lived in the same town. You have helped me several times now in making real improvements in my site. I truly appreciate it.

Thank you so much for your kindness. :slight_smile:

Have a nice weekend!