• 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 love creating and implementing online spaces. He has over a decade of experience reaching corners of: design, development, blogging and SEO. He also create digital products at SimpleProThemes(.com) and digital solutions at iGuiding(.com)

    1 Comment

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

      great tutorial!

    Leave a Comment





  • Pro Stuff

    for  Beaver Builder

    Pro Styles for Beaver

    Customize Beaver Builder Modules beautifully with pre-made CSS packs

    Creative9

    A premium modern agency template for Beaver Builder users