Adding content

​

The editor

We have built a powerful editor for creating emails. Create any email with our flexible design tools, and write distraction free with Writing mode. Here are a few of the editor’s stand-out features:

• Customizable custom themes to keep your designs consistent
• Writing mode, distraction-free editing which hides the editor interface
• Auto-saves as you type
• Mobile-friendly so you can write and design emails on any device
• Support for images, buttons, social icons, dividers and columns
• The same interface for marketing and transactional emails
• Personalize emails with contact and event properties
• Helpful keyboard and Markdown shortcuts for adding content and formatting text

​

Formatting text

Once you have written content in your email, you will see formatting options appear in the right-hand panel. These options will change depending on the element you have selected in the email. You can choose between different headings, style text bold, italic, underline as well as add links. You can also change text size and color. Text can also be easily changed into lists, quotes and inline code blocks.

​

Writing mode

To focus on writing your email, you can enter Writing mode. To toggle writing mode, use the switch just above the editor or use the ⌘+/ (Mac) or Ctrl+/ (Windows) keyboard shortcut. When in Writing mode, you can edit styles by clicking the Show styles button that appears above selected elements. This will open a slide-in editor panel on the right

​

Adding elements

Emails can be more than just text. You can add the following elements to your emails:

• images
• buttons
• dividers
• social icons
• columns

You can add elements from the toolbar above the editor, or by hovering over an existing element in your email and clicking the + plus icon on the left. You can also add elements by typing / in the editor: If you continue typing, you can narrow down the selections. You can use your arrow keys to select items and pressing Enter will confirm your selection.

​

Images

As well as adding from the toolbar or the + icon, you can drag or paste images into the editor. Add a link to an image by selecting the element and then clicking the + button in the Link editor panel on the right.

​

Dynamic images

You can also insert images hosted outside of Loops into your emails. First, add a placeholder image to your email (which you can use to specify the location and size of the image) and then click + in the Dynamic source section in the right-hand panel. Paste in an image URL or add create dynamic URLs by clicking the icon on the right. For example, you could insert an imageUrl data variable in a transactional email, or use an avatarUrl custom contact property in a campaign. You can also create dynamic URLs by combining text and dynamic content inside the image source field.

​

Videos

Video is not widely supported in email clients, making it hard to embed videos in emails. We suggest adding a still image from the video into your email—with a play button overlayed on top if you want—and then add a link to the image pointing to your hosted video. You can also use GIFs to add a video-like effect to your email. Just make sure that the GIF’s file size is small enough to load quickly.

​

Links

You can add links to text, images and buttons. First, select the text or element and click the + icon in the Link editor panel (or use ⌘+K). Enter your URL into the field then hit Enter. Helpfully, you can omit the https:// protocol as it is automatically added to each link.

​

Dynamic links

You can create dynamic links using contact and event properties or data variables. When editing a link, click the icon—which will be different depending on the type of email you are creating—on the right of the input, then add the dynamic content you want to use.

​

Link tracking

By default marketing emails (campaigns and loops) have opens and link tracking enabled. This can be disabled for all emails in Settings -> Tracking. If you want to disable click tracking on individual links in your emails, click the icon in the editor panel.

​

Dividers

Dividers help separate or group content in your emails. Change spacing around dividers in the Block settings editor panel.

​

Social icons

You can add a row of social icons to your emails. There are hundreds to choose from. You have options for icon size, gap and color (black, grey or white). You can add more icons by clicking the + icon in the editor panel. To rearrange icons, you can drag them around in the editor or in the Links list in the editor panel. You can also change padding, alignment and more using the Block styles.

​

Columns

Columns allow you to arrange content side by side, creating dynamic layouts for your emails. You can use columns to place elements like images, text, buttons, and more next to each other.

​

Adding columns

You can add columns to your email in several ways:

1. Using the / slash menu in the editor: Type / to open the slash menu then start typing “columns” or click on the Columns option.
2. Using the editor toolbar: Click on the columns icon to insert a column layout.
3. Dragging two blocks together: Click and hold the block settings icon (six dots) to the left of a block. Drag the block next to another one until you see a vertical gray line on the right, which indicates a new column will be created.

​

Customizing columns

Once you’ve added columns, you can customize their appearance and behavior to suit your design needs. Width and spacing You can adjust the width of a column by clicking and dragging the gray bar between the columns. You can also adjust how much space appears between columns by dragging the green bar between the columns. Stacking columns on mobile When emails are viewed on a mobile device (when there is less horizontal space available) you can choose if your columns should stack vertically for better readability or stay as columns. In the Block styles editor panel you’ll find the option to stack columns vertically on mobile (when the viewport is 479px or smaller). Adding and moving content You can drag elements like text blocks, images, and buttons in and out of your columns. To do this, hold down the ⌘ key (Mac) or Ctrl key (Windows) while hovering over the element you want to move. Then click and drag the block settings icon (six dots) to move the block to its new position.

​

Tips

• No nested columns: Keep in mind that nesting columns within columns is not supported. If you need a complex layout, consider adjusting your design to fit within the two-column limit.
• Consistent styling: Use the block settings to ensure that padding and alignment are consistent across your columns for a polished look.

​

Markdown support

You can use Markdown shortcuts to add content to your emails. For example, you can add a heading by typing # followed by a space. It’s also possible to format text with Markdown syntax, like adding bold text using **, or inserting links using [text](url). View the full list of Markdown shortcuts. The editor also supports pasting Markdown content, making it seamless to bring content from other platforms. Paste Markdown with ⌘+Shift+V (Mac) or Ctrl+Shift+V (Windows) and it will be converted into native editor blocks.

​

Reordering content

If you hover over a block in your email, you’ll see a drag-and-drop icon appear on the left. You can drag this icon to re-order elements in your email.

​

Footer content

We add an automatic footer into campaign and loops emails, which includes your company name, address and an unsubscribe link. Unsubscribe links help prevent your messages from being marked as spam and ensure that your messages are willingly being received by an engaged audience, helping your deliverability. The unsubscribe link leads to a Preference Center, where your contacts can manage their own subscriptions. You can edit your company address from Settings -> Domain.

​

Keyboard shortcuts

The following keyboard shortcuts are available in the editor:

​

Markdown shortcuts

The editor supports a variety of Markdown shortcuts that you can use in your emails. Add different content blocks using one of the shortcuts below followed by a space.

Shortcut	Action
#	Add a heading 1
##	Add a heading 2
###	Add a heading 3
>	Add a quote
1.	Add a numbered list
- or *	Add a bulleted list

You can format text with the following shortcuts:

Shortcut	Action
**text** or __text__	Bold text
*text* or _text_	Italicize text
~~text~~	Strike through text
[Loops](https://loops.so)	Add a link

Paste Markdown content into the editor and have it formatted correctly with ⌘+Shift+V (Mac) or Ctrl+Shift+V (Windows).