Content Comparison

...

There are several ways to create a button, including using the button block, an image button, or an animated GIF button. The button block in an email content editor allows users to add buttons to email.

1. Add the block to your template. Place it next to the relevant element.

2. Drag and drop the button block into one of the structured containers. Place it next to the relevant element.
   

   Image Modified

3. Link the button to a URL

   :

   .
   

   Image Added

   Image Removed

   Image Modified

4. Create

   your Button label: Image RemovedImage Removed

5. Text Style:

   Image Removed

   • Font

     Image Removed

   • Text Size

     Image Removed

   • Bold | Italic Toggle

     Image Removed

6. Button Color

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

     Image Removed

7. Text Color

   • Default is white

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

     Image Removed

Background Color

Image Removed

8. Default is Transparent

Selecting a color will

the button label.


Image Added

Image Added

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

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

    Image Added

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

    Image Added

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

    Image Added

    Image Modified

13. Border Radius

    The border-radius around a button

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

    Image Removed

    Alignment

    Alignment

    Image Added

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

15. Add an icon to the button Toggle

16. The default is OFF

To add an icon, turn Toggle ON

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


Image Added

17. Add an icon by setting the Button with icon toggle to On. The default is Off.
    

    Image Added

    Image Modified

    1. Select the alignment of the icon to be left or right.

    Image Removed

    Icon

    Image Removed

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

19. Change | Edit

    Image Removed

20. Link to Image

    Image Removed

21. Icon Indent

    Image Removed

    • Adjust the space around the icon

      Image Removed

Adjust to Width

Image RemovedAdjusting the width will
1. Image Added

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

   Image Added

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

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

    Image AddedImage ModifiedBorder

23. Image Removed

    Adjust the border of the button.
    

    Image Added

    Image Modified

24. Use the Internal Padding

    Adjusts

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

    Image RemovedImage Added

    Image Modified

25. Use the External Padding

    Adjusts

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

    Image RemovedImage Added

26. Use the Hide Element

...

1. options to hide the text on either the desktop or the mobile application.
   

...

1. Image Added

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

  

   

• Click on the mobile device icon to hide the text on the mobile application.

  

...