Email Template Builder: Emails HTML

¿Qué es Email Template Builder?

Email Template Builder es un editor visual basado en bloques para crear plantillas de email HTML responsivas directamente en tu navegador. Añades bloques de contenido — cabeceras, párrafos de texto, botones, imágenes, divisores, diseños de dos columnas y pies de página — los ordenas con controles de arriba/abajo y editas cada uno mediante un panel de propiedades. Una vista previa en vivo con iframe se actualiza mientras construyes. Cuando terminas, la herramienta genera un email HTML completo basado en tablas con CSS inline, compatible con Gmail, Outlook y Apple Mail. Sin software de diseño, sin programación y sin necesidad de cuenta.

Funciones principales

• Editor de email visual basado en bloques — Construye tu email añadiendo y reordenando bloques de contenido. Siete tipos de bloque: cabecera, texto, botón, imagen, divisor, dos columnas y pie de página.
• Bloques de cabecera, texto, botón, imagen, divisor y pie de página — Cada bloque tiene su propio panel de propiedades. Las cabeceras tienen selectores de color de fondo y texto. Los bloques de texto permiten elegir el tamaño de fuente (12px–24px) y la alineación (izquierda, centro, derecha). Los bloques de botón aceptan una etiqueta, URL y par de colores. Los bloques de imagen admiten una URL, texto alternativo y ancho.
• Vista previa en vivo con alternador móvil/escritorio — El panel del editor incluye una vista previa en tiempo real con iframe. Alterna entre escritorio (ancho completo) y móvil (375px) sin salir de la pestaña del editor.
• Personalizar colores, fuentes y espaciado — La configuración global del email controla el fondo del cuerpo (#f4f4f4 por defecto), el fondo del contenido (#ffffff), el color primario, el ancho máximo (480px, 600px o 640px) y la familia de fuentes (Arial, Georgia, Helvetica o Verdana).
• Exportar HTML limpio y responsivo — La pestaña HTML muestra el código fuente generado completo: un diseño basado en tablas conforme a los estándares con CSS inline, texto preencabezado, respaldos de botones MSO VML para Outlook y una media query responsiva que colapsa a ancho completo en pantallas menores de 600px.
• Copiar HTML al portapapeles — El botón "Copiar HTML" copia toda la cadena HTML generada en un clic, con un estado de confirmación "¡Copiado!".
• Plantillas de inicio prefabricadas — Tres plantillas de inicio cargan instantáneamente: Bienvenida, Newsletter y Promo. Cada una incluye bloques preconfigurados para su propósito. Bienvenida y Newsletter usan tu color primario actual; Promo usa su propio acento rojo.
• 100% del lado del cliente — Ningún contenido de email se transmite a ningún servidor. Funciona completamente sin conexión una vez cargada la página.

Cómo usar Email Template Builder

Paso 1: Configurar los ajustes globales

Abre Próximamente: Email Template Builder y localiza la tarjeta "Configuración de email" en el panel izquierdo. Completa:

• Línea de asunto — Se convierte en la etiqueta <title> en el HTML exportado (visible en algunos clientes de email y usado para accesibilidad).
• Texto de preencabezado — La línea de vista previa oculta que aparece después del asunto en las vistas previas del buzón de entrada. Por defecto es "Texto de vista previa que aparece en el buzón...". Configúralo con un resumen convincente de una línea.
• Fondo del cuerpo / Fondo del contenido — Los selectores de color permiten escribir un valor hexadecimal o usar el selector de color nativo. El cuerpo gris claro estándar (#f4f4f4) sobre contenido blanco (#ffffff) coincide con el patrón visual de la mayoría de las grandes marcas.
• Color primario — Se usa automáticamente como fondo predeterminado para los nuevos bloques de cabecera y botón.
• Ancho máximo — Elige 480px (compacto), 600px (estándar, por defecto) o 640px (más ancho).
• Familia de fuentes — Arial (por defecto), Georgia, Helvetica o Verdana.

Paso 2: Cargar una plantilla o añadir bloques

Opción A: Cargar una plantilla de inicio. Haz clic en "Bienvenida", "Newsletter" o "Promo" en la tarjeta "Plantillas de inicio". El editor carga un conjunto completo de bloques preconfigurados para ese caso de uso. La plantilla de Bienvenida incluye una cabecera, un bloque de texto de saludo, un botón CTA "Comenzar", un divisor y un pie de página. La plantilla Promo usa un color de cabecera y botón rojo codificado (#e53e3e) e incluye un marcador de posición de imagen. Los inicios de Bienvenida y Newsletter usan tu configuración de color primario actual; la plantilla Promo usa su propio esquema de color rojo.

Opción B: Construir desde cero. Haz clic en cualquier tipo de bloque en la tarjeta "Añadir bloque". Bloques disponibles: Cabecera, Texto, Botón, Imagen, Divisor, Dos columnas, Pie de página. Cada nuevo bloque aparece al final de la lista y abre su panel de edición automáticamente.

Paso 3: Editar cada bloque

Haz clic en un bloque en la lista "Bloques" para abrir su editor. Los cambios se reflejan inmediatamente en la vista previa en vivo.

• Bloque de cabecera: Campos de texto para el título y subtítulo, más selectores de color de fondo y texto.
• Bloque de texto: Un área de texto para el contenido (los saltos de línea crean etiquetas <p> separadas), un menú desplegable de tamaño de fuente (12px a 24px) y alineación izquierda/centro/derecha.
• Bloque de botón: Texto de etiqueta, URL de destino, color de fondo del botón y color de texto del botón. El HTML generado incluye marcado MSO VML para que Outlook renderice un botón real en lugar de un enlace simple.
• Bloque de imagen: URL de imagen (o sube un archivo local), texto alternativo y ancho (por ejemplo, 100% o 400px). Las imágenes subidas se incrustan como URIs de datos Base64.
• Bloque divisor: Selector de color e entrada de grosor (1–10px).
• Bloque de columnas: Dos áreas de texto separadas para el contenido de la columna izquierda y derecha.
• Bloque de pie de página: Un área de texto para el texto del pie (los saltos de línea se convierten en párrafos separados), un par de campos de etiqueta de enlace y URL (para añadir un enlace de cancelación de suscripción, por ejemplo), más selectores de color de fondo y texto.

Usa los botones de flecha arriba/abajo para reordenar bloques. Usa el icono de papelera para eliminar un bloque.

Paso 4: Vista previa y exportación

Cambia a la pestaña Vista previa para una vista de página completa del email. Usa el alternador Escritorio/Móvil para verificar el diseño responsivo a 375px.

Cambia a la pestaña Código HTML para ver el código fuente generado. Haz clic en el área de texto para seleccionar todo el texto, o haz clic en "Copiar HTML" para copiarlo al portapapeles. El código está listo para pegar en cualquier ESP (proveedor de servicios de email) como Mailchimp, SendGrid o HubSpot.

Ejemplos prácticos

Ejemplo 1: Anuncio de lanzamiento de producto

Comienza con la plantilla de inicio "Promo". Reemplaza el texto de la cabecera con el nombre de tu producto y el eslogan de lanzamiento. Actualiza el fondo de cabecera #e53e3e a tu color de marca usando el selector de color. Cambia la URL de imagen de marcador de posición por tu captura de pantalla del producto. Edita el bloque de texto para describir el beneficio clave en una o dos oraciones. Actualiza la etiqueta del botón ("Reservar ahora") y la URL. Establece el texto del preencabezado en "Presentamos [Producto] — disponible hoy." Exporta el HTML y pégalo en tu ESP.

Ejemplo 2: Newsletter semanal

Carga la plantilla "Newsletter". Establece el asunto como "Resumen semanal — Semana del 3 de marzo de 2026". Edita el bloque de texto del artículo destacado con tu artículo principal. Añade un segundo bloque "Dos columnas" debajo para dos artículos más cortos uno al lado del otro. Añade un bloque "Botón" con "Leer el archivo completo" enlazado a tu sitio web. Ajusta el texto del pie de página para incluir tu enlace de cancelación de suscripción y la dirección postal física según lo requiere CAN-SPAM.

Ejemplo 3: Secuencia de email de bienvenida

Usa la plantilla "Bienvenida". Cambia el subtítulo de la cabecera a "Tu cuenta está lista." Edita el texto del cuerpo en tres párrafos cortos: qué puede hacer el usuario, dónde encontrar ayuda y cómo contactar con el soporte. Reemplaza la URL del botón "Comenzar" con la URL de incorporación real. Cambia a la pestaña Vista previa, alterna a la vista móvil y confirma que todo el texto es legible a 375px. Exporta y sube al flujo de trabajo de automatización de tu ESP.

Consejos y mejores prácticas

Establece tu color primario antes de cargar una plantilla. Las plantillas de inicio aplican tu color primario actual a los nuevos bloques de cabecera y botón. Cambiar el color primario después de cargar una plantilla no actualiza retroactivamente los bloques existentes — el selector de color de cada bloque es editable de forma independiente.

Usa el campo de preencabezado. Muchos constructores lo ignoran, pero el texto del preencabezado influye directamente en las tasas de apertura. El HTML generado lo oculta con display:none; ... max-height:0px; overflow:hidden — no aparecerá visualmente en el email, pero se mostrará en las vistas previas del buzón de entrada.

Los tamaños de fuente menores de 14px se renderizan mal en móvil. El menú desplegable de tamaño de fuente del bloque de texto llega hasta 12px. En la práctica, usa 14px o más para el texto del cuerpo. Usa 12px solo para avisos legales o letra pequeña en el pie de página.

Prueba el ancho máximo de 600px. El ancho máximo estándar de 600px funciona bien en todos los clientes principales. La opción de 480px es adecuada para diseños de diseño estrecho; 640px solo es apropiado para clientes que no aplican sus propias restricciones de ancho.

Los botones VML de Outlook no requieren pasos adicionales. El HTML generado ya incluye el bloque de comentario condicional MSO VML alrededor de cada botón. Si estás pegando en un ESP, asegúrate de que el ESP no elimine los comentarios HTML, ya que el marcado VML depende de ellos.

Problemas comunes y solución de problemas

La vista previa en vivo muestra un área blanca en blanco. Esto ocurre antes de añadir bloques. Añade al menos un bloque o carga una plantilla de inicio — el iframe se poblará inmediatamente.

El bloque de imagen muestra una imagen rota. La herramienta muestra la URL de imagen directamente en una etiqueta <img>. Verifica que la URL sea públicamente accesible (no detrás de autenticación) y use HTTPS. El texto alternativo que ingresas se incluye en el HTML exportado para accesibilidad.

El HTML copiado muestra un diseño roto en Outlook. Confirma que la configuración de familia de fuentes usa una pila segura para web (por ejemplo, Arial, Helvetica, sans-serif). Las fuentes web (Google Fonts, fuentes personalizadas) no se renderizan en Outlook. Las cuatro opciones de fuente en la herramienta son pilas seguras para web.

El bloque de dos columnas colapsa a una sola columna en móvil. Este es el comportamiento esperado de los comentarios condicionales MSO y el diseño de bloque en línea. En pantallas menores de 600px, la media query establece .email-container en width: 100%, y las columnas de bloque en línea del 48% de ancho se envuelven naturalmente. No hay opción para forzar columnas en paralelo en móvil.

La plantilla de inicio no usa el color de mi marca. Comprueba la configuración de color primario en la tarjeta de configuración de email antes de hacer clic en un botón de plantilla de inicio. Las plantillas leen el color primario en el momento de la carga — cambiarlo después requiere actualizar manualmente el selector de color de cada bloque.

Privacidad y seguridad

Email Template Builder construye y previsualiza el HTML del email completamente en tu navegador. Ningún contenido de plantilla, líneas de asunto o URLs de imagen se transmiten a ningún servidor. La vista previa en vivo usa un iframe con sandbox="allow-same-origin" — ningún script se ejecuta dentro de la vista previa. La herramienta funciona completamente sin conexión una vez cargada la página, lo que la hace segura para contenido de marketing confidencial o materiales de clientes.

Preguntas frecuentes

¿Es Email Template Builder gratuito? Sí. El editor de bloques completo, los siete tipos de bloque, las tres plantillas de inicio, la vista previa en vivo y la exportación de HTML son completamente gratuitos sin necesidad de cuenta. Accede a la herramienta en Próximamente: /web/social/email-template-builder.

¿Funciona Email Template Builder sin conexión? Sí, una vez cargada la página. Toda la generación de HTML ocurre en JavaScript en tu dispositivo. La vista previa en vivo carga las URLs de imagen desde su fuente (que requiere conexión), pero el editor, la gestión de bloques y la exportación de HTML funcionan sin conexión.

¿Están seguros mis datos con Email Template Builder? El contenido de tu email, las líneas de asunto y las decisiones de diseño nunca salen de tu navegador. La herramienta genera HTML localmente y no realiza ninguna solicitud al servidor con tus datos. Es seguro crear emails confidenciales de clientes o contenido de campaña propietario.

¿Qué clientes de email admite el HTML generado? La herramienta genera HTML basado en tablas con CSS inline, el método de diseño con la compatibilidad más amplia con clientes de email. Incluye condicionales MSO VML para el renderizado de botones de Outlook y una media query responsiva para clientes móviles. Está diseñado para Gmail, Outlook (2016–2024), Apple Mail y Yahoo Mail.

¿Puedo añadir más de siete tipos de bloque? El editor actual admite siete tipos de bloque: cabecera, texto, botón, imagen, divisor, columnas y pie de página. Puedes añadir el mismo tipo de bloque varias veces para construir diseños complejos — por ejemplo, bloques de texto e imagen alternados, o múltiples bloques de botón.

¿Cómo añado un enlace de cancelación de suscripción? Añade un bloque de pie de página. El editor de pie de página incluye un campo dedicado de etiqueta de enlace y un campo de URL de enlace. Introduce el texto del enlace (por ejemplo, "Cancelar suscripción") y la URL de destino. El HTML generado lo renderiza como una etiqueta <a> clicable debajo del texto del pie de página. También puedes reemplazar la URL con la etiqueta de fusión de cancelación de suscripción de tu ESP después de exportar.

¿Qué es el campo de texto de preencabezado? El texto de preencabezado es una cadena corta (típicamente 40–130 caracteres) que los clientes de email muestran después de la línea de asunto en la lista del buzón de entrada. Está oculto en el email renderizado usando CSS. La herramienta lo incluye en el HTML generado dentro de un <div> con display:none y max-height:0px.

¿Puedo guardar las plantillas que he creado? Sí. Los seguidores de Glyph Widgets pueden usar el PresetsPanel para guardar y recargar el estado completo del editor — todos los bloques, ajustes y contenido — como un preset con nombre almacenado en IndexedDB local del navegador.

¿Qué ancho máximo debo usar? 600px es el estándar de la industria y funciona correctamente en todos los clientes principales. Usa 480px si quieres un diseño más estrecho y enfocado. Usa 640px solo si has confirmado que tu ESP objetivo y los clientes lo manejan correctamente — algunas versiones antiguas de Outlook aplican sus propias restricciones de ancho.

¿Admite la herramienta fuentes personalizadas? No. Las cuatro familias de fuentes en el menú desplegable de fuentes son todas pilas seguras para web: Arial, Georgia, Helvetica y Verdana. Las fuentes web no son compatibles porque la mayoría de los clientes de email — especialmente Outlook — no cargan archivos de fuentes externos.

Herramientas relacionadas

• Próximamente: Email Extractor — Extrae y valida direcciones de email de cualquier texto, luego úsalas con las plantillas que creas aquí.
• Próximamente: Social Meta Tags — Genera etiquetas Open Graph y Twitter Card para optimizar cómo se ven las páginas de aterrizaje de tu campaña cuando se comparten en redes sociales.
• Próximamente: Hashtag Generator — Genera hashtags relevantes para las publicaciones en redes sociales que dirigen tráfico a tus formularios de suscripción de email.

Prueba Email Template Builder ahora: Próximamente: Email Template Builder de Glyph Widgets