Make Phone Number Click to Call in the Divi Theme

Last modified Aug 2, 2021
Difficulty Beginner
Language HTML

Watch Tutorial

Useful links

Divi Switch
Divi Space Membership

Transcript:

Hey everybody, David here from Divi Space and today I’m gonna show you how to make a phone number clickable to call in the Divi Theme. Doing this will make it easier for clients to call you! You can make a phone number clickable using HTML, however, various browsers will respond differently, waiting for the user to provide direction. In my case, it asks to open the FaceTime App. The phone number field in the Divi Theme can be found by visiting Theme Customizer > Header & Navigation > Header Elements > Phone Number

Now as you can see, the phone number in the secondary menu is just a text. The code you need to insert here to make it click to call can be found on our website. The link is in the description of the video. Let’s paste it here. Save changes and hover over the phone number. It’s clickable now! Let’s click it. It asks me to open a default phone app set on my computer.

And great news for our members, this feature is also available in the Divi Switch plugin that is included in the membership plans. Once the Divi Switch is installed on your website, head over to the Divi Switch settings by going to the Divi Theme settings and enable the switch “Make Phone Number Click To Call” and it will automatically dial the number for the user that you added to the divi settings. Simple, right? Thanks for watching the video. We’ll see you in the next tutorial.

HTML

<a href="tel:0412341234">(04) 1234 1234</a>

or

<a href="tel:0412341234">Click to call!</a>



 

Does this snippet (still) work?

Please let us know in the comments if everything worked as expected. We have tested this code with the Version: 4.0.1 of the Divi Theme.
If you think this code saved you time, we will be happy to receive a comment! :)

Your Comments

9 Comments

  1. Dr SHL

    Works perfectly, thanks so much!

    Reply
  2. Sandy

    Yes, still works in Divi… awesome blog. ty.

    Reply
  3. Shaun

    Thanks very much for your easy help on this

    Reply
  4. Barbra

    I’m searching for the DIVI Switch plugin and can not find it..?????

    Reply
  5. Kim

    Nice. It works and i’m very happy with it!

    Reply
  6. jack

    Got it to work,
    in visual editor , in url you should have ” tel:(000)000-0000″ then it works.

    Reply
  7. jack

    How to make the Call to Action as to call out when clicked? (in divi)
    Thanks for your help and your guides on your site! Appreciated!
    Jack,

    Reply
    • <div class="apbct-real-user-wrapper">
    <div class="apbct-real-user-author-name">Anna Kurowska</div>
    <div class="apbct-real-user-badge" onmouseover="apbctRealUserBadgeViewPopup('apbct_trp_comment_id_342770');" onmouseout="apbctRealUserBadgeClosePopup(event);">
        <img src="https://wpzone.co/wp-content/plugins/cleantalk-spam-protect/css/images/real_user.svg" class="apbct-real-user-popup-img" style="align-self: center;">
        <div class="apbct-real-user-popup apbct-trp-popup-desktop" id="apbct_trp_comment_id_342770">
            <div class="apbct-real-user-title">
                <p class="apbct-real-user-popup-header">The Real Person!</p>
                <div class="apbct-real-user-popup-content_row">
                    <img src="https://wpzone.co/wp-content/plugins/cleantalk-spam-protect/css/images/real_user.svg" class="apbct-real-user-popup-img">
                    <span class="apbct-real-user-popup-text">Author <b>Anna Kurowska</b> acts as a real person and verified as not a bot.</span>
                </div>
                <div class="apbct-real-user-popup-content_row">
                    <img src="https://wpzone.co/wp-content/plugins/cleantalk-spam-protect/css/images/shield.svg" class="apbct-real-user-popup-img">
                    <span class="apbct-real-user-popup-text">Passed all tests against spam bots. Anti-Spam by CleanTalk.</span>
                </div>
            </div>
        </div>
    </div>
    <div class="apbct-real-user-popup apbct-trp-popup-mob" id="apbct_trp_comment_id_342770">
        <div class="apbct-real-user-title">
            <p class="apbct-real-user-popup-header">The Real Person!</p>
            <div class="apbct-real-user-popup-content_row">
                <img src="https://wpzone.co/wp-content/plugins/cleantalk-spam-protect/css/images/real_user.svg" class="apbct-real-user-popup-img">
                <span class="apbct-real-user-popup-text">Author <b>Anna Kurowska</b> acts as a real person and verified as not a bot.</span>
            </div>
            <div class="apbct-real-user-popup-content_row">
                <img src="https://wpzone.co/wp-content/plugins/cleantalk-spam-protect/css/images/shield.svg" class="apbct-real-user-popup-img">
                <span class="apbct-real-user-popup-text">Passed all tests against spam bots. Anti-Spam by CleanTalk.</span>
            </div>
        </div>
    </div>
</div>

      Follow the tutorial above 🙂 You need to use the second version of the HTML code, <a href="tel:0412341234">Click to call! </a>

Submit a Comment

Your email address will not be published. Required fields are marked *

Next snippet Make Divi 4.0 Header Sticky or Fixed on the Scroll
Previous snippet Open Social Links in New Tab