Email Template WYSIWYG Editor Reference

The email WYSIWYG editor helps you compose HTML emails that are fully compatible with email clients — both current and new versions. The editor is composed of Body, Block, and Content elements.

The editor has three styling sections:

  • Body: Set the background color, width, and font that apply to the entire email.
  • Blocks: Blocks are single- or multi-column layout sections, and they are synonymous with content columns. You can leave blocks unstyled, style columns or rows independently, and add content elements.
  • Content: Add columns, buttons, dividers, HTML, images, and text individually or to a block.
 Tip

Use blocks or content columns to lay out your template before you add content. You can add multiple content elements to a single column. For example, you can place text above of an image, and both items will be grouped together in the collapsed mobile view.

Blocks and Content Columns

Both block elements and content columns are background elements that help you layout your email template before you add content. When you select a cell in a block column, you can style the entire row or set styles for individual columns within the row. Most of the style options are the same for both rows and columns.

Row Properties

Row properties affect the entire row; if you want to set properties for individual columns in a row, go to Column properties.

  • Background Color: Set the color for the entire row, extending to the entire width of the window, not just the width of the content body.
  • Content Background Color: Set the background color for content body in the row.
  • Background Image: Set an image as the background of the row. You can overlay the background image with other content elements. Enter a the HTTP/HTTPS URL for your image.
  • Padding: Set padding — spacing inside the border — for all columns in the row. Use More Options to change padding for individual sides of the row.

Column Properties

Column properties affect an individual cell in a row. Column Properties appear below Row Properties when you select a row or a cell in a row that does not have content.

  • Background Color: Set the background color for the individual cell.
  • Padding: Set padding — spacing inside the border — for the cell.
  • Border: Add and style a border for the cell, helping you provide visual separation between rows and columns where necessary.

Mobile Options

When you select a Block or Column row, you can determine the behavior of the row on mobile email clients — generally when the client's width is smaller than the email body.

Hide on Mobile hides a content row in mobile emails. You may want to use this option to hide images and other elements that take up an inordinate amount of the screen in emails. Do Not Stack on Mobile prevents columns in a row from stacking on a mobile device or when the client width is less than the Content Width. You can set the Content Width (essentially the mobile breakpoint) in the Body section of the editor.

Email Body Styles

Body styles affect the entire body of the email.

  • Background Color: Set the background color for the entire email, both in and outside the content-width. You can override this setting at the row and column levels.

  • Content Width: Set the content width of your email. This is essentially your mobile breakpoint as well; when a client width is less than the content width, columns will collapse and cells will stack (unless you set mobile settings denying collapsibility).

  • Font Family: Set the font for your email. You cannot override this setting at the row or column level.

Content Elements

Content elements consume the width of the column you place them in. Content elements that are not contained in a block are rendered full-width. Drag a content element into your template, then click the element to see its styling options.

You can add merge fields in the text area of any content block.

 Note

While you cannot personalize messages using handlebars and dynamic content in the WYSIWYG email editor, you can switch to the custom HTML editor after you save your template and use handlebar syntax in the raw HTML. If you edit your WYSIWYG-created template's HTML, you will no longer be able to edit it with the WYSIWYG editor.

  • Divider: Add a dividing line. You can change the line color and style, and set padding around the divider column.
  • Image: Enter the HTTP/HTTPS URL of an image. You can set the image alignment, provide alternate text, set padding, and provide a link if you want the image to be clickable.
  • Button: Link to another page, presumably an action (subscribe, unsubscribe, or send the user to a particular product page, etc). You can style button color, border, alignment and padding in the sidebar. Click the button element to see the styling options for the button label text.
  • HTML: Add your own custom HTML content block and set padding.
  • Text: Add text. You can set the color, alignment, line height, and padding in the sidebar. Click the text element to set the font, size, list type, text and background colors, add links, and other options.