In this article, I’ll show you how to add a click to call in Elementor so that your website visitor can ‘click’ and make a call on both desktop and mobile. We’ll do all this without having to install another plugin. 

With the click to call feature in your Elementor website, your website visitors will be able to use their mobile phones to make calls straight from your website, or if they’re using a computer they’ll be able to connect to, for example, Facetime or any other app that can make calls.

This tutorial shows you three ways you can easily add a click to call to your website with no extra plugin. We’re going to add one in the header, one in a text widget, and another in the footer.

Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.

Video: Click To Call in Elementor Tutorial

Getting started to add a click to call in your website

Open the page you want to add a click to call with Elementor.

1. Adding Elementor Click to Call in your Header

First, you need to add social icons to your website. 

To do this; go to your Elementor editor, in the widgets area on the left, find the social icons widget and drag it to your header section (01:37). 

When you select your social icons widget, in the Edit Social Icons area on the left you can use the Add Item button to add a new social icon from the icon library (01:45)

You can search for the phone icon, insert it, and under the Link option you paste in your phone contact, no need for any HTML tag, simply type in; “tel”, a semicolon (:) then your number, with the country code included (tel:+256773111222), without spaces. When you’re done, click the update button at the bottom.

To Read: Create a Free Sticky Transparent Header in Elementor

2. Adding Elementor Click to Call in your Text Widget

To add a click to call in your text widget:

Go to your widgets area and drag a text editor widget to your section (02:36). 

Select your text widget and in the Edit Text Editor area on the left, under Content type in your phone number, for example, ‘Call +256 773 111 222’ (with spaces). Select the phone number, go to insert link option/icon (03:19)

In the Paste URL box, write in “tel:” then the phone number, but without the spaces (tel:+256773111222), then click apply (↩) (03:31), then click the update button at the bottom.

When you reload the preview page, you’ll see that when you click on the phone number you get a prompt to make a call on either your computer or your mobile.

Also Read: Create an Elementor Custom Mouse Cursor using Text, Icons, Images or Lottie Animation

3. Adding Elementor Click to Call in the Footer

To make use of the click to call feature in the footer, we’re going to use an icon list.

In your widgets area, search for the icon list widget and drag it to your footer section (04:08)

Select your icon list, in the Edit Icon List area > Content, delete list items 2 and 3, then on the Text option of list item #1 add a phone number (+ (256) 773 111 222), under Icon, select the phone icon from your icon library, then under Link, write tel:+256773111222 (without spaces), click the update button then preview.

To Read: How to Compress Web Images for Free by upto 94% (JPEG, PNG and WebP Image Optimization)

In closing

You can also do some styling on your click to call section for example the color, appearance of your phone number, or whatever else you want to edit to your preference.

The click to call feature can be a useful one to add to your WordPress or Elementor website, for example, if you’re an emergency service provider or you specialize in consultancy or anything of the sort, it makes it easier for your visitors to promptly contact you.

Hope you enjoyed this tutorial and found value in it.

If you have any comments or questions, let me know below. And for more tips and tutorials, make sure you subscribe to my youtube channel and newsletter.