For whatever reason, the phone number in the Divi header isn’t clickable by default.
Sure, many mobile phones will automatically detect the phone number and, when highlighted, will allow users to call the number but it feels like it should just be a clickable element that initiates the call.
While you could go the longer route and create a custom header.php file to edit this and add in the link, I don’t like this approach for one major reason:
it’s not very future proof.
If Elegant Themes changes other things in the header.php file down the road and you’re using a copy of the header.php file from an earlier version of Divi, you will be missing out on these new features.
As with most things in web development, I prefer to use a method that is:
- as future-proof as possible
- minimally invasive
- easy to set up and manage should we need to make changes later
A better way to make the header phone number clickable
With that being said, here is a very small and extremely lightweight bit of javascript code you can drop in your Divi settings (under the Integration tab) to instantly make the phone number in the Divi header a clickable element that initiates a phone call when clicked.
<script type="text/javascript">
jQuery(function($){
var thePhone = $('#et-info-phone').text();
$('#et-info-phone').wrap('<a href="tel:' + thePhone + '" rel="nofollow"></a>');
});
</script>If you’re unfamiliar of where to place this code, here is a screenshot of the Divi settings > Integration panel where you can paste it.
Wrapping Up
Have a better method for making the phone number in Divi clickable? I want to hear about it!
Drop your thoughts and suggestions in the comments below and let’s talk about it.
As always, happy creating!
