ProBeaver Weekly
Weekly for all things Beaver

Add Click to Call Phone button in the Beaver Builder

Displaying a click-able Phone button is an important element of any small business website. With little bit of manual lifting, you can add “click to call” phone button in Beaver Builder child theme or in Beaver Builder plugin being used on any third party WordPress theme.

Code to create click-able Phone button

There are two parts of the code. One part should be added where you want to display the phone button, while other part is the associated CSS code that goes into style.css file or CSS box of the Beaver Builder plugin.

Where to add code for displaying the Phone button

You can add it at lot of places depending on your requirement. When using Beaver Builder child theme, you add in “top bar” box in the Customizer to display it in the top bar. If you are using Beaver Builder plugin on a third party WordPress theme, then paste the code in a widget area of that theme or add it in normal text box of the Beaver Builder plugin.

Click to call phone button code in beaver builder

CSS code goes into style.css file when using Beaver Builder child theme. When using Beaver Builder plugin on third party WordPress theme, you can put in the CSS box of global settings or in style.css file of the current WordPress theme.

Understanding code structure of the button

Phone class is added to define basic styling for the button. You add more elements to this class to refine styling further. fl-button class is added, so that button picks up your default button style defined when using Beaver Builder child theme.

If you are using Beaver Builder plugin on a third party WordPress theme, replace fl-button with button to allow button to display in theme defined button style.

Davinder Singh Kainth

About Davinder Singh Kainth

Davinder loves creating and implementing online spaces. He has over a decade of experience reaching corners of: design, development, blogging and SEO. He also create products at SimpleProThemes(.com), WordPress learning at BasicWP(.com) & digital solutions at iGuiding(.com)

1 Comment

  1. scot on August 17, 2016 at 9:46 am

    great tutorial!

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Become a Beaver Builder Expert

Pre-order "Mastering Beaver Builder" course