Using the drag-and-drop composer

Every newsletter and template you build in Letterhead is a stack of blocks: a heading, a paragraph, an image, a button, a poll, a set of curated stories. You build an email by adding blocks, putting them in order, and styling them. This article covers how that works in general; each kind of block has its own article under Adding blocks.

The three tabs

The panel on the right of the composer has three tabs:

• Blocks lists every kind of block you can add, grouped under Create, Dynamic content, Layouts and, when you’ve connected one, Integrations. Click a block that’s already in your email and this panel shows that block’s own settings instead.
• Styles sets the defaults for the whole email: its width on desktop and on phones, and the default look of blocks, buttons, dividers, text, images and promotions. If your channel has a brand kit, you can apply it here to restyle the whole email in one step. See Managing brand kits.
• Library holds your saved blocks, ready to reuse.

A block’s own settings always win over the email-wide defaults on the Styles tab, so change a default when you want every block to follow it, and change a block when you want only that one to differ.

Add a block

There are two ways to add a block:

• Drag it in. Drag a block from the Blocks tab (or a saved block from the Library tab) into your email and drop it where you want it. A line shows where it will land.
• Use the +. Hover between two blocks, or over an empty email, and a + appears. Click it and pick the block you want; it’s added right there.

Once a block is in place, click it to open its settings and fill it in.

Move, copy and delete blocks

• Move a block by dragging it: hover over its edge until the move cursor appears, drag it to its new position, and release. Blocks snap into place in the order you drop them.
• Copy or delete a block from the small menu that appears beside it when you select it. The same menu lets you save the block to your library.

Place content side by side

The Layouts group on the Blocks tab holds blocks that sit next to each other in a row, such as an image beside text, two images, or two columns of text. A layout’s settings let you set how wide its columns are, and, where it’s offered, turn on Stack Content on Mobile so the columns sit one above the other on a phone instead of squeezing side by side.

If an email you started from a template already has a two-column section, click the piece inside it you want to change, such as the image or the heading. Its own settings open, and changing one side leaves the other alone. Borders belong to the section as a whole, so set them on the section rather than on the pieces inside it.

Mobile settings

Most readers open newsletters on a phone, so a few settings apply only on small screens and leave the desktop version alone:

• Mobile Width on the Styles tab sets how wide the email is on phones.
• Mobile Font Size on the Styles tab, under Text, sets one text size for the whole email on phones. Turn it on and it replaces the font sizes set on individual blocks when the email is read on a phone.
• Mobile Padding sets the space around a block on phones. Set the default for every block on the Styles tab under Block. To give one block different spacing on phones, open its settings and turn on Use Mobile Padding, then set the top, bottom, left and right values. Leave it off and the block keeps its regular padding on every screen.

Switch to the mobile preview at the top of the composer to check spacing and text size before you send. To hide a block on phones or on computers entirely, see Show a block on desktop or mobile only.

Editing with your teammates

Up to five people can work on the same newsletter or template at once, and everyone’s changes appear for the others as they’re made:

• You see who’s there. The composer shows who else is in the draft, which block each person is working in, and where their cursor is.
• One person per block. A block a teammate is already editing is locked to you, marked Currently being edited, until they move on. Pick another block in the meantime.
• A sixth person can look but not edit. If five people are already editing, the next person to open the draft sees it read-only, with a message saying so. They can edit once someone leaves and they reopen it.
• Saving is automatic. The composer saves a few seconds after someone stops typing, and when they leave, so nobody overwrites anyone else’s work. You can keep typing or changing settings while a save runs.

Any member of your company can open and edit a company template, not only administrators, and the same collaboration works there.

On the Campaigns page, a newsletter someone is editing shows their initials next to its edit icon. Once they’ve been away from the draft for a couple of minutes, the initials clear, so the list shows who is working now, not who opened it earlier.

When it’s ours to fix

If a block won’t drop where you put it, a change you made doesn’t save, or a block stays locked after everyone else has left the draft, contact support and tell us which newsletter it is.