Vous cherchez les balises de fusion ? Les zones modifiables concernent qui modifie quoi. La personnalisation —
{{firstName}}, {{unsubscribeUrl}} et les autres — se trouve dans l'aide-mémoire des balises de fusion.Déclarer une zone
Placezdata-editable="<name>" sur un conteneur. Le conteneur est la zone, sa balise fermante est la limite.
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>Rien n'est marqué à votre place. Un modèle collé depuis n'importe où conserve exactement les marqueurs avec lesquels il est arrivé — c'est-à-dire, en général, aucun. Marquer est un geste délibéré, et il est réversible : retirez l'attribut et la zone disparaît.
Ce qu'une zone peut contenir
L'éditeur visuel lit l'intérieur d'une zone dans sa propre structure. Tout ce qu'il ne sait pas représenter serait détruit en silence : la zone est donc refusée à la place — elle reste visible, en lecture seule, et vous la modifiez en mode Source. Autorisé dans une zone :<p> · <br> · <b> / <strong> · <i> / <em> · <u> · <s> · <a> · <ul> / <ol> / <li> · <blockquote> · <h1>–<h6> · <img> · <hr>
Une zone est refusée quand son contenu porte l'un de ces éléments :
| Quoi | Pourquoi |
|---|---|
<table> | Les tableaux de mise en page ne peuvent pas survivre à la structure de l'éditeur |
<div>, <span>, toute autre balise | Absente de la liste ci-dessus |
<!--[if mso]> | Les commentaires conditionnels d'Outlook seraient perdus |
attributs on* | Jamais exécutés dans un e-mail, jamais conservés ici |
| une balise non fermée | La limite ne peut pas être lue de façon fiable |
Le cas du bouton
Le bouton d'e-mail canonique est un tableau — Outlook l'exige. Ne marquez donc pas l'enveloppe :html
<!-- Faux : la zone contiendrait un <table> et serait refusée -->
<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>
<!-- Juste : la zone est le libellé, la mise en page reste intacte -->
<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>Les retours à la ligne dans une zone
Trois gestes, et aucun n'invente d'espacement — le rythme appartient au modèle :- Entrée commence un nouveau paragraphe. Son espacement est celui que le modèle donne aux paragraphes dans cette zone.
- Entrée deux fois laisse une ligne vide. Chaque Entrée supplémentaire en ajoute une autre. Ces lignes font partie du contenu : elles sont enregistrées, elles survivent à la réouverture, et le destinataire les voit.
- Maj + Entrée coupe la ligne sans commencer de nouveau paragraphe — la deuxième ligne d'une signature, un bloc d'adresse.
Pourquoi deux fois ? Beaucoup de designs d'e-mail ne donnent aucun espacement propre aux paragraphes et contrôlent plutôt le rythme depuis la mise en page environnante. Dans une telle zone, un paragraphe laissé vide n'a rien à occuper : il ressemblerait à un espace pendant la saisie et disparaîtrait en route vers la boîte de réception. Une ligne vide se tape donc comme telle — Entrée, puis Entrée encore — et c'est une ligne vide partout.
- Dans une liste, Entrée passe à l'élément suivant, et Entrée sur un élément vide sort de la liste — la façon habituelle d'en sortir.
- Dans le libellé d'un bouton, aucun des deux gestes ne fait quoi que ce soit. Un libellé tient sur une ligne par définition, et une deuxième casserait le bouton en route vers le destinataire.
Les règles que le document doit respecter
- Les noms sont uniques. Le nom est l'adresse utilisée pour enregistrer ; deux zones qui en partagent un sont ambiguës et le document est refusé.
- Les zones ne s'imbriquent jamais. Marquer un conteneur qui englobe déjà une zone est refusé.
{{unsubscribeUrl}}reste en dehors de toute zone. C'est ce qui rend impossible sa suppression depuis l'éditeur visuel — pas une garde, simplement le fait que l'éditeur ne le voit jamais. L'enregistrement vérifie qu'il a survécu, et refuse dans le cas contraire.- Les éléments vides ne peuvent pas être des zones —
<img>,<br>,<hr>ne contiennent rien.
Les noms sont des libellés, pas des clés
Le nom que vous écrivez apparaît dans l'interface : c'est ce qu'affiche la liste « ajouter une zone ».body et intro conviennent pour la structure, mais un modèle destiné à proposer des blocs réutilisables se lit mieux avec Blue callout ou Primary button.
Le modèle est sa propre bibliothèque de blocs
L'éditeur n'invente jamais de design. Ajouter un bloc, c'est dupliquer une zone qui existe déjà — la copie est l'original, elle porte donc exactement le même style, y compris ce qu'y apporte la mise en page environnante. La conséquence mérite d'être anticipée : un modèle propose autant de types de blocs qu'il déclare de zones. Une zone, un type. Livrez un exemplaire de chaque bloc que vous voulez rendre disponible — un encadré, un bouton, une rangée à deux colonnes — et ils deviennent réutilisables pour chaque campagne construite à partir de ce modèle.La duplication copie toute la ligne du tableau, pas seulement la cellule, pour que le bloc conserve son contexte de mise en page. Chaque marqueur à l'intérieur de la tranche copiée est renommé d'un coup — une ligne portant
title et body produit title-2 et body-2.Le mode sombre s'applique toujours
Rien ici ne change les règles du mode sombre. Un point mérite l'attention : ces règles sont généralement indexées sur la chaîne de style en ligne exacte, comme dans[style*="color:#1a1a1a"]. Écrivez vos déclarations en ligne de la même façon dans tout le document — une espace égarée après un deux-points suffit pour que le sélecteur ne corresponde plus, et le texte reste sombre sur un fond sombre.