When you add a phone number and email in your DIVI Theme Customizer, the email is clickable but the phone number is not. Let’s 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.
Phone Number and Email in DIVI Theme Customizer
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>
Phone Number as a clickable link in DIVI
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 */
#et-info-phone:hover {
opacity: 0.7;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
} ease-in-out;
}
I hope this tip helps you in making your phone number clickable. You can also put the HTML for phone number anywhere in your website to make the number clickable. For more such tips on WordPress and DIVI, check out my DIVI Blog.
I would love to hear about how I can help you with your business website. I have a Masters in Computer Science from Pace University, New York. Having worked in the software industry for many years, I am now freelancing and have specialized in using the DIVI theme from Elegant Themes, since the past eight years. Do have a look at my portfolio to view my other completed projects. Feel free to contact me and I will get back to you immediately.
0 Comments