How to Add a Call Button on Elementor

The main reason to add a call button is that mobile users will not manually dial a number they see on a screen. They expect to tap it. With over half of web traffic now coming from mobile devices, a phone number displayed as plain text converts far worse than one wrapped in a clickable button.

Other reasons to use a call button:

• Reducing friction for high-intent visitors: Someone who has already browsed your services page is close to making contact. A one-tap call removes the last step.
• Tracking calls from your website: The Call Now Button plugin and Elementor button both support analytics integration, so you can see how many calls your pages generate.
• Service businesses in particular: Plumbers, electricians, dentists, legal professionals, any business where the first action is usually a phone call, benefits from a prominent click-to-call element above the fold.

Method 1: Call Now Button plugin (free, floating sticky button)

The Call Now Button plugin adds a floating button that stays pinned to the screen as visitors scroll. It is free, installs in under two minutes, and works site-wide on any WordPress site.

1. In your WordPress dashboard, go to Plugins > Add New and search for Call Now Button. Install and activate it.
2. Go to Call Now Button in the left sidebar.
3. Click Add Button.
4. Select the action type: Phone for a standard call, or WhatsApp or SMS if relevant to your audience.
5. Enter your phone number. Use international format for WhatsApp (for example +447700900123).
6. Choose the button position (bottom-right is the most common) and style.
7. Toggle the button to Active and save.

The button will appear across your entire site. If you want it only on specific pages, the plugin has a page-level display option in its settings.

Method 2: Elementor Button widget with a tel: link (no plugin needed)

This is the most direct method and works with Elementor free. Instead of a floating button, you place a call button anywhere in your page layout, in a header, a contact section, or alongside your phone number.

1. Open the page in Elementor and drag a Button widget to where you want the call button to appear.
2. In the button’s Content settings, change the Text to something like Call Us Now or your phone number itself.
3. In the Link field, type your phone number in this format: tel:+447700900123 (no spaces, include the country code with the + prefix).
4. Style the button however you like. Use the phone icon from the Elementor icon library to make it recognisable.
5. Click Update.

On a desktop, clicking the button opens whatever calling app the browser is set to use. On a mobile device, it opens the phone dialler with the number pre-filled, ready to call. This requires no extra plugins and is the same approach used by most WordPress themes for click-to-call links.

Making the call button appear on mobile only

A call button is less useful on desktop (most desktop users will not call from their computer), and showing it everywhere can clutter a desktop layout. Elementor makes it easy to hide elements on specific device sizes.

If you used Method 2 (the Button widget), here is how to hide it on desktop:

1. Click on your call button widget in Elementor to open its settings.
2. Go to the Advanced tab in the widget settings panel.
3. Scroll to Responsive.
4. Under Hide On, check Desktop and optionally Tablet.
5. Click Update.

The button will now only appear on mobile screens. If you used the Call Now Button plugin, the plugin itself has a device-targeting option in its display settings. Look for a show-on-mobile-only toggle in the plugin configuration screen.

This is especially useful if your call button is placed in a sticky header or a prominent above-the-fold section that you want to keep clean on desktop.