Editor de Plantillas de Email

¿Para qué sirve esto?

El Editor de Plantillas es donde diseñas visualmente tu plantilla de email. Ves una vista previa en vivo a la izquierda y los controles de edición a la derecha. Construyes la cabecera, subes un logotipo, eliges colores de cabecera y pie, añades líneas de contacto y enlaces a redes sociales — todo sin escribir código. Al guardar, la plantilla queda disponible en la lista de Plantillas de Email y puede seleccionarse en cualquier paso de email de un Flujo (Journey).

Instrucciones Paso a Paso

1. Abrir el Editor

• Plantilla nueva: En la lista de Plantillas de Email, haz clic en CREAR PLANTILLA.
• Editar existente: En la lista, haz clic en el icono Editar (lápiz) en la fila de la plantilla.
• El Editor se abre con vista dividida: Vista previa (izquierda) y Panel de edición (derecha).

2. Definir Nombre y Descripción de la Plantilla (Metadatos)

1. En la barra de herramientas superior, haz clic en el icono Metadatos (etiqueta/base de datos) — tooltip: Añadir metadatos.
2. Aparece un formulario:
   • Nombre de la plantilla — Obligatorio. Máx. 100 caracteres. Así la identificarás en la lista y selectores de flujos.
   • Descripción de la plantilla — Opcional. Máx. 200 caracteres. Notas internas sobre propósito o audiencia.
3. Haz clic en Guardar. El nombre aparece en la pestaña del navegador y en la lista.

Importante: Debes guardar los metadatos primero (crear la plantilla en el servidor) antes de poder subir un logotipo. El botón de subida de logotipo está deshabilitado hasta que la plantilla existe.

3. Editar la Cabecera del Email

Vista previa: Barra superior coloreada con texto centrado. Controles del editor:

1. Texto de cabecera — Campo de texto. Escribe la línea de cabecera (ej.: «Actualizaciones TechConf 2024»). Máx. 50 caracteres.
2. Color de cabecera — Selector de color (icono brocha). Elige el color de fondo de la barra. Por defecto: #4CAF50 (verde).
3. Los cambios se reflejan al instante en la vista previa.

4. Añadir un Logotipo

Vista previa: Debajo de la cabecera, centrado en el área de contenido. Controles del editor:

1. Haz clic en SELECCIONAR IMAGEN.
2. Se abre el selector de archivos. Elige una imagen:
   • Tamaño máx.: 2 MB
   • Dimensiones recomendadas: 400 px ancho × 150 px alto
   • Formatos permitidos: JPEG, PNG, WebP, GIF
3. Tras seleccionar, el logotipo aparece en la vista previa.
4. Para quitarlo: haz clic en el icono Eliminar (papelera) junto al botón de subida.

Nota: La subida de logotipo solo funciona después de haber guardado la plantilla al menos una vez (metadatos guardados). Si intentas subir antes de guardar, verás: «deshabilitado: Necesitas guardar (crear) la plantilla antes de subir un logotipo».

5. Definir Color del Pie de Página

Vista previa: Barra inferior coloreada con contactos y enlaces sociales. Control del editor:

• Color del pie — Selector de color. Elige el color de fondo del pie. Por defecto: #333333 (gris oscuro). El texto del pie es siempre blanco.

6. Añadir Líneas de Contacto

Vista previa: Dentro del pie, cada línea de contacto aparece como párrafo separado. Controles del editor:

1. Haz clic en el botón + (más) en la sección Contacto del email para añadir una línea.
2. Aparece un campo de texto. Escribe un dato de contacto por línea (ej.: «+34 900 123 456», «soporte@ejemplo.com», «Calle Mayor 123, Madrid»).
3. Máx. 50 caracteres por línea.
4. Para añadir más líneas, haz clic en + otra vez.
5. Para eliminar una línea (si hay más de una), haz clic en el icono papelera de esa línea.

7. Añadir Enlaces a Redes Sociales

Vista previa: En el pie, debajo de contactos, como enlaces clicables. Controles del editor:

