Help · Content

Colors, backgrounds and spacing

The colors the email is built from

Under Email are the two colors the whole template draws in: a text color and an accent. The ground the email sits on has a heading of its own, just below them.

Page

This is the page behind the email — the area outside its 600-pixel width — and the line around the email itself. In Settings its card is called Page background (around the email). It never changes a section's own background. A section carries its own background, and the two are set in different places on purpose.

The ground is one question with three answers: a Color, a Gradient, or an Image. The color field is the same one whichever answer you pick, and switching between them never loses it — a gradient's first color is the ground color, and an image's color is what shows through it.

• Color is the plain answer and the one every template starts on. A design you imported from another email service arrives with the page color the original had, sitting in this same field — change it here and the email changes with it.
• Gradient is an angle and two or three colors, each set where you want it along the blend — the same control the forms editor uses. Some inboxes draw no gradient and show the first color instead, which is worth knowing before you build a design around a blend nobody there will see.
• Image opens your library. Choose one and it fills the page behind the email; you can lay a color over it (see Color over the image, below), or take the image away again, from the same place. Some mailboxes will not draw it and will show your color instead, so pick a color that stands on its own. Press Image again to change it — it opens the library a second time.

An image on the page gets an Image fit too — Fill, Tile or Fit width, the same three answers a section's image gets, with the same Repeat down under Fit width, described under Backgrounds and borders below. A page is usually the place you want Tile: the area outside the email is as tall as the reader's window, and one image stretched over it rarely survives the stretch.

In a dark inbox, your dark palette's background replaces the ground color. A gradient or an image you set here is still drawn over it. See How your email arrives, in the chapter Before an email goes out.

Email background

The email can have a background of its own, the size of the email, with your sections on top of it. Its card sits right under the page's in Settings and is called Email background (behind your sections). It shows wherever a section's background is None — set a section to None and the email background shows through it; a section with a color of its own still paints over it.

It has four answers: None (no email background — a section set to None then shows the page), Color, Gradient and Image.

• Image opens your library. Choose one and it sits at the top of the email, the full width of the email, and shrinks with the email on mobile. When the email is taller than the image, the color carries on below it to the end of the email. That color starts as the color along the image's own bottom edge, so the image runs into it, and the last few pixels of the image fade into it in the inboxes that draw a blend. Change the color under Color below the image if you want a different one.
• Image fit works as it does on a section, with one difference: Fit width puts the image at the top once, rather than repeating it down the email. Fill stretches one image over the whole email, however tall it is, and Tile repeats it like wallpaper.
• Color over the image darkens or colors the image and the color below it alike, so the two still meet without a line. It works as it does on a section — see Color over the image, below.

Older versions of Outlook draw only the color, never the image or the blend, so choose a color your words can be read on by itself.

In a dark inbox, an email background with an image or a gradient stays exactly as you designed it — the image, the tint, the color below — and so do the sections set to None on top of it, words and all, so nothing becomes light on a light background. With no email background, a section set to None shows the page around the email, and the same is true there: over a page image or a page gradient it keeps its colors in a dark inbox, and so does the page itself — its own color stays as you chose it, so the words still read where the image is not shown (with images blocked, say). The page keeps its colors the same way when your email background is partly see-through and lets the page show through it. A section with a color of its own still turns dark, as it always does. A plain-color email background turns to your dark palette's background, the same as a section's does.

Your unsubscribe link and store address stay readable on whatever shows through a section set to None — readable here means a contrast of at least 3 to 1 with the color behind them, the same for the link and for the address: the color you chose is kept when it reads on the email background in every inbox — with its tint, without it as older versions of Outlook draw it, and along every color of a gradient — and is changed to one that does when it would not. When older versions of Outlook draw something the other inboxes do not — the email background's color without the color over its image, say — the words are chosen for the other inboxes first. Sometimes no single color can be read on all of them — a gradient from light to dark, a tinted page image, or an email background image whose tint lets dark and light parts of the image show through. Then the words are drawn as well as they can be, some inboxes may show them faintly, and the editor and the email's checks tell you, so you can give that section a background of its own or choose a different email background.

Email border

Email border is drawn around the email itself, at its 600-pixel width — not around the area outside it, which is why it is a card of its own rather than part of the page's background. It is a width, a kind of line and a color, the same row a section's border gets. Set the width to 0 and the border goes away rather than becoming an invisible one.

How links look

Links are set once, for the whole template, under Email. There is no per-link color: every link in your words gets the same look, which is what makes a link recognizable as one rather than as a word somebody colored.

Left alone, a link takes the color of the text around it and is underlined. That is what every template does until you say otherwise, and it is a perfectly good answer — the underline is doing the work.

Enable "Custom link style" and you set two things: the color, and whether links are underlined. The color starts as your accent, and you can change it to anything.

If the color is hard to read where your links sit, the card tells you — on the background behind your sections, or on a colored part of the email where you put a link — and says whether a darker or a lighter color would read there. With underline off, the same note also tells you when the color is too close to the words around it. It is a warning, not a lock: the color is yours to choose.

