This block allows you to add a button that will automatically make a call or send an email.
How To Add The Call/Mail Block #
- 1.Open a page or a post and click on the plus icon to add a new block and look for the Call/Mail Button or you can search for it if it doesn’t pop up quickly for you.
How To Configure The Call/Mail Button Block #
To configure the Call/Mail Button block, switch to the ‘Content’ tab.
Content #
Under the Content Tab, options for button type, button size, and button width are available.
Button Type- You can choose the type of button you want to add – Call or Mail.
Enter your Phone Number- If your button type is ‘Call’, you’ll get a text area to enter the phone number.
Enter your Mail Address- If your button type is ‘Mail’, you’ll get a text area to enter the email address.
Button Size- Choose the size for the button:
- 1.Medium
- 2.Small
- 3.Large
- 4.Extra Large
Button Width- Choose the width type for the button:
- 1.Fixed
- 2.Flexible – Allows to set custom width of button for mobile, tablet, and desktop in pixels.
- 3.Full
How To Style The Call/Mail Button Block #
Under the Style tab, options for button styles, icons, colors, and typography are available.
Button Style- Style settings for the button:
- 1.Rounded- Choose if you want a round button
- 2.Button Radius- If you chose your button to be rounded, then this option will allow you to set the radius for the button
- 3.Transparent- Choose if you want the button style to be transparent
Button Icon – Icon settings for the button:
- Button Icon- Choose the icon for the button.
- Icon Position- Choose the icon position with respect to button text-
- Left
- Right
- Icon size- Set the size for the icon.
- Gap between icon and text- Set the value for the gap between icon and text.
Button Colors- This allows you to choose colors for your button and text-
- 1.Button Color- Choose the color for the button.
- 2.Button Text Color- Choose the color for the button text.
- 3.Button Color Hover- Choose the color for the button on hover.
- 4.Button Text Color Hover- Choose the color for button text on hover.
Button Typography- Choose the values for font family, font size, font weight, line height for the button text.
Advanced Settings #
The settings under the Advanced tab will be applied to the entire block
Margin – Customize the margin of the block separately for Top, Bottom, Left, and Right.
You can set different margins for Desktop, Tablet, and Mobile devices.
Padding – Customize the padding of the block separately for Top, Bottom, Left, and Right.
You can set different paddings for Desktop, Tablet, and Mobile devices.