Call/Mail Button

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. 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. 1.Medium
2. 2.Small
3. 3.Large
4. 4.Extra Large

Button Width- Choose the width type for the button:

1. 1.Fixed
2. 2.Flexible – Allows to set custom width of button for mobile, tablet, and desktop in pixels.
3. 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. 1.Rounded- Choose if you want a round button
2. 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. 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. 1.Button Color- Choose the color for the button.
2. 2.Button Text Color- Choose the color for the button text.
3. 3.Button Color Hover- Choose the color for the button on hover.
4. 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.