How to use the Email Builder

The Email Builder uses a WYSIWYG "what you see is what you get" editing experience, so changes appear on the canvas as you make them.

Open the Email Builder

Open Marketing > Emails > Templates to create a new template or edit an existing one.

The center panel shows the email canvas, the left panel holds elements, and the right panel holds options. The top toolbar includes Add Elements, Manage Elements, and Appearance.

Use the builder workspace

Use the builder controls to add content, manage the email structure, and set global styling.

• Add Elements adds layouts and content blocks to the email.

• Manage Elements lists the sections, columns, and elements in the email so you can select and adjust them.

• Appearance controls global styles, including the background color, dividers, custom CSS, and mobile formatting.

Add layouts and elements

Use Add Elements to drag a layout onto the canvas and then place content elements inside it.

1. Select Add Elements.

2. Drag a layout onto the canvas.

3. Drag content elements into the layout.

4. Select an element to open its inline editor.

Choose a layout

Choose a layout according to how many columns your section needs.

• 1 creates one vertical column.

• 2 creates two equal columns.

• 1/3 : 2/3 and 2/3 : 1/3 create two columns with unequal widths.

• 1/4 : 3/4 and 3/4 : 1/4 create two columns with a larger width difference.

• 4 creates four equal columns.

Choose a content element

Add the content type that matches the part of the email you are building.

• Text adds headings, paragraphs, captions, and other copy.

• Image adds a photo or graphic from your computer, an external source, or the Media Library. Image uploads are limited to 10 MB. You can set alt text, an optional link, width, height, padding, and alignment; you can also set height and width to auto. For the full workflow, see Add an image to an email campaign.

• Button adds a call to action. Set its text, font, font size, font color, alignment, width, background color, border radius, and padding. Its actions include URL, Mail, File Download, Telephone, and Other.

• Divider separates sections. Set its height, width as a percentage, line type, alignment, color, and padding.

• Social adds linked social media icons. Set the social items, icon style, display mode, alignment, font, font color, size, spacing, and padding.

• Footer adds contact details, an organization address, privacy policy links, unsubscribe links, or other footer content. Select the footer text to edit its font, size, color, style, links, alignment, and line spacing.

• Code adds custom HTML for advanced layouts and components. Use this element only when you are comfortable working with HTML, and test the email because email clients can support HTML and CSS differently.

• Video adds a link to hosted video content. Select YouTube, Vimeo, Wistia, or HTML 5 video, then provide the video URL, thumbnail, dimensions, play button size, play button opacity, and padding. Thumbnail uploads are limited to 10 MB.

• Shopping Cart adds product details, including product name, price, quantity, line price, and a store link. Set its padding, font, text color, and background color.

• RSS Header populates channel information from an RSS feed. The available values are {{rss_feed.title}}, {{rss_feed.description}}, {{rss_feed.url}}, and {{rss_feed.date}}. Choose Basic for non-editable text or Custom for editable text. RSS channel values can also be used in the campaign subject field.

• RSS Items populates content from an RSS feed. Choose Excerpts, Excerpts with Image, Title, Full Content, or Custom. Available item values include {{rss_item.title}}, {{rss_item.content}}, {{rss_item.url}}, {{rss_item.date}}, and {{rss_item.author}}. You can also adjust the element padding and whether each item includes an image.

Format text with the inline editor

Select text or a text element to open the inline editor and change the content without leaving the canvas.

• Change the heading type, including H1 through H4.

• Choose a font and set the font size from 8px to 96px.

• Set the text color with a hex code.

• Apply bold, italic, underline, or strikethrough formatting.

• Set text alignment and line height.

• Add bullet points and choose a marker style: Disc, Circle, Square, Decimal, Lower Alpha, Lower Greek, Lower Roman, Upper Alpha, or Upper Roman.

For heading text, select the heading and use the bold control to turn bold formatting on or off while keeping the same heading level.

Add or edit a link

Highlight the text to link, then use the link option to set the destination and display details.

• Link URL is the web address for the destination.

• Text to Display is the clickable text shown in the email.

• Title is an optional description for the link.

• Open Link in New Window opens the destination in a new browser window or tab when selected.

• Link List provides previously used or saved links when available.

Use advanced inline editing options

Use the advanced options when pasted text needs cleanup or when content should change for each recipient.

• Clear Format removes existing formatting from the selected text, which is useful after pasting content from another source.

• Custom values insert recipient-specific details such as a name or location.

• Trigger links let recipients perform an action from the email, such as confirming a subscription, unsubscribing, or accessing a special offer.

• ContentAI generates text from a context, content title, brief description, keywords, writing tone, and number of variations. You can generate up to five variations.

Manage elements and device visibility

Use Manage Elements when you need to find, edit, hide, or remove a specific section, column, or element.

1. Open Manage Elements.

2. Select a section, column, or element to edit its properties independently.

3. Use mobile visibility or desktop visibility to choose where the element appears.

4. Remove an element when it no longer belongs in the email.

Hovering over or selecting an item in Manage Elements scrolls the canvas to that section, column, or element.

Adjust global appearance

Use Appearance to change styles that apply across the email.

• Template controls the color scheme, background image, and content width. You can set the background color and body color, upload a background image, or provide a background image URL.

• Button controls default button styling, including corner radius, button color, font, font size, and individual colors for bold, italic, and underlined button text.

• Divider controls the default divider height, color, and style.

• Custom CSS adds CSS for advanced layout control. Email clients can render CSS differently, so test emails that use custom CSS.

• Mobile Formatting controls mobile heading, paragraph, and button settings, including font size, text alignment, and line height. These settings affect the mobile version in email clients that support media queries.

Custom values entered in color fields such as Background Color, Body Color, or Button Color render on the canvas immediately, without switching to Preview mode.

Preview the email on desktop and mobile

Click Preview, next to Save, and switch between the Desktop, Tablet, and Mobile modes to review how the email appears on each device. This helps you identify formatting issues before your recipients see them.

Preview the email in a browser

Use the Preview in Browser link to view the email as a browser document.

• Blank email templates include the Preview in Browser link at the top by default.

• For an existing campaign or template, add the Preview URL element, then edit its text styling or formatting with the inline editor or link option.

• Preview the email and select the preview link, or send a test email and select the view-in-browser link.

Use the browser preview and a test email to review the rendered result before sending the campaign.