¿Buscas las etiquetas de combinación? Las zonas editables tratan de quién edita qué. La
personalización (
{{firstName}}, {{unsubscribeUrl}} y las demás) vive en la
Chuleta de etiquetas de combinación.Declarar una zona
Pondata-editable="<name>" en un contenedor. El contenedor es la zona, su etiqueta de cierre es el límite.
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>Nada se marca por ti. Una plantilla pegada desde cualquier sitio conserva exactamente los
marcadores con los que llegó, que normalmente son ninguno. Marcar es un gesto deliberado, y es
reversible: quita el atributo y la zona desaparece.
Qué puede contener una zona
El editor visual lee el interior de una zona en su propia estructura. Todo lo que no puede representar se destruiría en silencio, así que en su lugar la zona se rechaza: sigue visible, en solo lectura, y la editas en Código. Permitido dentro de una zona:<p> · <br> · <b> / <strong> · <i> / <em> · <u> · <s> · <a> · <ul> / <ol> /
<li> · <blockquote> · <h1>–<h6> · <img> · <hr>
Una zona se rechaza cuando su contenido lleva cualquiera de estos:
| Qué | Por qué |
|---|---|
<table> | Las tablas de maquetación no sobreviven a la estructura del editor |
<div>, <span>, cualquier otra etiqueta | No está en la lista anterior |
<!--[if mso]> | Los comentarios condicionales de Outlook se perderían |
atributos on* | Nunca se ejecutan en un email, nunca se conservan aquí |
| una etiqueta sin cerrar | El límite no se puede leer de forma fiable |
El caso del botón
El botón de email canónico es una tabla: Outlook lo exige. Así que no marques el envoltorio:html
<!-- Mal: la zona contendría una <table> y se rechazaría -->
<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>
<!-- Bien: la zona es el texto, la maquetación queda intacta -->
<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>Saltos de línea dentro de una zona
Tres gestos, y ninguno inventa espaciado: el ritmo pertenece a la plantilla.- Intro empieza un párrafo nuevo. Su espaciado es el que la plantilla da a los párrafos en esa zona.
- Intro dos veces deja una línea en blanco. Cada Intro adicional añade otra. Esas líneas forman parte del contenido: se guardan, sobreviven al volver a abrir y el destinatario las ve.
- Mayús + Intro corta la línea sin empezar un párrafo nuevo: la segunda línea de una firma, un bloque de dirección.
¿Por qué dos veces? Muchos diseños de email no dan a los párrafos espaciado propio y
controlan el ritmo desde la maquetación que los rodea. En una zona así, un párrafo vacío no tiene
nada que ocupar: parecería un hueco mientras escribes y desaparecería de camino a la bandeja de
entrada. Así que una línea en blanco se teclea como tal (Intro y luego Intro otra vez) y es una
línea en blanco en todas partes.
- Dentro de una lista, Intro pasa al elemento siguiente, e Intro en un elemento vacío sale de la lista: la forma habitual de salir.
- En el texto de un botón, ningún gesto hace nada. Un texto de botón es una sola línea por definición, y una segunda rompería el botón de camino al destinatario.
Reglas que debe cumplir el documento
- Los nombres son únicos. El nombre es la dirección usada para guardar; dos zonas que comparten uno son ambiguas y el documento se rechaza.
- Las zonas nunca se anidan. Marcar un contenedor que ya envuelve una zona se rechaza.
{{unsubscribeUrl}}queda fuera de todas las zonas. Eso es lo que hace imposible eliminarlo desde el editor visual: no es una protección, simplemente el editor nunca lo ve. Al guardar se comprueba que ha sobrevivido, y si no, se rechaza.- Los elementos vacíos no pueden ser zonas:
<img>,<br>,<hr>no contienen nada.
Los nombres son etiquetas, no claves
El nombre que escribes aparece en la interfaz: es lo que muestra la lista "añadir una zona".body e intro sirven para la estructura, pero una plantilla pensada para ofrecer bloques reutilizables se lee mejor con Blue callout o Primary button.
La plantilla es su propia biblioteca de bloques
El editor nunca inventa diseño. Añadir un bloque significa duplicar una zona que ya existe: la copia es el original, así que lleva exactamente el mismo estilo, incluido lo que aporte la maquetación que la rodea. Conviene planificar la consecuencia: una plantilla ofrece tantos tipos de bloque como zonas declara. Una zona, un tipo. Incluye un ejemplar de cada bloque que quieras tener disponible (un destacado, un botón, una fila a dos columnas) y se vuelven reutilizables para cada campaña creada a partir de esa plantilla.Duplicar copia la fila de tabla entera, no solo la celda, así que el bloque conserva su contexto
de maquetación. Todos los marcadores de la porción copiada se renombran a la vez: una fila que
lleva
title y body produce title-2 y body-2.El modo oscuro sigue aplicándose
Nada de esto cambia las reglas del modo oscuro. Hay un punto que merece atención: esas reglas suelen apuntar a la cadena exacta del estilo en línea, como en[style*="color:#1a1a1a"]. Escribe tus declaraciones en línea siempre de la misma forma en todo el documento: basta un espacio de más después de los dos puntos para que el selector deje de coincidir, y el texto se queda oscuro sobre un fondo oscuro.