Our drag-and-drop email builder makes it easy to design beautiful, highly customizable email content, so your emails look unique. Below, we'll walk you through the email builder features including dynamic content for audience segmentation, built-in image editing, social media icons, and call-to-action buttons you can customize to suit.
ON THIS PAGE:
- Content customization
- Image editor
- Overlay text on an image
- Header text
- Footer text and settings
To open the email builder when you're creating a new campaign, click My templates on the "Choose a starting point" page:
You'll also see a Recent emails link after you've used the template once. For future emails, you can optionally select a "recent email" as your starting point.
NOTE: The email builder is only available to use with email builder templates. If you select a custom coded template instead, it will open in our custom template content editor.
At the very top of your email is a text area to write preheader text, and a text link for the email’s web version. Both are optional, as explained below.
This is a brief description of what’s in the email. It’s useful for email clients like Gmail which display the email subject line and preheader text in the inbox:
Click the placeholder text, "Summarize this email," to write your preheader text, or remove it by clicking the trash can displayed, then click Delete.
This is a text link for the web-hosted version of your email. Some recipients may not be able to view the HTML version of your email in their email client, or they might have image downloading switched off, so they can click this link to open your email in their web browser.
The default link text is, "No images? Click here" which cannot be edited. You can optionally hide this text link by hovering your cursor over the text. Click the trash can icon, then click Delete.
Sections are individual layouts for different types of content. For example, you can have single, double or triple-column text sections, or image-only sections.
Email builder templates can include predefined sections for layouts that you regularly use, making it faster to create new emails.
TIP: If you usually start a new campaign based on a recent email because your email builder template doesn't contain predefined sections, contact your account administrator about updating your template to include the section styles you use most.
Add a section
To create a new section of content, click Add section at the bottom of your email:
Duplicate or delete a section
After you’ve customized the content in a section, you can duplicate it to create another section with identical content. To duplicate a section, hover your cursor to the side of the section and click to display the section tools, then click the plus button.
To remove a section, click to the side of it, then click the trash can button.
Move a section
You can reorder content sections as you go. To move a section, click to the side of the section to display the section tools, then click and drag the "move" button to reposition.
Section background colors and images
You can change the background color of individual sections, or upload a background image. To do so, click to the side of a section to activate it (as shown above), then in the left sidebar change the settings under "Background and Border."
Background images can be edited directly in our builder. Click Edit in the left sidebar, under "Background and Border," to use the same editing tools as regular images. You can also overlay text on background images to create great layouts.
TIP: Some email clients do not load background images. We recommend picking a color similar to the image as a fallback.
Section layout and spacing
To adjust a section's layout and spacing options, click either side of a section, then click Layout and Spacing in the left sidebar. Use these tools to set the section to:
- Fixed-width — The background color or image is displayed at a fixed-width, showing behind all content columns.
- Split column — The background is displayed within each content column, revealing the email's background color in-between. Background images repeat in each content column.
- Full-width — The background color or image will expand to the full width of the screen, while text and image content remains fixed-width.
The spacing below each section can also be adjusted using the Bottom spacing slider.
To display specific sections to a specific audience, click to the side of a section to activate it, and in the left sidebar clickWho should see this? You can then choose from your available lists and segments to determine which audience can see the content. For example, you could include an action alert in your email, but set it so that section is only shown to subscribers in a particular location.
To use this feature, you need to have segments set up for your subscriber list. Learn more in our guide to creating dynamic content with the email builder.
Use the "Add content" panel on the left to drag and drop different content types into sections.
To remove content from a section, hover your cursor over it. First click the trash can icon, then click Delete as shown here:
When you drag a text box into a section, the editing toolbar is displayed above. Use it to apply pre-set heading styles and format your text. You can also:
- Override pre-set text styles. Just select some text, then change the font size, typeface, alignment or color.
- Insert date fields, custom fields, and personalization tags.
- Insert social media buttons for recipients to share your email on Twitter or Facebook.
TIP: By default, pressing Enter or Return starts a new paragraph. To start a new line directly under the previous line of text, press Shift + Enter instead.
Add pictures to your email by clicking on an image placeholder in a section you’ve already added, or by dragging and dropping the image tile from the left sidebar into a section.
Click an existing image to see the options to Replace or Delete it, or optionally add a URL and Alt (alternative) text in the left sidebar.
You can also edit an image directly inside our email builder.
Use a spacer to adjust the vertical space above or below text or images. Drag and drop the spacer, then click and drag the pixel measurement to adjust as shown here:
The divider is also for adding space above or below content, but it visually separates it with a line.
Buttons are a great way to highlight a call-to-action in your email. Insert one wherever you like, then customize it to suit. You can:
- Change the size, style and color of the button
- Change the font and color of the button text
- Set the corners to square or rounded
- Align the button to the left, right, or center, or make it full-width
The email builder supports video from Vimeo and YouTube, via the "Video" content type.
Simply drag and drop the "Video" content type from the left sidebar into an email section, and paste a Vimeo or YouTube URL into the "Enter Video URL" field. A thumbnail will be automatically generated that links to the video, with a play button overlaid.
Images can be edited directly inside our email builder. Just click on the image you want to edit, then click the Editbutton.
To edit a background image, click on the section, then in the left sidebar expand Background and Border, then next to the image in the left sidebar click Edit.
Available editing tools include:
- Enhance — Auto-adjust your image using presets like "Hi-Def," "Scenery," "Food," "Portrait" and "Night."
- Effects — Filter your image with a distinct color scheme.
- Orientation — Rotate or flip your image.
- Resize — Scale the image to be larger or smaller. This will not change the width of the image container.
- Crop — Crop manually, or use specific aspect ratios.
- Color — Change saturation, warmth, tint and fade.
- Lighting — Change brightness, contrast, highlights and shadows.
- Sharpness — Adjust how blurred or sharp an image is.
- Blemish — Selectively blur areas with a brush.
Overlay text on an image
In the footer, include your company name and address to comply with anti-spam regulations. It’s also a good idea to write a permission reminder so subscribers know how or why they were added to your mailing list.
Click inside the address text field to open the "Footer settings" panel. These editing tools control content at the bottom of your email.
Easily add links to your online profiles such as Facebook, Twitter and Instagram. Just enter the relevant URLs for each account. Icons for each profile are displayed above your company address.
Share this email
This is to add "share" buttons to the footer — pictured below, on the right — that recipients can click to share your email across their social networks, or forward it to friends.
This gives you the option to turn the following text links on or off:
- Explanation text – Also known as a permission reminder, this is a short sentence to let subscribers know why they're receiving your email. It helps to reduce unnecessary spam complaints from people who may have forgotten opting in or completing an action.
- Edit subscription – This text link, displayed as "Preferences," allows your recipients to update their own subscription details.
Preview, test and send
You can continually preview your email content while working on it by clicking the Preview button in the email builder, at the top right. This shows you how your content will look on desktop and mobile.
To test your design as you go, you can send an email to a single address by clicking Send a test email, next to the "Preview" button.
When your content is ready, follow the on-screen instructions to choose your recipients and optionally send a test email before you send the real thing. This is particularly important if your email uses dynamic content or includespersonalization.