How To Add Clickable Phone Numbers In WordPress Elementor

How To Add Clickable Phone Numbers In WordPress Elementor



Whether you’re a small business owner, a blogger, or running an e-commerce site, this feature can significantly improve user engagement and conversions.

In this guide, we will walk you through the step-by-step process of adding clickable phone numbers to your WordPress website using the popular Elementor page builder.

You’ll learn how to seamlessly integrate this feature into your design, making it effortless for visitors to initiate phone calls with just a simple tap on their mobile devices.

So, let’s dive in and empower your website with the convenience of clickable phone numbers, enhancing both user experience and your website’s overall functionality.

Why Add Clickable Phone Numbers?

Before we dive into the how-to guide, let’s take a moment to understand why adding clickable phone numbers is important:

  • Enhanced User Experience: Clickable phone numbers make it incredibly easy for visitors to reach out to you. With just a tap, they can initiate a call without the hassle of manually copying and pasting the number into their phone’s dialer.
  • Improved Mobile Usability: As mobile usage continues to rise, catering to mobile users is crucial. Clickable phone numbers are especially valuable for mobile visitors who want to contact you while on the go.
  • Higher Conversion Rates: When potential customers can contact you effortlessly, it increases the likelihood of them taking action. Whether it’s scheduling an appointment, making a reservation, or requesting more information, clickable phone numbers can drive conversions.

How Do I Add Clickable Phone Numbers in WordPress Using Elementor?

In today’s fast-paced digital world, optimizing your website for user convenience is essential. 

One simple yet effective way to do this is by adding clickable phone numbers to your WordPress website created with the Elementor page builder. 

By enabling visitors to initiate phone calls with a single tap on their mobile devices, you enhance user experience and potentially boost conversions.

In this article, we’ll walk you through a step-by-step guide on how to seamlessly integrate clickable phone numbers into your WordPress website using Elementor.

Step 1: Install and Activate Elementor.

If you haven’t already, you’ll need to install and activate the Elementor page builder plugin. You can do this by navigating to your WordPress dashboard, clicking on “Plugins,” and then selecting “Add New.” Search for “Elementor,” install the plugin, and activate it.

Step 2: Create or Edit a Page with Elementor.

Once Elementor is active, you can either create a new page or edit an existing one where you want to add the clickable phone number.

To create a new page, go to “Pages” in your WordPress dashboard, click “Add New,” and give your page a title.

To edit an existing page, find the page you want to edit in the “Pages” section and click “Edit.”

Step 3: Add a Text Element.

In Elementor, you build pages by adding sections and elements. To insert a clickable phone number, you’ll need to add a text element:

  • Click on the “+” icon to add a new section or use an existing one.
  • Drag and drop the “Text Editor” widget into the section.

Step 4: Enter Your Phone Number.

In the text editor widget, enter your phone number. Make sure to format it correctly, including the country code if applicable (e.g., +1 for the United States).

Step 5: Make the Phone Number Clickable.

To make the phone number clickable, you need to add a hyperlink to it:

  • Highlight the phone number in the text editor.
  • Click the link icon in the Elementor editor toolbar.
  • In the link settings, select “Custom URL.”
  • In the URL field, enter “tel:” followed by your phone number (e.g., tel:+1234567890).

Step 6: Style and Customize.

You can further customize the appearance of your clickable phone number by adjusting fonts, colours, and alignment within the Elementor text editor. This step allows you to match the clickable phone number’s style with your website’s overall design.

Step 7: Save and Publish.

Once you’re satisfied with the clickable phone number’s appearance and functionality, click the “Update” or “Publish” button to save your changes and make them live on your website.

Step 8: Test on Mobile Devices.

Before finalizing, be sure to test the clickable phone number on various mobile devices to ensure it works correctly. Tapping the phone number should initiate a call.

Congratulations! You’ve successfully added a clickable phone number to your WordPress website using Elementor. This simple addition can significantly enhance user experience, improve mobile usability, and potentially lead to higher conversion rates.


Incorporating clickable phone numbers into your WordPress website is a user-friendly feature that aligns with the needs of today’s mobile-centric audience. 

By following these easy steps, you can provide a seamless way for visitors to contact you, ultimately benefiting your business or personal website.

What do you think?

Written by Udemezue John

Hello, I'm Udemezue John, a web developer and digital marketer with a passion for financial literacy.

I have always been drawn to the intersection of technology and business, and I believe that the internet offers endless opportunities for entrepreneurs and individuals alike to improve their financial well-being.

You can connect with me on Twitter


Leave a Reply

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

GIPHY App Key not set. Please check settings



    How To Create a Testimonial Slider In WordPress Elementor


    How To Create a Mega Menu With Elementor Kit