Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1375677

    Hi,

    I want to add a click to call button to the main nav on the web page.
    Keyline in #009ee2 text in Black

    Is 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

    #1375784

    Hey 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:
    block_editor_classic_block_shortcode_wand.png
    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
    block_editor_classic_block_shortcode.png
    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:
    2022-12-10_011.jpeg
    This is the result for desktop and mobile:
    2022-12-10_140651.png
    You can also add this call button shortcode in other places like widgets and your footer.

    Best regards,
    Mike

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.