Button Element

Drag and drop the button element from the ‘’Elements’’ tab on the left.

 

Link  #

 

When you drag and drop the button from the elements tab of the left, you can add a link to the button.

 

You can also change the protocol of the link.

The protocol can he HTTP, HTTPS, FTP, Email, and Other.

 

Size #

 

The button can be ‘’Fit to text’’ or ‘’Fixed’’ size.

‘’Fit to text’’ means that you can add text to your button and it will adjust its size accordingly to fit the text.

Below, you can change the width of the button. In this case, I set it to ‘’Fixed’’ and added 60px width.

Fluid on mobile #

 

You can turn on the switch if you would like it to be ‘’Fluid on mobile’’. 

This is how the mobile preview will look like with the ‘’Fluid on mobile’’ switch on.

Now, I have switched it off.

Here is how the preview on mobile looks like with the switch off.

Align #

You can also adjust the alignment of the button.

Left align

Center (default)

Right align

Body text settings #

You can add the font to your text size, line height, and change the color in the color picker.

 

Margins

You can change the margins under ‘’Margins’’ and then by clicking on the switch you can change them individually.

In the image below I have added 80 as left margin and 70 as bottom margin.

Paddings #

 

You can also add paddings to your button under ‘’Paddings’’. Use the switch to change each side individually.

Border #

Under ‘’Border’’ you are able to change the border width, color, style, and radius at the bottom.

Background #

 

Under ‘’Element background’’ you can change the background of your button.

You can use the switch to add a background image.

Be careful because Outlook 2007, 2010 and 2013 do not support background images on this element.

You can manipulate the button and the background image with paddings to fit the button.

Pin It on Pinterest