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. Learn more at idavinder.com

5 Comments

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

    great tutorial!

  2. Malinda on January 30, 2019 at 2:21 pm

    This was perfect, thank you!

    I do have two questions. How do I change the button color and how do I center it in the section on my beaver builder plug in?

    • Davinder Singh Kainth on March 5, 2019 at 5:27 pm

      Welcome!
      .phone { text-align:center; }
      should give it center alignment.

      For color, use color:#888; to adding color of your choice.

  3. JM on February 3, 2019 at 3:17 pm

    Hello, The content is not showing up in the button in the top bar… no phone icon or phone number. Any thoughts as to why?

Leave a Comment





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