Drag-and-Drop Emails: The Basics
Drag-and-drop emails consist of content, rows, and settings.
Content blocks are discreet pieces of email content, images, text, etc. Rows provide the structure for your email—a row determines how many pieces of content you can fit across the width of your message.
The Settings tab contains general settings for your whole message: background colour, default typeface, link color, etc. Content blocks in your email inherit these settings.
The email editor consists of Rows and Content. In general, you’ll add rows to your email, providing a basic structure for your message, and then add content, the images, text, and information you want to send people, to your rows.
The Rows tab provides a way to structure your email before you add content. Each row determines the number and size of content blocks you can fit across your message. You can add multiple rows, with different numbers of content blocks, to add visual appeal to your message.
The Content tab contains the different kinds of content that you can add to a row—text, title, images, etc. When you click a content block in your email, you’ll see settings specific to the type of content in the row.
For example, if you wanted to add a two-column block with text and an image, you would:
Click the Rows tab and drag a two-column row into your email, then
Go to the Content tab to drag text and image blocks into the row.
Click your content blocks to add your text and image respectively.
By default, content blocks stack on mobile devices, going from left-to-right order to top-to-bottom.
You can click any row in your message and determine how it behaves in mobile contexts. Do you want to disable collapsing behavior, or hide content on smaller devices? Click each row to reveal responsive settings.
By default, content blocks stack from left to right:
|Standard width||Mobile width|
If you select the row and click Do not stack on mobile, your email will resize without stacking content.
You can also set the width of cells to customize the layout of a row.
You can leverage data associated with your audience to personalize messages for each recipient!
When working with text content, click Merge Tags. We’ll list the contexts and data available to your message. Or, if you know exactly which attribute you want to add to your message, you can type it manually.
For example, let’s add a first name to a message.
You can use liquid comparison operators or logical expressions (statements using
>, etc) using the Add Liquid option in the text content menu.
Do not type complex expressions manually
You can use Liquid to show or hide entire rows in your email.
- Select a row in your email and click Add Condition.
Enter a Name and Description for the condition.
Provide the liquid condition determining people who will see the row.
For example, this row displays only if a person in your audience has a “state” attribute with a value of “paying”.
To maximize space to compose your message, you can collapse email headers.
You can see a preview of the From, To, and Subject lines when you collapse headers. To add a new header, like Reply To or BCC, use the quick-add options. To add a custom header, click Add custom and specify the header you want to add. You can add up to 10 headers.
To add preheader text, expand the headers and click Add preheader text.
You can add images to your messages using the image content block.
When you add an image block to your email, you can upload new images, insert ones you’ve already uploaded, or search free images to add to your message.
To customize an image’s size, Click it in the editor and turn off the Auto width option.
By default, the backgrounds of rows and content blocks are transparent. You can change the background at the row or content level.
The background of a row stretches to the edge of your audience’s email browser. The content background is contained by the cell itself.
- Click the row you want to set a background color for.
- Set the Row background color, the Content background color, or both!
To add a background image to your row:
- Click a row.
- Click Row Background Image.
- Enter the Url of your image or click Change image to use an image that you’ve already uploaded.
- Select the display parameters for the image—whether to stretch, repeat, or center it.
You can add a menu to the top of your email, simulating something your audience might see on your website.
- Add a four-column structure
- Drag Text content into each, then add your individual text and links into the columns themselves.
- Adjust the row background, if you’d like the background color to be full-width.
- Scroll to the bottom of your row settings, and add borders to the right of content blocks 1, 2, and 3. (Click More Options to expose border settings for the sides of each block).
By default, even when you start from scratch, we insert the default unsubscribe link for you. You can remove this link, but if you do, you must include your customized unsubscribe link, giving people the opportunity to opt out.
You can also add the View in Browser link, located in the text editor, under Special links. This adds a link that lets people view your message in their browser rather than the email client.
We don’t autosave your email as you work on it, because we want to enable you to experiment with your emails, but still be able to discard those changes if you don’t like them! While we don’t autosave your message, we do warn you if you try to leave the editor without saving changes.
When you’re ready to save your message, click Save.
When you save, we automatically check for errors in your message and warn you about the things you need to fix.
- You cannot import HTML into the drag-and-drop editor. You can, however, export your message’s HTML.
- After you choose to use the drag-and-drop editor for an email, you cannot change back to the rich text or code editors.
- If you send email using custom SMTP providers, make sure to disable their CSS inlining (if available). The drag-and-drop editor generates markup that is already optimized and doesn’t need further processing.
- Found a bug?
- Have a feature request?
- Something doesn’t work as you expected?
- Is some functionality missing?
- Or are you loving the new changes and want to make sure we keep something?