Looking for merge tags? Editable zones are about who edits what. Personalisation —
{{firstName}}, {{unsubscribeUrl}} and the rest — lives in the
Merge Tags Cheat Sheet.Declaring a zone
Putdata-editable="<name>" on a container. The container is the zone, its closing tag is
the boundary.
html
<td data-editable="body" style="padding:24px 40px; font-size:16px; line-height:1.6; color:#333333">
<p style="margin:0 0 16px 0">Hi {{firstName}},</p>
<p style="margin:0">Write your message here.</p>
</td>Nothing is marked for you. A template pasted from anywhere keeps exactly the markers it
arrived with — which is usually none. Marking is a deliberate gesture, and it is reversible:
remove the attribute and the zone is gone.
What a zone may contain
The visual editor reads the inside of a zone into its own structure. Anything it cannot represent would be silently destroyed, so instead the zone is refused: it stays visible, read-only, and you edit it in Source. Allowed inside a zone:<p> · <br> · <b> / <strong> · <i> / <em> · <u> · <s> · <a> · <ul> / <ol> /
<li> · <blockquote> · <h1>–<h6> · <img> · <hr>
A zone is refused when its content carries any of:
| What | Why |
|---|---|
<table> | Layout tables cannot survive the editor's structure |
<div>, <span>, any other tag | Not in the list above |
<!--[if mso]> | Outlook conditional comments would be dropped |
on* attributes | Never executed in mail, never kept here |
| an unclosed tag | The boundary cannot be read reliably |
The button case
The canonical email button is a table — Outlook requires it. So do not mark the wrapper:html
<!-- Wrong: the zone would contain a <table> and be refused -->
<div data-editable="cta" style="padding:0 32px 30px">
<table role="presentation"><tr><td style="background:#0f9d63; border-radius:7px">
<a href="https://example.com" style="…">Read more</a>
</td></tr></table>
</div>
<!-- Right: the zone is the label, the layout stays untouched -->
<div style="padding:0 32px 30px">
<table role="presentation"><tr><td style="background:#0f9d63; border-radius:7px">
<a data-editable="cta" href="https://example.com" style="…">Read more</a>
</td></tr></table>
</div>Line breaks inside a zone
Three gestures, and none of them invents spacing — the rhythm belongs to the template:- Enter starts a new paragraph. Its spacing is whatever the template gives paragraphs in that zone.
- Enter twice leaves a blank line. Each further Enter adds another one. Those lines are part of the content: they are saved, they survive reopening, and the recipient sees them.
- Shift + Enter breaks the line without starting a new paragraph — the second line of a signature, an address block.
Why twice? Many email designs give paragraphs no spacing of their own and control the
rhythm from the surrounding layout instead. In such a zone a paragraph left empty has nothing
to occupy: it would look like a gap while you type and vanish on the way to the inbox. So a
blank line is typed as one — Enter, then Enter again — and it is a blank line everywhere.
- Inside a list, Enter moves to the next item, and Enter on an empty item leaves the list — the usual way out.
- In a button label, neither gesture does anything. A label is one line by definition, and a second one would break the button on its way to the recipient.
Rules the document must satisfy
- Names are unique. The name is the address used to save; two zones sharing one is ambiguous and the document is refused.
- Zones never nest. Marking a container that already wraps a zone is refused.
{{unsubscribeUrl}}stays outside every zone. That is what makes it impossible to delete from the visual editor — not a guard, simply the fact the editor never sees it. Saving verifies it survived, and refuses otherwise.- Void elements cannot be zones —
<img>,<br>,<hr>hold no content.
Names are labels, not keys
The name you write appears in the interface: it is what the "add a zone" list shows.body and
intro are fine for structure, but a template meant to offer reusable blocks reads better with
Blue callout or Primary button.
The template is its own block library
The editor never invents design. Adding a block means duplicating a zone that already exists — the copy is the original, so it carries the exact same styling, including whatever the surrounding layout contributes. The consequence is worth planning for: a template offers as many block types as it declares zones. One zone, one type. Ship one exemplar of every block you want available — a callout, a button, a two-column row — and they become reusable for every campaign built from that template.Duplicating copies the whole table row, not just the cell, so the block keeps its layout
context. Every marker inside the copied slice is renamed at once — a row carrying
title and
body produces title-2 and body-2.Dark mode still applies
Nothing here changes the dark mode rules. One point deserves attention: those rules are usually keyed to the exact inline style string, as in[style*="color:#1a1a1a"]. Keep your inline declarations written the same way throughout the
document — a stray space after a colon is enough to stop the selector matching, and the text stays
dark on a dark background.