-
AuthorPosts
-
December 9, 2022 at 1:35 pm #1375677
Hi,
I want to add a click to call button to the main nav on the web page.
Keyline in #009ee2 text in BlackIs the best way to add this as a custom link tel:xxxxxxxxxxxx in the Nav, then apply the button style bordered?
Do i need to apply anything for specific border and text styling?
Is there a way to show this on mobile rather than in the breadcrumb nav?
Please advise
Thanks
December 10, 2022 at 9:11 pm #1375784Hey woogie07,
Thanks for the link to your site, typically if you wanted a call button you would add the tel: link to your menu item and use the button option, but I see that you have a phone number in your topbar and the topbar shows on mobile so would you like a call button there?
If so you could use the shortcode wand to create your button and use it to create a call button shortcode that you can add anywhere to display it, such as the Enfold Theme Options ▸ Header ▸ Extra Elements ▸ Phone Number or small info text field.
So to do this first open a new post and in the block editor select the classic block and in the toolbar select the shortcode wand ▸ Button:
then the standard Advanced Layout Builder button element will open for you to design the button, after you build your button and save the button shortcode will show for you to copy
Then add your button shortcode to this function:function call_button_shortcode( ){ echo do_shortcode(" button-shortcode-here "); } add_shortcode( 'call_button', 'call_button_shortcode' );
for my example I used this code:
function call_button_shortcode( ){ echo do_shortcode("[av_button label='Call Us' icon_select='yes' icon='ue854' font='entypo-fontello' link='manually,tel://555-555-5555' link_target='_blank' size='medium' position='right' label_display='' title_attr='' size-text='' av-desktop-font-size-text='' av-medium-font-size-text='' av-small-font-size-text='' av-mini-font-size-text='' margin='' margin_sync='true' padding='' padding_sync='true' av-desktop-margin='' av-desktop-margin_sync='true' av-desktop-padding='' av-desktop-padding_sync='true' av-medium-margin='' av-medium-margin_sync='true' av-medium-padding='' av-medium-padding_sync='true' av-small-margin='' av-small-margin_sync='true' av-small-padding='' av-small-padding_sync='true' av-mini-margin='' av-mini-margin_sync='true' av-mini-padding='' av-mini-padding_sync='true' color_options='' color='theme-color' custom_bg='#444444' custom_font='#ffffff' btn_color_bg='theme-color' btn_custom_grad_direction='vertical' btn_custom_grad_1='#000000' btn_custom_grad_2='#ffffff' btn_custom_grad_3='' btn_custom_grad_opacity='0.7' btn_custom_bg='#444444' btn_color_bg_hover='theme-color-highlight' btn_custom_bg_hover='#444444' btn_color_font='theme-color' btn_custom_font='#ffffff' btn_color_font_hover='white' btn_custom_font_hover='#ffffff' border='' border_width='' border_width_sync='true' border_color='' border_radius='' border_radius_sync='true' box_shadow='' box_shadow_style='0px,0px,0px,0px' box_shadow_color='' animation='' animation_duration='' animation_custom_bg_color='' animation_z_index_curtain='100' hover_opacity='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' css_position='' css_position_location=',,,' css_position_z_index='' av-desktop-css_position='' av-desktop-css_position_location=',,,' av-desktop-css_position_z_index='' av-medium-css_position='' av-medium-css_position_location=',,,' av-medium-css_position_z_index='' av-small-css_position='' av-small-css_position_location=',,,' av-small-css_position_z_index='' av-mini-css_position='' av-mini-css_position_location=',,,' av-mini-css_position_z_index='' id='' custom_class='' template_class='' av_uid='' sc_version='1.0' admin_preview_bg='']"); } add_shortcode( 'call_button', 'call_button_shortcode' );
Then add this to your child theme functions.php, and add the call button shortcode
[call_button]
to your Phone Number Or Small Info Text field:
This is the result for desktop and mobile:
You can also add this call button shortcode in other places like widgets and your footer.Best regards,
Mike -
AuthorPosts
- You must be logged in to reply to this topic.