The block holding that link says so too, with a Change link color button that opens Settings right at the link color (Open link settings when no one color can work, below).

Sometimes no one color can work: a light background and a very dark part of the same email have no shade that reads on both. The card says so plainly. Then the answer is to disable Custom link style — links take the color of the words around them, underlined, so they read wherever those words do.

Your store can have a link style of its own, set once under Settings → Store, beside your brand colors. While New templates use your brand settings is on, a new template you make here starts with it already enabled, and enabling Custom link style in any template starts from it too, instead of from your accent. While a template's links are still exactly your store's link style, the card says:

Matches your store’s link style (Settings → Store).

Change that template's link color or underline and the line goes away, because it is no longer true. Opening a template never changes its links.

It is copied, not kept in step: changing a template's links changes only that template, and changing your store's link style never restyles a template you already have or an email already sent. A template you import or convert from another tool keeps the links it came with.

The unsubscribe link is the one exception: it always keeps its underline, whatever the switch says, and if its color would disappear into the background it is corrected to one that reads. An email is never allowed to hide its way out — that rule protects every email you send, and it is not a setting.

In a dark inbox your links keep their color when it reads there. For somebody reading with a dark palette, a link keeps the color you chose here when that color reads on your dark background as clearly as body text needs to. When it does not — a dark or medium blue on a near-black page, say — the link takes your dark text color along with the words around it, and the underline is what still marks it as a link, so disabling the underline is worth thinking about twice if your template has dark colors. The panel says:

In an inbox using your dark palette, links keep this color where it reads on your dark background. Where it does not, they take your dark text color, and the underline is what still marks them as links.

See How your email arrives, in the chapter Before an email goes out.

The unsubscribe link and your store address

In a new email both of those lines are ordinary paragraphs, so you style them the way you style any other words. Select either block and set its size, line spacing, alignment, color and typeface. Whatever color you pick, both lines are kept readable.

The way out is the phrase unsubscribe here linked inside a sentence you can rewrite, and the address is a Store address field in the paragraph under it — select either block and its size, line spacing, alignment, color and typeface are all yours. (Older templates carry them as dedicated blocks instead; those offer the same four controls on their own panel. Both shapes are described in full under Two things every email must carry, in the chapter Before an email goes out.)

Wherever the address and the unsubscribe link sit, they are kept readable. Both lines have to be visible — an address nobody can see does not count as one — so if the color you pick disappears into the band behind it, that line is drawn in a stronger one instead and a note under the color tells you it happened. It applies to the linked phrase and the address field inside a paragraph exactly as it does to the older blocks. Nothing is refused when you save; you can pick any color you like, and this is the floor under it.

Backgrounds and borders

Every section, and every block that draws a box, can carry a background and a line around it. A section's background is none, a color, a gradient or an image; a block's is none, a color or a gradient. A border is a width, a kind of line and a color.

Sections get four answers: None, a Color, a Gradient, or an Image. A section set to None draws no background of its own, so the email background (see Email background above) — or, without one, the page — shows through it; every section you already have keeps its own color until you change it. Blocks get None, Color and Gradient — a block with no background of its own lets the section behind it show through, which is not the same as a white block.

On a section, they are called Section background and Section border, on a column Column border, Column padding and Column corners, and on a block they are the Background and Border lines of the card called Block. The panels sit one under the other and ask the same questions, so each line says which of them it belongs to — you never have to scroll back up to a heading to find out what you are about to change.

A gradient is an angle and two or three colors. Set the angle in degrees, give each color its own position along the blend, and add a third with Add a color or drop back to two. The first color does double duty: some inboxes draw no gradient and show that first color on its own instead. That is worth knowing before you build a design around a blend nobody there will see.

A background image belongs to a section. Choosing Image under Section background opens your images; the color stays on offer underneath, because the color is what shows through the image and what older mailboxes paint in its place. You can lay a color over the image, and take the image away again, from the same place. A block that wants a photograph behind it wants an image block instead.

Image fit decides how the image meets the area. It appears as soon as you choose an image, on a section and on the page alike, and it has three answers:

• Fill stretches one image over the whole area and crops whatever hangs over the edges. This is what an image did before this control existed, and it is what a photograph almost always wants.
• Tile repeats the image at its own size, across and down, like wallpaper. A small texture or a pattern wants this — under Fill a 64-pixel pattern is blown up to the width of the email and goes soft.
• Fit width scales the image to the width and repeats it downward. Use it for a band or a stripe that should run the full width and carry on down a tall section. Repeat down sits under it and is on to start with; disable it and the image is drawn once, at the top and as wide as the area, and ends where it ends — an image 800 pixels tall stops after its 800 pixels, and below it the background color, with any color over the image, fills the rest.

Color over the image lays a color over the image and over the background color around and below it, to darken or color them so your words stand out. It has three answers:

