Creador de plantillas de correo HTML
Crea un boletín o un anuncio por correo apilando bloques: encabezado, texto, imagen, botón, dos columnas, divisor, espaciador y pie. La herramienta genera HTML basado en tablas con estilos en línea que funciona en Gmail, Outlook y Apple Mail, listo para pegar en tu plataforma de email.
Última actualización:
Añadir bloques arrastra a la lista o haz clic
Bloques
Editar bloque
Ajustes del correo
Cómo usar Creador de plantillas de correo HTML
- Elige una plantilla inicial o empieza en blanco, y define el ancho del correo, los colores y la fuente en Ajustes del correo.
- Añade bloques arrastrándolos desde la paleta a la lista de bloques, o haz clic en un tipo de bloque para añadirlo al final.
- Edita un bloque seleccionándolo: cambia su texto, enlaces, URL de imagen, colores y alineación en el panel debajo de la lista.
- Reordena arrastrando los bloques o con los botones ↑ y ↓. Revisa las vistas previas de escritorio y móvil.
- Copia o descarga el HTML y pégalo en el editor de HTML personalizado de tu plataforma de email. Reemplaza las URL de imágenes de ejemplo por imágenes alojadas en tu sitio.
Cómo se construye el correo generado
El resultado sigue las convenciones en las que confían los desarrolladores de email para una amplia compatibilidad. El fondo de la página es una tabla de ancho completo; dentro hay una tabla contenedora de ancho fijo (600 px por defecto) con una fila por bloque. Cada elemento de texto lleva su propio style en línea con fuente, tamaño, interlineado y color, porque algunos clientes descartan los bloques <style> o restablecen los estilos heredados.
- Las dos columnas usan la técnica "híbrida": dos divs
inline-blockcon un ancho máximo se colocan uno al lado del otro cuando hay espacio y se apilan en pantallas estrechas, incluso en apps que ignoran las media queries. Outlook para Windows recibe una tabla equivalente mediante comentarios condicionales<!--[if mso]>. - Los botones son un enlace con relleno dentro de una celda de tabla con color, así que se muestran aunque las imágenes estén bloqueadas y todo el botón es clicable.
- Las imágenes llevan un atributo
widthfijo para Outlook más los estiloswidth:100%; max-widthpara que se reduzcan en el móvil. Rellena siempre el texto alternativo: mucha gente lee el correo con las imágenes desactivadas. - El preencabezado es texto oculto seguido de caracteres de espaciado invisibles, lo que evita que la vista previa de la bandeja de entrada muestre las primeras palabras del cuerpo.
Compatibilidad de los clientes de correo de un vistazo
| Función | Gmail (web/app) | Apple Mail / iOS | Outlook para Windows | Outlook.com / nuevo Outlook |
|---|---|---|---|---|
| Estilos en línea | Sí | Sí | Sí (CSS limitado) | Sí |
<style> en el head con media queries | Sí | Sí | Se ignora en parte | Sí |
border-radius en botones | Sí | Sí | No (esquinas rectas) | Sí |
| Fuentes web | No | Sí | No | No |
| Imágenes de fondo | Parcial | Sí | Necesita VML | Parcial |
| Data URI / imágenes locales | Bloqueadas | Se muestran | Bloqueadas | Bloqueadas |
La compatibilidad cambia a medida que se actualizan los clientes; prueba con la vista previa de tu plataforma de email o enviando mensajes de prueba a cuentas reales antes de un envío grande.
Lista de comprobación antes de enviar
- Reemplaza cada imagen de ejemplo por una imagen alojada en una URL pública https:// y mantén el HTML total por debajo de unos 100 KB (Gmail recorta los mensajes más grandes).
- Usa las etiquetas de combinación de tu plataforma para el nombre, el enlace de baja y el enlace para ver en el navegador.
- Incluye tu dirección postal física en el pie y una forma clara de darse de baja.
- Escribe un asunto de menos de unos 50 caracteres y un preencabezado que añada información en lugar de repetirla.
- Comprueba el contraste del texto y usa un cuerpo de texto de 14 px o más (16 px se lee mejor en el móvil).
- Envía pruebas a Gmail, Outlook y un iPhone, con las imágenes activadas y desactivadas.
Preguntas frecuentes
¿Por qué los correos HTML usan tablas en lugar de divs?
Muchos clientes de correo, sobre todo Outlook para Windows (que usa Microsoft Word para mostrar el HTML), tienen un soporte de CSS limitado. Las tablas anidadas con anchos fijos y estilos en línea son la forma más fiable de conseguir el mismo diseño en todas partes.
¿Por qué los estilos están en línea?
Algunos clientes eliminan o ignoran los bloques <style>, así que cada elemento lleva su propio atributo style. El correo generado también incluye un pequeño bloque <style> con una media query que apila las columnas en el móvil, para los clientes que lo admiten.
¿Qué ancho debe tener un correo?
600 px es el valor seguro de siempre; de 600 a 640 px cabe en el panel de lectura de la mayoría de los clientes de escritorio. En el móvil, el contenedor se reduce al ancho de la pantalla.
¿Puedo usar imágenes guardadas en mi computadora?
No. Las imágenes de un correo deben estar alojadas en una URL pública https://, como tu sitio web o la biblioteca de imágenes de tu plataforma de email. Gmail y muchos otros clientes bloquean los data URI y los archivos locales. El ejemplo usa imágenes de relleno solo para la vista previa.
¿Qué es el texto de preencabezado?
El preencabezado es la línea corta que aparece después del asunto en muchas bandejas de entrada. El creador lo añade como texto oculto al principio del correo. Intenta usar de 40 a 100 caracteres que complementen el asunto.
¿El correo incluirá un enlace para darse de baja?
El bloque de pie tiene un campo para el enlace de baja. La mayoría de las plataformas de email ofrecen una etiqueta de combinación para ello (por ejemplo, un marcador como {{unsubscribe_url}}); pega esa etiqueta en el campo del enlace. En EE. UU., los correos de marketing deben incluir una opción de baja que funcione según la ley CAN-SPAM.
¿Se sube mi diseño?
No. El creador funciona en tu navegador y guarda tu trabajo en el almacenamiento local, solo en este dispositivo.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.