Make Divi Header Phone Number into Clickable Link

This post may contain referral links which may earn a commission for this site

Make Divi Header Phone Number into Clickable Link

I'm often asked how to make the phone number in the Divi Theme top header into a clickable link (i.e. a "Click to Call" link). Here's how to do it:

Making the Phone Number Clickable via the Customizer

Thanks to Kepler for pointing out that it's actually possible to make the phone number clickable by entering HTML code into the phone number field within the customizer. The phone number field is located at "Divi > Theme Customizer > Header & Navigation > Header Elements > Phone Number".

Here's an example of the HTML code you can enter into this field to get a click-to-call phone number link:

<a href="tel:0412341234" rel="nofollow">(04) 1234 1234</a>

Making the Phone Number Clickable using jQuery

If you're stuck on an older version of Divi, you may find that trying to add the link via the customizer does not work. In that case, you can add the link using some JavaScript / jQuery, like so:

jQuery(function($){
	$('#et-info-phone').wrap('<a href="tel:+6112341234" rel="nofollow"></a>'); 
});

Changing the Hover Style using CSS

You may notice that the phone number is not highlighted on hover as happens for the other links in the top header. We can fix this with the following CSS:

#et-info-phone:hover { 
  opacity: 0.7; 
  -moz-transition: all 0.4s ease-in-out; 
  -webkit-transition: all 0.4s ease-in-out; 
  transition: all 0.4s ease-in-out; 
}

Making the Link Clickable using Divi Booster

I have added the ability to make phone numbers into clickable links as a feature in my Divi Booster plugin.

To use it, go to your WordPress admin area and browse to "Divi > Divi Booster > Header > Top Header". There you'll see the following option:

Simply tick the box to make the phone number a click-to-call link, and optionally add a different number to dial. Divi Booster takes care of the hover formatting too.

This feature is available in Divi Booster version 2.1.0 onwards.

Want get more out of Divi?

Hundreds of new features for Divi
in one easy-to-use plugin

22 Comments

  1. "Making the Phone Number Clickable via the Customizer"

    (04) 1234 1234

    It worked like a breeze. Mega thanks

    Reply
  2. The text on this site overlaps each other making it impossible to read. I tried opening it in Chrome, Opera and Edge. I'd like to be able to use this tip but I can't read the instructions.

    Reply
    • Hi ec, thanks for letting me know. It looks like Divi had messed up the line-height of the text in the post. It should hopefully be fixed now (though you may need to clear your browser cache to see the changes). Let me know if you still have problems viewing it. Thanks again!

      Reply
  3. This worked like a charm, BUT the phone icon is missing 🙁

    Reply
    • Hi Luis, sorry to hear that. Is there any chance you're able to send me a link to the site you're working on so that I can take a look? Cheers!

      Reply
  4. I'd like to change the color of number and the email to match colors I've implemented in my site with hex codes I took from Google color picker. Is there a way to do that?

    Reply
  5. How can I get the phone number to show up at the top of the screen in mobile view? I cannot find a way to do this anywhere, and it seems all my clients want this feature – so they can be reached by mobile from any page. Anyone able to assist?

    Reply
    • Hi Kim, if you have the phone number enabled on the secondary header ("Divi > Theme Customizer > Header & Navigation > Header Elements > Phone Number") it should show up on mobiles too. You can turn this into a click-to-call link using any of the methods in this post:

      https://divibooster.com/make-divi-header-phone-number-into-clickable-link/

      Does that do what you need, or did you have something else in mind?

      Reply
  6. Hi Dan,

    Can you make this a click to SMS link?

    Reply
    • Hi Peter, the technique described here won't work, but I've put together a quick post with another method of adding an click-to-SMS link to Divi. Let me know if you have any questions about it, etc.

      Reply
  7. Hello,
    Would it be possible to have this clickable link only on the phone?
    Because finally it is on the phone that it is the most useful 🙂 and not on the rest.

    Bruno

    Reply
    • Hi Bruno,

      You could add the link as described in the post, then add this CSS:

      @media only screen and (min-width: 980px) {
          #et-info-phone a {
              pointer-events: none;
              cursor: default; 
          }
      }
      

      It basically stops the link being clicked (and looking clickable) on desktops.

      Reply
  8. You don't need to add the jquery code. You can write <a href="0412341234" rel="nofollow">(04) 1234 1234</a> directly in the theme customizer.

    Reply
    • Thanks for pointing this out Kepler. I didn't realize it was possible to add HTML in to the phone number field. I've updated the post to include your suggestion, and have removed the jQuery section as your method is much neater. Cheers!

      Reply
      • Good job 😉 but you need to add tel: to the href – <a href="tel:041… I forgot about this in previous comment. Cheers!

        Reply
        • Looks like we both missed that one! Thanks Kepler, I've updated the post 🙂

          Reply
      • I am using an older version of Divi for a project where I cannot update it, and putting the html directly into the phone field does not seem to work. It shows the tags on the page. Could you share your other way you did this before making the edit to the post, please?
        Thanks!

        Reply
        • Hey Kadon, I've re-introduced a section with the (jQuery) code for making the phone field clickable. This should work on older versions of Divi such as yours, but let me know if you have any trouble implementing it. Cheers!

          Reply
  9. Is there a way to make a phone number in the footer clickable?

    Reply
    • Hi Chris, you can add a clickable phone number in the footer like so:

      <a href="tel:0412341234">(04) 1234 1234</a>

      Just replace your number with your own. Note that the bit after "tel:" is the number that will actually be dialed.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Hundreds of new features for Divi
