[Limited Time Offer] Get 40% off MEMBERSHIP PLUS before it's gone! 👉Get This Deal
Mark Hendriksen Logo

How to Make a Phone Number Clickable in Divi

Mark Hendriksen | February 18, 2019 | 8 Comments
Disclosure Note: Sometimes, I include links in my articles that can earn me money. It won't cost you anything, but it helps me pay for coffee ☕ so I can make more helpful content.

Just like mailto: links you can also make a phone number clickable. Most devices will detect phone numbers on your web pages and do the linking for us, but this doesn’t happen all the times.

Here is the snippet for a clickable phone number

<a href="tel:123456789">123-456-789</a>

You can also do this for text

<a href="tel:5554280940">Call us</a>

If you are using a text module in Divi than you can add this snippet in the text tab.

Phone link in text module

Styling phone links

If you are using Divi and a text module than it is very easy to change the styles. Go to the design tab and then under the text options switch over to the link. Here you can change the styles for the link.

Styling phone links

You can also do this with CSS. This pdeudo selector will search out all the Tel: on your website.

a[href^="tel:"] {
  color: blue;
}

Adding microdata

To let search engines better know that this is a phone number you might want to add some microdata to it. You can find some more examples at schema.org.

<div itemscope itemtype="http://schema.org/LocalBusiness">
<span itemprop="telephone"><a href="tel:+18506484200">
850-648-4200</a></span>
</div>

Article by

Mark Hendriksen

I am the founder here at MarkHendriksen.com a blog website for Web design, WordPress, and Divi. Learn more about Mark

8 thoughts on “How to Make a Phone Number Clickable in Divi”

  1. Hi Dave,

    You can do this by using a button module and in the link field you place this:
    tel:+123456789 replace the number with your own.

    Reply
  2. Hi how would you do this so a pop up shows if you are on a non callable device nut it works as shown on a callable device. Thanks

    Reply
  3. I have changed the phone no. and displays fine however, when i test the phone no. to call it. The phone no. it rings is the old mobile no. how do I find where this is located to change. I edited the phone no. in the button settings as above. I did not build the site.

    Reply
  4. Hello! im trying make this but in a link Image Module but i dont know how. its possible make it?

    i tryed put in the field of URL “tel:123456789” but this dont work.

    Someone have some idea?

    Regards !

    Reply

Leave a Comment

0 Shares
Share
Pin
Tweet