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>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.