¿Odias los anuncios? Ir Sin publicidad Hoy 

Generador de plantilla de correo HTML

DesarrolladorTexto

[iotools_html_email_template_generator]

Guía

Generador de plantilla de correo HTML

Cree HTML de correo electrónico responsive con CSS en línea al componer bloques modulares – encabezado, hero, imagen, texto principal, botón, separador y pie de página – con una vista en tiempo real tanto en escritorio como en móvil. La salida utiliza un diseño basado en tablas y condiciones MSO para que se renderice de forma consistente en Outlook, Gmail, Apple Mail y otros clientes de correo.

Cómo Usar

Establezca la línea de asunto, el preheader, la familia de fuentes y la marca, así como los colores de fondo y de texto en la parte superior del formulario.
Active los bloques que desea incluir y rellene el contenido por bloque – logo y frase de presentación, título y subtítulo del hero, URL de imagen, párrafos del cuerpo, botón de llamado a la acción, separador y pie de página.
Mire cómo se actualiza la vista en tiempo real a la derecha. Cambie entre las anchuras de escritorio y móvil para verificar ambas disposiciones.
Haz clic en Copiar HTML para obtener el HTML con CSS en línea, o Descargar .html para guardarlo como un archivo listo para pegarlo en su sistema de envío, remitente transaccional o herramienta de campaña.

Características

Bloques modulares – Puede alternar el encabezado, el hero, la imagen, el texto principal, el botón, el separador y el pie de página independientemente.
Salida con CSS en línea – Cada estilo está incluido directamente en el elemento, por lo que no se necesitan hojas de estilo externas y no hay problemas de renderizado en Outlook ni en Gmail.
Condiciones MSO – Se incluye marcado específico para Outlook (Word engine) para mantener las anchuras y espaciado correctos en Windows Outlook.
Previsualización en tiempo real – Se renderiza una vista en tiempo real de escritorio (600px) y móvil (360px) en un marco aislado (iframe).
Personalización de marca – Selección de colores para el enfoque de marca, fondo y texto, más cuatro predefiniciones de fuentes.
Exportación en un solo clic – Copie el HTML al portapapeles o descargue un archivo listo para enviar .html archivo.
Ejecuta en su navegador – Nada se sube ni almacena. La generación ocurre completamente en el lado del cliente.

 Preguntas frecuentes

¿Por qué los correos HTML utilizan tablas en lugar de diseños modernos como flexbox o grid?

Muchos clientes de correo electrónico, especialmente Microsoft Outlook en Windows, renderizan los mensajes con el motor de Word, que tiene un soporte muy limitado para CSS y ignora flexbox, grid y la mayoría de las reglas de posicionamiento. Las tablas anidadas siguen siendo el único sistema de diseño que se renderiza de forma predecible en todos los clientes, incluyendo Gmail, Outlook, Apple Mail, Yahoo y el correo móvil web. Por eso, los correos HTML de producción siguen pareciendo el markup web de 2003: es el denominador común que sobrevive en todos los motores de renderizado.
¿Qué son las condiciones MSO y por qué los correos necesitan ellas?

Las condiciones MSO son comentarios HTML que solo son interpretados por Microsoft Outlook (motor de Word). Se ven así  y le permiten enviar marcado o estilos específicos para Outlook sin afectar a otros clientes. Se utilizan comúnmente para establecer una anchura fija del contenedor con una tabla fantasma, corregir el VML para botones y fondos, y desactivar características que Outlook renderiza incorrectamente. Sin ellas, los diseños a menudo se colapsan o se estiran de forma inadecuada en Outlook, incluso cuando parecen perfectos en todos los demás entornos.
¿Por qué el CSS de los correos debe estar enlazado en lugar de declarado en una etiqueta de estilo?

Varios clientes de correo electrónico importantes, históricamente Gmail en particular, eliminan <style> bloques o los aplican de forma inconsistente, especialmente en dispositivos móviles y en mensajes reenviados. El enlazado de CSS mueve cada regla directamente al elemento que la requiere mediante el atributo style , que todos los clientes respetan. El costo de este enfoque es la redundancia y la dificultad de mantenimiento, por lo que existen herramientas, incluyendo esta generadora, para enlazar automáticamente los estilos desde un modelo más alto.
¿Qué es un preheader y cómo afecta a las tasas de apertura de los correos?

El preheader es un fragmento corto de texto que se muestra después de la línea de asunto en la mayoría de las vistas de bandeja. Por defecto, se extrae del primer texto visible en el cuerpo del correo, que a menudo es una salutación o un texto de boilerplate que desperdicia el espacio. Incluir un elemento oculto de preheader al inicio del HTML le permite controlar exactamente qué se muestra allí. Un preheader bien redactado complementa la línea de asunto y está correlacionado con tasas de apertura más altas en la mayoría de los ensayos A/B realizados por los principales proveedores de servicios de correo electrónico.