December 17, 2018

How to Add A Custom Mobile Call Button to Your WordPress Site

Learn How to Add A Custom Mobile Call Button to Your WordPress Site in a few quick steps!

Do you have a WordPress website, that uses Visual Composer, for your business or service and would like more calls to your business? A great way to solve this problem is by adding a sticky click to call, custom mobile call button to the bottom of your page that stands out to your users.

Luckily, with a few lines of HTML and CSS, you can quickly create a simple call button that scrolls along with the user as they view your page. We will go through a few easy steps to creating and adding the custom mobile call button to a specific page.

wordpress call button exampleThis will be the end result.

The user will be able to scroll through the page
while always having the ability to call you.

Here are a few necessities to follow this guide.

  • WordPress
  • Visual Composer or any visual builder
  • A Call button icon, example: 

Setting the page:

The first thing you want to do is create a test page on your WordPress website and add in some dummy text from Lipsum to allow for page height. Add an element to the page and insert a full row. Within the row, add a simple Text Block and paste in your demo text.

wordpress call button

Once you have your page created, make sure to save it as a draft so that you can hit the preview button and check your progress. Now we have a page to work within and test our first call custom mobile call button.

With your test page created you can now upload your icon image to the server. The image should be no larger than 80px as it will take up too much view space and will prevent users from reading the content underneath.

Make sure to copy the image code and save it in a text file for our next steps.

Setting the code:

With our new test page created and our icon uploaded we can now start working with HTML and CSS to add in our button. In order for the code to work, you must create a section within your page to add in Raw HTML code.

Setting the code for a call button

Once you have this section added, copy and paste in the code below. Within the code are a few sections that must be edited to ensure that you have the correct phone number and image link source for it to work.



Copy and paste the code into the Raw HTML block as seen below:

raw html settings code for wordpres call button

That’s It! Once you paste in that code and hit Publish, your new mobile call button should be seen within the mobile view of your page.

Now that you have a flashy new mobile call button for users to take action on, just sit back and wait for calls. With adding this feature to your page, users will not hesitate to contact your business. With a great user experience, your page will have a much better chance of converting as it requires fewer clicks to reach you.

Thanks for reading another Momentum Monday article about WordPress and Web Design for adding a mobile call button.

If you need help growing your small business using SEO or Digital Marketing then call our team of experts at Momentum Digital 🙂

2 comments on How to Add A Custom Mobile Call Button to Your WordPress Site

Leave a Reply

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

Step 1 of 4


Answer these quick 3 questions to get a customized marketing audit and strategy to improve your website and rank higher on Google.
Author picture

“My name is Mac and I used to work for Google. Now I help small businesses grow online and rank higher on Google”