Campaigns · 3 min read
Use the Email Builder and Its Inline Editor
The Email Builder is where you design email templates and campaigns. Its inline editor works like a word processor: what you see while editing is what your contacts get.
Open the builder
Go to Marketing → Emails → Templates, then create a new template or open an existing one. Campaigns use the same builder.
The three main panels
- Add Elements: drag in content such as text, images, buttons, dividers, social icons, footers, code, video, shopping cart, RSS blocks and layouts.
- Manage Elements: see every element in your email, select it, edit it, change its device visibility or remove it.
- Appearance: set the global look of the email, including template colors, button and divider defaults, custom CSS and mobile formatting.
Layouts
Layouts set the column structure of a section. Drag one onto the canvas, then drop elements into its columns.
- 1: a single column
- 2: two equal columns
- 1/3 : 2/3 and 2/3 : 1/3: two unequal columns
- 1/4 : 3/4 and 3/4 : 1/4: a narrow and a wide column
- 4: four columns
Format text inline
Click any text to open the inline toolbar. You can:
- change the heading type, font, size and color
- apply bold, italic, underline or strikethrough
- set alignment and line height
- add bullet or numbered lists, including letter and Roman numeral styles
- add a link with its URL, display text, optional title and an option to open in a new window
Pasting text from elsewhere keeps the content. Use the text formatting option to strip the old styling.
Personalize and add actions
- Custom values insert contact details, such as the contact's first name.
- Trigger links let readers take an action from the email.
- Content AI drafts text for you. Give it context, a title, a short description, keywords, a writing tone and the number of variations you want.
Element settings at a glance
- Image: upload or link an image, add alt text and an optional link, and set size, padding and alignment.
- Button: set the text, font, colors, corner radius, padding, alignment and full width. A button can open a URL, start an email, download a file or start a phone call.
- Divider: set height, width, line type, alignment, color and padding.
- Social: choose platforms, icon style, display mode (icon, text or both), alignment, size and spacing.
- Shopping Cart: show product name, price, quantity and line price, with your own font, text color, background and padding.
Appearance settings
- Template: background color, body color, content width and an optional background image (upload it or use an image URL).
- Button and Divider: default styles for every button and divider in the email.
- Custom CSS: add your own CSS. Not every inbox supports every CSS property, so test before you send.
- Mobile Formatting: set separate font size, alignment and line height for H1, H2, H3, paragraphs and buttons on phones. These settings only apply in inboxes that support responsive email.
New sections start with default padding of 12 px top and bottom and 24 px left and right.
Add a "Preview in Browser" link
New blank templates include a Preview in Browser link at the top. To add one to an existing email, drag in the Preview URL element and style its text. To check it, preview the email or send yourself a test and click the link.