Drag-and-Drop Editor The Basics
- 5 minutes to read
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:
- Drag the "two column" structure block into your email, then
- 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:
<) will not work in the drag-and-drop editor if typed manually.
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:
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:
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:
And here's a quick example of that image-adding in action:
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:
To add a background image to your row or content, select the Structure and you'll see the "Row Background Image" option:
When turned on, this option allows you to upload or select a background image for use, as well as customize its settings:
If your email has a menu section at the top, like this:
You would create that menu by following these steps:
- 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.
- 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.
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.
- 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.
- 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?