1. Haz clic en el botón + (más) en la sección Enlaces sociales.
2. Aparecen dos campos:
   • Nombre del enlace — Texto visible (ej.: «Twitter», «LinkedIn», «Facebook»). Máx. 50 caracteres.
   • URL del enlace — URL completa (debe empezar por https://). Máx. 300 caracteres.
3. Para añadir otro par, haz clic en + de nuevo.
4. Para eliminar un par (si hay más de uno), haz clic en el icono papelera de esa fila.

8. Guardar la Plantilla

1. En la barra superior, haz clic en Guardar plantilla (botón verde, icono disquete).
2. Toast de éxito: «¡Guardado con éxito!».
3. La plantilla ya aparece en la lista de Plantillas de Email con el nombre que diste.
4. Ahora puedes seleccionarla en cualquier paso Email del Editor de Flujos.

Reglas Importantes y Consejos

Nota: El texto de cabecera tiene límite de 50 caracteres. Sé breve y directo.

Nota: El logotipo debe ser ≤ 2 MB, recomendado 400×150 px. Imágenes mayores se aceptan pero pueden verse distorsionadas.

Nota: Líneas de contacto: máx. 50 c/u. Nombres de enlaces sociales: máx. 50 c/u. URLs sociales: máx. 300 c/u.

Nota: No puedes subir logotipo hasta guardar la plantilla una vez (metadatos). El archivo necesita el ID de la plantilla para asociarse.

Consejo: Usa la vista previa para comprobar contraste — el texto de cabecera es blanco, así que colores oscuros funcionan mejor. El texto del pie también es blanco, colores oscuros en el pie funcionan mejor.

Consejo: Incluye al menos una línea de contacto (email o teléfono) para que los destinatarios puedan responder o contactar soporte.

Consejo: Los enlaces sociales se abren en pestaña nueva. Usa siempre URLs https://.

Consejo: Para crear una variante, abre una plantilla existente, cambia lo necesario y usa Copiar en la lista en lugar de sobrescribir el original.

Preguntas Frecuentes y Solución de Problemas

P: El botón de subir logotipo está grisado / muestra mensaje «deshabilitado».
R: Aún no has guardado la plantilla. Haz clic en el icono Metadatos, pon un nombre, haz clic en Guardar, luego intenta subir el logotipo.

P: Subí un logotipo pero se ve estirado/aplastado.
R: La vista previa encaja la imagen en un cuadro de 400×150. Sube una imagen con esa proporción (8:3) para mejor resultado.

P: ¿Puedo cambiar la fuente o el tamaño de letra?
R: No en el editor actual. La plantilla usa una pila de fuentes fija y tamaños predefinidos. Solo colores, logotipo, texto de cabecera, contactos y enlaces sociales son personalizables.

P: Borré una línea de contacto por error. ¿Hay deshacer?
R: No hay deshacer. Haz clic en + para añadir una línea nueva y vuelve a escribir el texto.

P: Los enlaces sociales no aparecen en la vista previa.
R: Verifica que ambos campos (Nombre y URL) estén rellenos. Pares vacíos no se renderizan.

P: Al guardar sale toast «¡Error al guardar!».
R: Comprueba que el Nombre de la plantilla (en Metadatos) esté relleno. También que ningún campo supere su límite de caracteres. Si persiste, recarga la página e inténtalo de nuevo — tus borradores se mantienen en el navegador hasta guardar.

P: ¿Puedo previsualizar cómo se ve en móvil?
R: La vista previa es ancho escritorio (700 px). El email enviado es responsivo. Para prueba real en móvil, envía un email de prueba desde el Editor de Flujos.

P: ¿Dónde está el editor del cuerpo del email?
R: Esta plantilla define solo la estructura (cabecera, logotipo, pie, contactos, sociales). El contenido principal se compone en el Editor de Email del Flujo al crear un paso de email — escribes el mensaje allí y se inserta en el área de contenido de esta plantilla.