• The circle with a slash is none: the image as it is.
• Color is one color. Opacity, from 0 to 100 percent, sets how strong it is. A new one starts at 0 percent, so nothing changes until you drag the slider — at 0 percent there is no color over the image at all. Choosing a different color keeps the opacity you set.
• Gradient fades the color across the area, at an angle, with two or three colors that each have an opacity of their own. A new one starts with every color at 0 percent; raise the bottom color's opacity to darken the image where your words are and keep it bright where they are not.

The color over the image is drawn in every inbox except older versions of Outlook, which show the image without it — and repeat an image you set not to repeat. In a dark inbox a section whose image has a color over it keeps its colors as you designed them, words and all, so nothing becomes light on a light color.

Your color still sits underneath in all three, so a mailbox that will not draw the image shows the color instead.

A border is a width, a kind of line and a color, on one row. Solid, dashed or dotted. No border is a width of nothing — set the width to 0 and the border goes away rather than becoming an invisible one. A button has a second one of its own, drawn around the button rather than around the block — see A button's own border and shadow, in the chapter Images, buttons and other blocks.

A space has neither, on purpose: it is meant to be invisible, so a box around it would turn a gap into a rectangle.

A column's own box

A column can carry four things of its own: a background color, a border, padding, and rounded corners. Select a column — click its label in the outline, or the Nothing in this column yet line if it is empty — and the controls appear above the block tiles.

They are the same controls a section and a block already use, and they mean the same things. Column background is one flat color: a column that has one paints over the section behind it, inside its own rounded corners, and a column that has none is see-through. Press the × beside the color to clear it and go back to see-through. A border is a width, a kind of line and a color; set the width to 0 and the border goes away. Padding is the space inside the column, between its blocks and its edge. Corners round the border.

A column background is a color, and only a color. There is no gradient and no image here — those are the section's to set, on the band the whole row sits on. A column's job is the card inside that band.

The gap between two columns is yours to set. On the section's panel, Columns and Gap share the top row, and the widths sit under them; Section background, Section border and Section padding are lines at the foot of the card. Gap is the space between one column and the next, from 0 to 64 pixels; it starts at 16. Set it to 0 and the columns touch, which is how two images sit side by side with no seam between them. A section of one column has no gap to set.

This is how you draw a card. A filled, bordered, padded column with rounded corners beside a plain one is the shape most people are reaching for when they ask for boxes side by side, and it needs nothing but these four controls.

Older versions of Outlook show square corners. The border and the padding are drawn there exactly as you set them; only the rounding is missing. Nothing else changes, so an email built this way still reads correctly in that mailbox.

There is no margin on a column, and that is deliberate. The width of an email is fixed, and your columns divide that width between them. Space outside a column would push the row past what the email has, and the last column would drop onto its own line in some mailboxes. So the space around a row of columns is the section's padding, and the space between two columns is the section's Gap. Everything you can set on a column is drawn inside it, where it is safe.

A column keeps its box when you change the column count. Go from one column to two and the first column keeps the border and padding you gave it; the new column starts plain.

Padding and margin

Every block that draws a box carries two spaces, and they are different spaces. Padding is inside — from what the block says to the edge of its background or its border. Margin is outside — from this block to the ones above and below it. Each is a set of four numbers with switches for moving sides together, and each has a row of common values.

The difference only shows once a block has a background: padding pushes the words away from the edge of the color, margin pushes the color away from its neighbors. With no background at all the two look the same on screen, and they are still different things.

A button is the one exception. Its Padding is the space inside the button itself, set with the button's own controls, so its Block card has a Margin line and no Padding line. A divider gets both, alongside its own line and width.

The Space block is still there and still worth using for a deliberate gap that belongs to nothing in particular.

An image set to Full width that still is not edge to edge — the most-asked spacing question in every email editor, and here is the whole answer: the space you are seeing belongs to the section, not the image. An image fills its column; the column sits inside the section's padding. Set the image's padding and margin to zero and the section's padding to zero, and the image runs edge to edge. If you have built emails in other tools, you have hunted this exact gap before — the rule is the same everywhere, it is just rarely written down.

Rounding a block's corners

Any block that draws a box can have rounded corners. Open Corners in the block's Block card, under Border. Set one number and all four corners round, or unlink them to round only some. Older versions of Outlook show them square.

Unlinked, the top two can round while the bottom two stay square — a heading band that sits flush on the paragraph under it. The line says what is set: None, 8 px, or all four, starting at the top left and going clockwise, like 12 · 12 · 0 · 0. Zero on all four is square again.

The corners round what the box paints. The block's background is cut to the curve, its border follows it, and what the block holds — a product's images, the words, an HTML block's own colors — is trimmed to the curve too. A block with no background and no border has nothing to round, so its corners change nothing until you give it one. In a mail app that rounds the box but does not trim what is inside it, anything that reaches the very edge of the block shows its square corners; on a block that has a Padding line, a little padding keeps it clear.

A button block is not trimmed. Its box rounds like any other, and the button inside keeps its own Button corners and its shadow, which trimming would cut off.

An image rounds with Image corners instead. They already round the image and the box around it, so an image's Block card has no Corners line.

Older versions of Outlook show square corners. Everything else in the block is drawn there as you set it; only the rounding is missing.