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.

Settings

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.

Rows and content

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.

Drag and drop row panel
Drag and drop row panel

For example, if you wanted to add a two-column block with text and an image, you would:

  1. Click the Rows tab and drag a two-column row into your email, then

  2. Go to the Content tab to drag text and image blocks into the row.

  3. Click your content blocks to add your text and image respectively.

drag blocks into a row
drag blocks into a row

Row settings and responsiveness

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.

Change image width
Change image width

Personalize messages with user data

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.

add a merge tag
add a merge tag

Personalize messages with liquid conditions

You can use liquid comparison operators or logical expressions (statements using &, <, >, etc) using the Add Liquid option in the text content menu.

image.png
image.png

 Do not type complex expressions manually

Logical and comparison operators will not work in the drag-and-drop editor if you type them directly into the text area. Use the Add Liquid option so that you don’t inadvertantly expose raw liquid statements in your message.

Show or hide content using liquid

You can use Liquid to show or hide entire rows in your email.

  1. Select a row in your email and click Add Condition.
Add Display Condition
Add Display Condition
  1. Enter a Name and Description for the condition.

  2. 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”.

Display Condition Example 2
Display Condition Example 2

Customizing headers

To maximize space to compose your message, you can collapse email headers.

collapsable header bar
collapsable header bar

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.

preheader.gif
preheader.gif

Add images

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.

upload manager for images
upload manager for images
You can drag and drop multiple images to add them simultaneously!

Change image sizes

To customize an image’s size, Click it in the editor and turn off the Auto width option.

resize an image
resize an image

Set background colors

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.

  1. Click the row you want to set a background color for.
  2. Set the Row background color, the Content background color, or both!

Set Background images

To add a background image to your row:

  1. Click a row.
  2. Click Row Background Image.
  3. Enter the Url of your image or click Change image to use an image that you’ve already uploaded.
  4. Select the display parameters for the image—whether to stretch, repeat, or center it.
add a background image
add a background image

Add a navigation menu to your email

You can add a menu to the top of your email, simulating something your audience might see on your website.

  1. Add a four-column structure
  2. Drag Text content into each, then add your individual text and links into the columns themselves.
  3. Adjust the row background, if you’d like the background color to be full-width.
  4. 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).
menu with 4 links
menu with 4 links

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.

the default unsubscribe link
the default unsubscribe link

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.

Saving emails

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.

image.png
image.png

Remember that…

  • 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.

Have feedback?

Yes, please!

  • 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?

Let us know!