Content Comparison

...

Description

The presence of a button plays a crucial role in determining your CTOR (click-to-open rate) as it enables customers to make purchases or register with your website. Without a button, these actions would not be possible.

...

How to Create a Button

There are several ways to create a button, including using the "Button" button block, an image button, or an animated GIF button.

To create a CTA button using the "Button" block, add the block to your template and place it next to the relevant element.

...

The button block in an email content editor allows users to add buttons to email.

1. Drag and drop the

...

1. button block into one of the structured containers. Place it next to the relevant element.
   

   Image Modified

2. Link the button to a URL

...

1. .
   

   Image Added

...

1. Image Modified

2. Create

...

Text Style:

...

• Font

  Image Removed

• Text Size

  Image Removed

• Bold | Italic Toggle

  Image Removed

...

Button Color

• Select a color with the color picker or input a HEX Code.

  Image Removed

...

Text Color

• Default is white

• Select a color with the color picker or input a HEX Code

  Image Removed

Background Color

...

Default is Transparent

...

1. the button label.
   

   Image Added

   Image Added

2. Add the text style.
   

   Image Added

   Image Added

   • Select the font.
     

     Image Added

   • Select the text size.
     

     Image Added

   • Set the Bold | Italic toggle.
     

     Image Added

3. Select the button color by using the color picker or entering a hex code.
   

   Image Added

4. Select the text color by using the color picker or entering a hex code. The default is white.
   

   Image Added

5. Select the background color to fill the section with the button. The default is transparent.
   

   Image Added

   Image Modified

6. Select the Border

...

1. radius. This is the degree to which the corners of the button are rounded.
   

...

Alignment

Alignment

1. Image Added

2. Set the alignment. This will set the alignment for the entire block.

...

• Right | Center | Left

• Option to set for mobile

  Image Removed

Button with Icon

...

Add an icon to the button Toggle

...

The default is OFF

To add an icon, turn Toggle ON

...

Select the alignment to be left or right

...

Icon

...

Select the Icon to upload, link, or select a stock image

...

Change | Edit

...

Link to Image

...

Icon Indent

...

• Adjust the space around the icon

  Image Removed

Adjust to Width

...

1. The alignment options are the right, center, and left. There is a separate option to set the alignment for the mobile application by clicking the Mobile icon.
   

   Image Added

2. Fixed Height The option for a fixed text line height, including the row height, allows you to specify a consistent vertical size for the text within a row and align it at the top, middle, or bottom of the row.

   The default setting is Off.

   Turn on allows you to adjust settings for all rows.

   Image Added

3. Add a button with an icon by setting the Button with Icon toggle to On. The default is Off.

• Turn the Button with the Icon toggle On.

  Image Added

• The option to Align an icon allows you to position it either before or after the text, providing flexibility in the visual arrangement and presentation of elements.

  Image Added

• An icon can be added to a button to enhance its visual representation and provide a recognizable symbol or image that conveys additional meaning or functionality.

  • Select the icon by clicking inside the Icon box to open the Image Gallery.

    Image Added

    • Select a stock image or enter an external link to an image.

      Image Added

      • Use the Change | Edit icons to modify the image as needed.

        Image Added

      • Adjust the size of the image.

        Image Added

      • Adjust the amount of space around the image using the icon Indent.

        Image Added

        Image Added

• Adjust to Width will make the button fit the entire width of the row.

  Image Added

• Set the width by turning the Adjust to Width toggle to On to increase the button size to the container width. The default is Off.

  Image Added

  Image Modified

• The Border

  Image Removed

  settings for a button allow you to customize its appearance by changing the color and thickness of the border on any side, providing flexibility in achieving the desired visual style.

  • Adjust the border of the button.
    

    Image Added

    Image Modified

• Use theInternal Padding

  Adjusts

  options to adjust the distance between the borders of the button and the text.
  

  Image RemovedImage Added

  Image Modified

• Use theExternal Padding

  Adjusts

  options to adjust the distance between the borders of the button and the section

  Image RemovedImage Removed

  Hide Element

  Option

  .
  

  Image Added

• Turn the Add an Anchor Link toggle to On to add hyperlinks that take readers to specific paragraphs within the email.
  

  Image Added

• Use the Hide Elementoptions to hide the text on either the desktop or the mobile application.
  

  Image RemovedImage Added

• Click the desktop icon to hide the text on the desktop application.
  

  Image RemovedImage Added

   

• Click on

  a

  the mobile device

  Image Removed

...

• icon to hide the text on the mobile application.
  

  Image Added

...

Learn More About Blocks

...

More

...

About the Content Library