How do I design my email?

There are two different ways to customize your email designs. You can design within Channel Builder as you build out your campaign. Or you can start from the Templates tab.


From the Templates tab, you have the option of copying an existing template, by clicking the copy icon in the top right of an existing template preview, and Editing that campaign.

Starting a New Design

But, if you've got some brilliant ideas and you just want to start from scratch, simply click the + icon in the upper right corner of the Templates tab to open the Email Template tab. But before jumping in, make sure you've read through the design overview document.

From here, you can start your design. It is recommended to start with Rows to create sections for content blocks, but not needed. Do this by clicking on a row from the sidebar and dragging it over to your workspace.

And then drag Content blocks into the row to create your layout. These blocks can be for messaging or imagery, like your logo. To learn more about the difference between Rows and Contents, scoot on over to that section.

Title, Paragraph and List Content Blocks

The Title content block lets you implement header tags, creating a structured hierarchy within your design. The Paragraph and List content blocks are specialized tools designed to meet distinct text formatting requirements. The Paragraph content block is optimized for long-form text, offering greater control over paragraph styles and spacing. The List content block provides an efficient way to create and manage ordered or unordered lists, complete with customizable styles and spacing options.

After adding a Title, Paragraph, or List block, use the settings in the right side menu to make changes to the font, size, weight, etc.

Font Weight: Toggle between regular and bold.

Paragraph Spacing: Adjust the space between paragraphs.

Padding: Padding serves as an essential tool for refining the aesthetics and readability of your design. The builder provides various padding options that can be customized for both rows and individual content blocks.

(Option 1) Under All sides click the plus (+) sign to uniformly apply padding around all the content within the row.

(Option 2) If you'd like to adjust the padding for each side of the content within the row, toggle on More options and adjust the padding for each side accordingly.

Note: The Content Area Padding option applies to one row at a time. To adjust the content area padding for multiple rows within your design, ensure that you select each row and make your desired adjustments accordingly.

Letter and Paragraph Spacing

Enhance the readability of your content with two key features: Letter Spacing and Paragraph Spacing. Available in the sidebar for text-based content blocks, these features give you better control over your text layout.

Applicability:

  • Letter Spacing: Applies to all text-based content blocks, including Paragraph, List, Button, Title, Icon, and Menu.
  • Paragraph Spacing: Exclusively for the Paragraph block.

Letter Spacing

  • Default: Starts at 0px.
  • Control: Use the - and + buttons in the sidebar to adjust. You can also type in a positive value manually. For negative values, use the - button.
  • Limits: The range is -99 to +99 pixels. Rendering may differ across devices and browsers.

Paragraph Spacing

  • Default: Set at 16px, rendering paragraphs as double-spaced.
  • Control: Similar to letter spacing, use the - and + buttons or manually enter a positive number or zero.
  • Limits: Range is 0 to 99 pixels, and again, rendering may vary.

Images

To add your logo or any other Image to your design, follow the steps below.

  1. Drag and Drop: Place an image content block into your workspace from the sidebar, as shown in the previous graphic.
  2. Upload your image using file manager to import into your design.

Image Settings and Features

When you click on an image in your workspace, the "Content Properties" panel provides several configuration options:

Auto-width: This is activated if your image size is larger than the content block. You can toggle it OFF if you wish to manually resize the image.

Alignment: Modify the image's horizontal positioning relative to text or other elements.

Apply affects: Clicking this opens a tool suite for editing the image. Features include:

  • Stickers and Filters: Add stickers and filters to enhance your image.
  • Cropping and Resizing: Modify the dimensions of your image as needed.
  • Image Rounded Corners: Allows you to round the corners of any image you select. Note: Rounded image corners do not render with Outlook. The fallback for Outlook emails is squared corners.

Alternate Text: This text appears when the image is not displayed, crucial for compatibility in email designs.

Direct links or buttons to a URL

  1. Click on the button or link you’d like to change

  2. Insert your URL in the URL text block under “Link Type”

Spacers and Dividers

Dividers and spacers serve similar purposes in design: they create breaks between different elements. However, their functionalities differ, and so does the control you have over them in the sidebar. Depending on your design needs, you might opt for one over the other. Here's a breakdown:

Dividers

The Divider content block inserts a physical line into your design, segmenting different parts visually.

  • Transparency Option: If you prefer no visible line, simply toggle on the Transparent option.
  • Line Settings: Customize the line's appearance using sidebar settings for line style (solid, dotted, dashed), height, and color.

  • Width and Alignment: You can set the width as a percentage of the container column and align the divider to the left, center, or right.
  • Padding: Padding options are available, just like with other content blocks. Note that maximum padding on any side is 60px.

Spacers

Spacers are essentially transparent dividers, creating an empty space rather than a visible line.

  • Height Control: The only sidebar option for a Spacer is its height, offering granular control over the amount of blank space in your design.

In summary, Dividers offer more customization options and visual cues, whereas Spacers are simpler and focus solely on creating empty space. Choose based on what fits your design goals best.