Today we are here with some new stuff. In Divi theme, we have seen that the phone text in the header is not callable. And so the visitor cannot click that Phone Text, In this blog post, we are going to show how we can convert simple phone text in the header to the Call-able Phone Link. We can achieve this by two different methods, Firstly we can add certain code to the header.php file using the editor and Secondly we can use certain codes in the Divi Theme Option.
Method One:-
Follow the steps for converting simple phone text to call-able phone link using the header.php file
- Please go to Appearance >>Editor>>header.php file.
- Add the following code given below to the header.php file as shown in the below image.
|
1 |
<span id="et-info-phone"><a href="tel:<?php echo ( $et_phone_number ); ?>"><?php echo et_sanitize_html_input_text( $et_phone_number ); ?></a></span> |
Method Two:-
Follow the steps for converting simple phone text to call-able phone link using some code changes using Divi Theme Option
- Please go to Appearance >> Customize >> Header & Navigation >> Header Elements >> Place the Phone Number in the PHONE NUMBER FIELD. Refer the below image
- Now please add the following code given below to Divi >> Theme Options >> Integration >> “Add code to the < head > of your blog”(Please refer the below image).
|
1 2 3 4 5 6 7 8 9 10 |
<script type="text/javascript"> jQuery(document).ready(function(){ var number = jQuery('span#et-info-phone').text(); var tel = "tel:"+ number; jQuery('span#et-info-phone').text(''); jQuery('span#et-info-phone').prepend('<a href=""></a>'); jQuery('span#et-info-phone a').text(number); jQuery('span#et-info-phone a').attr('href',tel); }); </script> |
Hope this post helps you and feel free to comment below for any other help.
Great, easy solution. Thanks for this!
Happy to Help you. 🙂