in one easy-to-use plugin

22 Comments

  1. "Making the Phone Number Clickable via the Customizer"

    (04) 1234 1234

    It worked like a breeze. Mega thanks

    Reply
  2. The text on this site overlaps each other making it impossible to read. I tried opening it in Chrome, Opera and Edge. I'd like to be able to use this tip but I can't read the instructions.

    Reply
    • Hi ec, thanks for letting me know. It looks like Divi had messed up the line-height of the text in the post. It should hopefully be fixed now (though you may need to clear your browser cache to see the changes). Let me know if you still have problems viewing it. Thanks again!

      Reply
  3. This worked like a charm, BUT the phone icon is missing 🙁

    Reply
    • Hi Luis, sorry to hear that. Is there any chance you're able to send me a link to the site you're working on so that I can take a look? Cheers!

      Reply
  4. I'd like to change the color of number and the email to match colors I've implemented in my site with hex codes I took from Google color picker. Is there a way to do that?

    Reply
  5. How can I get the phone number to show up at the top of the screen in mobile view? I cannot find a way to do this anywhere, and it seems all my clients want this feature – so they can be reached by mobile from any page. Anyone able to assist?

    Reply
    • Hi Kim, if you have the phone number enabled on the secondary header ("Divi > Theme Customizer > Header & Navigation > Header Elements > Phone Number") it should show up on mobiles too. You can turn this into a click-to-call link using any of the methods in this post:

      https://divibooster.com/make-divi-header-phone-number-into-clickable-link/

      Does that do what you need, or did you have something else in mind?

      Reply
  6. Hi Dan,

    Can you make this a click to SMS link?

    Reply
    • Hi Peter, the technique described here won't work, but I've put together a quick post with another method of adding an click-to-SMS link to Divi. Let me know if you have any questions about it, etc.

      Reply
  7. Hello,
    Would it be possible to have this clickable link only on the phone?
    Because finally it is on the phone that it is the most useful 🙂 and not on the rest.

    Bruno

    Reply
    • Hi Bruno,

      You could add the link as described in the post, then add this CSS:

      @media only screen and (min-width: 980px) {
          #et-info-phone a {
              pointer-events: none;
              cursor: default; 
          }
      }
      

      It basically stops the link being clicked (and looking clickable) on desktops.

      Reply
  8. You don't need to add the jquery code. You can write <a href="0412341234" rel="nofollow">(04) 1234 1234</a> directly in the theme customizer.

    Reply
    • Thanks for pointing this out Kepler. I didn't realize it was possible to add HTML in to the phone number field. I've updated the post to include your suggestion, and have removed the jQuery section as your method is much neater. Cheers!

      Reply
      • Good job 😉 but you need to add tel: to the href – <a href="tel:041… I forgot about this in previous comment. Cheers!

        Reply
        • Looks like we both missed that one! Thanks Kepler, I've updated the post 🙂

          Reply
      • I am using an older version of Divi for a project where I cannot update it, and putting the html directly into the phone field does not seem to work. It shows the tags on the page. Could you share your other way you did this before making the edit to the post, please?
        Thanks!

        Reply
        • Hey Kadon, I've re-introduced a section with the (jQuery) code for making the phone field clickable. This should work on older versions of Divi such as yours, but let me know if you have any trouble implementing it. Cheers!

          Reply
  9. Is there a way to make a phone number in the footer clickable?

    Reply
    • Hi Chris, you can add a clickable phone number in the footer like so:

      <a href="tel:0412341234">(04) 1234 1234</a>

      Just replace your number with your own. Note that the bit after "tel:" is the number that will actually be dialed.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *