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