How to Make a Phone Number Clickable in Divi

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.

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.

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>