When you add a phone number and email in your DIVI theme customizer, the email is clickable but the phone number is not. Lets make the phone number clickable. This is a great feature to have when your user is on the mobile and wants to call you with a single click.
To add a phone number and email you would go to DIVI -> Theme Customizer -> Header&Navigation -> Header Elements and add the phone number as shown below.
By default this phone number is not clickable. The good thing is that we can actually add HTML in the phone number box and make it an anchor link so it will become clickable.
Replace your phone number by an anchor link by placing the following HTML in the phone number field as shown below. Make sure you change the phone number to the desired phone number.
<a href=”tel:1-650-123-1234″ rel=”nofollow”>(650)-123-1234</a>
Highlight the clickable phone number on mouse hover.
When you inspect the CSS on the other elements in the header like email or Social icons, you will notice that they all change the opacity on hover. The phone number field does not change the opacity on hover but we can target it with CSS easily.
Open your style.css in your child theme and paste the following CSS. Alternatively you can also go to DIVI -> Theme Options and paste the css in the Custom CSS box.
/* Change Opacity when you hover over the clickable phone number in DIVI */
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
I hope this tip helps you in making your number clickable. You can also put the HTML for phone number anywhere in your website to make the number clickable.
I would love to hear about how I can help your business website. I have specialized in using the DIVI theme from Elegant Themes since the past five years. If you would like to see the projects that I have completed as a DIVI Designer, please do have a look at my portfolio. Please contact me and I will get back to you immediately.