Drag-and-Drop Emails: The Basics

Drag-and-Drop Emails: The Basics

This doc will give you a run-down of the basics of our new drag-and-drop editor and get you building in no time!


The Body section in the editor holds the general settings of your entire email: its overall background colour, default typeface, link colour, etc. The entire email will inherit these.

Structure, Columns, and Content

How your email is arranged matters just as much as the content itself! Quite often, even if you don't know what the exact content will be, you might now how you want to structure it. In our editor, you'll need to set up that structure before adding your content.

To do that, head to the Structure tab:

There, you'll see lots of different column options. For example, if you wanted to add a two-column block with text and an image, you would:

  1. Drag the "two column" structure block into your email, then
  2. Go to the Content tab to drop the proper content into each column.

Here's a gif:


This also gives you control of how your email behaves on mobile and other non-desktop contexts. For example, we can specify whether we want a two-column row to stack on mobile (or not), and for the image to be full-width in mobile (or not).

Here's an example of a two-column structure with an image and some text.

By default, it stacks on mobile, like this:

However, if we check the "Do not stack on mobile" option in the Structure section:

The email will look like this in Preview:

Similarly, if we select the image individually, there's an option to make it full-width on mobile as well:

Personalization: Adding User Data

Being able to leverage end-user data is one of Customer.io's main strengths! You can still do that easily here! When you're working with text, you'll see a "Merge Tags" button:

You can use that button to view all of the customer data you have available, and click to add it. Here's an example of quickly adding a customer's first name:

Or, if you know exactly which attribute you'd like to add, feel free to type it in manually:


Personalization, Level II: Manipulating User Data

If you want to write something more complex-- an if statement, for example, or anything involving logical or comparison operators (&, >, or <), use our "Add Liquid" option in the text dropdown:


Note that logical or comparison operators (&, >, or <) will not work in the drag-and-drop editor if typed manually.

Hiding Rows of Content Using Liquid

You can also use Liquid to show or hide certain rows in an email.

To do this, select any row in your email, then click the Add Condition button:

Add Display Condition

From here, enter a Name and Description. Then provide the Liquid you'd like to use to define when the row should display.

For example, the below would cause a row to display only if the person being messaged had the attribute "state" set to "paying":

Display Condition Example 2

Content & Styling

There's a great deal that you can do to easily customize your email's content, sending, and give it your unique style. Here are a few examples:

Customizing headers

To leave you maximum room to compose your message, we enable you to collapse the email headers themselves:


You can see a preview of From, To, and Subject Line when you do so. To add a header such as Reply To or BCC, use the quick-add options on the right. To add a custom header, click 'Add custom' and specify exactly the header you want to add (up to a maximum of ten):


The same goes for preheader text. Expand the header menu, and click 'Add preheader text' at the right of the Subject input:


Adding images

To add an image to your email, use the image content block:

Dragging this into your email structure will give you access to the image uploader, and allow you to upload new images, insert ones you've already uploaded, or search free images to add to your message:


Note: You can add multiple images at once by dragging and dropping, too!

Changing image size

In order to customize an image's size, you'll need to click on it in the editor, and turn off the "Auto width" option. Here's an example:


Background and text colors

To change a block's background, click it to focus on its structure. Then, you can change the background color of the whole row, or just the content. You can also change the text color by selecting the text specifically. Here's how to do all three:

Background images

To add a background image to your row or content, select the Structure and you'll see the "Row Backgroun

color.gif{height="" width=""}d Image" option:

{: .width-50.img-center}

When turned on, this option allows you to upload or select a background image for use, as well as customize its settings:

Navigation menus

If your email has a menu section at the top, like this:

You would create that menu by following these steps:

  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. Customize border on columns 1, 2, and 3.

Here's a gif that shows the above in action:

If you need more than four items here, we recommend a text-only approach, or an HTML block.

Unsubscribe and other special links

By default, even when you start from scratch, we insert an unsubscribe link for you:

This is our default unsubscribe link. You can remove it— but if you do, make sure you include your own, to give your customers the opportunity to opt out.

We also have another special link, View in Browser. That's located in the text editor, under 'special links', alongside unsubscribe:

Clicking that will add a link which, when clicked by your customers, will allow them to view that email in their browser rather than the email client.

Saving Emails

We don't autosave your email, 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! When you arrive at a good spot with your email, just click the Save button:


When you do that, we'll automatically check for errors in your message as well. We'll also let you know when you last saved, and prevent you from exiting the editor if your message has unsaved changes.

Remember that...

  • You cannot import HTML into the drag-and-drop editor. Being able to export an email's code is on our near-term radar, though!
  • Once you choose to use the drag-and-drop editor for an email, you cannot change back to the old text and code editor.
  • If you're 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!

Was this article helpful?