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.
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.