If you’re as much a fan of customizing and optimizing Divi websites as we are, you’ve probably noticed some possible improvement for the phone number feature in the upper left-hand corner of WordPress websites running Divi theme. The element containing your contact phone number is a span element, with no anchor nested anywhere above or below. The phone number element won’t even allow you to manually type in your own link.
We decided that providing a clickable phone number not only makes our WordPress site running Divi theme more unique, but would help create a more fluid user experience (and perhaps even help our conversions). We’d like to share this with you so that you can benefit from having a clickable phone number as well.
We scoured Stack Overflow to find some clean code to mash together into our own functional snippet. User gilly3 wrote up a great answer about converting an anchor to a span element. However we wanted to achieve the opposite effect of what his code did, so we had to make a few changes as well as add some code of our own. You can see the final result:
How this code works is simple: it takes the <span> element that currently houses the phone number info and converts it to an <a> element. There are other (shorter) methods available to do this; the main advantage here being that you get to keep the nifty icon to the left. We find that the phone number looks cleaner with the icon present, and didn’t find a noticeable difference in pagespeed with the code above.
You may paste this code under Divi > Options > Integrations. However under Appearance > Customize, don’t forget to include the country code before the phone number you enter (+1 for the United States, +44 for United Kingdom, etc.).