August 15, 2023

How to Link Phone Number in Elementor and Make it Clickable

Play Video

Learn how to link phone number in Elementor to let your users dial the number straight away. WPLearningLab will show you how to make your phone numbers clickable with a few simple steps. And the best part,  you can place it in any element where you can add a link.

Understanding Clickable Phone Numbers

Clickable phone numbers are a nifty feature that can make a big difference in user experience. They allow your website visitors to dial your number directly from your website by simply tapping on the number. This is particularly useful for mobile users as it saves them the hassle of memorizing or noting down the number.

How to Make Phone Number Clickable in Elementor

Now, let’s get down to business. Here’s how you can make a phone number clickable in Elementor:

  1. Open the Elementor page where you want to add the clickable phone number.
  2. Add the phone number as an icon list, headline element, or regular text element.
  3. Click on the phone number element to open the editing options.
  4. Look for the ‘Link’ option and type “tel:” followed by your phone number.

Here’s an example of what the code should look like:


Remember to adjust the phone number style based on your location. For example, North American phone numbers usually have an area code and a seven-digit number, while other countries might have a different format.

Link Telephone Number to Appear Only on Mobile Devices

Clickable phone numbers are great for mobile users, but they don’t work as well on desktops. But don’t worry, Elementor has a solution for that. You can set the link telephone number to only appear on mobile devices. Here’s how:

  1. Duplicate the phone number element.
  2. Remove the link from the duplicated element.
  3. Go to the ‘Advanced’ settings of the duplicated element.
  4. Scroll down to ‘Responsive’ and set the visibility to hide on tablet and mobile. This will make the non-clickable phone number appear only on desktops.
  5. Now, go to the ‘Advanced’ settings of the original (clickable) phone number element.
  6. Set the visibility to hide on desktop. This will make the clickable phone number appear only on mobile devices.

WordPress Phone Number Link with Multiple Widgets

The beauty of Elementor is that it allows you to make more than just phone numbers clickable. You can apply the same concept to a button, an image, or even a piece of text. Anything that you can add a link to can be made into a clickable phone number. Just follow the same steps as above, but instead of a phone number, you’ll be adding the link to your chosen element.

Best Practices for Using Clickable Phone Numbers

Now that you know how to link phone number in Elementor, here are a few tips to make the most of this feature:

  • Placement is key
    Place your clickable phone number where it’s easily visible. The header, footer, or contact page are common choices.
  • Consider your audience
    If the majority of your audience is mobile users, a clickable phone number can be a great convenience. However, if most of your traffic comes from desktop, you might want to hide the clickable number on desktop views.
  • Use clear call-to-action (CTA)
    Instead of just displaying the number, use a clear CTA like “Call us now at [number]” to encourage users to take action.
  • Test on different devices
    Make sure to test the clickable phone number on different devices and browsers to ensure it works correctly across all platforms.

Link Phone Number – Conclusion

You’ve just learned how to link phone number in Elementor, making it clickable for a better user experience. This small but impactful change can make a world of difference for your mobile users, making it easier for them to reach out to you directly from your website. So why not give it a try? Remember, the key to a great website is in the details. Happy website building!

Required Resources

Elementor Logo
Free Options
Credit to WPLearningLab
WPLearningLab is a YouTube channel dedicated to providing comprehensive WordPress tutorials and resources for users of all skill levels. With a focus on simplifying complex concepts, the channel offers valuable insights on themes, plugins, and site optimization, as well as troubleshooting tips and best practices for creating and maintaining a successful WordPress website.
How to Link Phone Number in Elementor and Make it Clickable
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.