Make Phone Number Click to Call in the Divi Theme

Last modified Oct 21, 2019
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.

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! 🙂

HTML

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

 

Your Comments

3 Comments

  1. 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
    • Anna Kurowska

      Follow the tutorial above 🙂

  2. jack

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

    Reply

Submit a Comment

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

Receive notifications about our new blog posts.

Before You Start

Build a Child Theme

Child themes are incredibly important for the overall look, feel, and navigation of your website, so we encourage you to take the time to get to know the content. This will help your web design and development processes tremendously. That’s why we’ve made it super easy to build a child theme for Divi or Extra in seconds!

Generate Child Theme

How to Add Java Script and jQuery to Divi

There are four ways you can add JavaScript or jQuery to a Divi website: use the code module, the Divi Theme Options console, enqueue scripts using the functions.php file, or using a plugin.

Read More

How to Add CSS to Divi

Divi users can choose between five different methods to add custom CSS to their websites. Read more about these various methods you can use to add custom CSS to your Divi theme, as well as better understand the pros and cons of each method.

Read More