Creador de correos HTML
HTML Email Builder
Monta un correo por bloques como HTML basado en tablas y con estilos en línea, incluido un botón respaldado por VML, y escribe la versión en texto plano a partir de los mismos bloques.
Un editor por bloques que solo puede producir la maquetación en la que los clientes de correo coinciden: tablas anidadas, estilos en línea y un botón dibujado dos veces para que el motor de Word de Outlook reciba una forma real en lugar de un enlace de texto con un fondo inútil. Exporta juntos el HTML y la alternativa en texto plano, y el texto se escribe a partir de los bloques, no eliminando etiquetas.
Mensaje
Bloques
- Título
- Párrafo
- Botón
- Separador
- Dos columnas
- Pie
Vista previa
Esto no es una captura del cliente. Es tu HTML con las reglas de recorte documentadas de ese cliente aplicadas, dibujado aquí por este navegador.
- Outlook para Windows renderiza con Microsoft Word. Este panel es un navegador: puede mostrarte lo que Word conservaría después de la limpieza, pero no cómo lo maquetaría Word. Los saltos de línea, el espaciado y el escalado de las imágenes (Word supone 96 dpi frente a una pantalla de 120 dpi) serán distintos.
Quitado para este cliente · 2
Declaraciones: border-radius: 6px · border-radius: 8px
El botón se dibuja dos veces: una figura VML para el motor Word de Outlook y un enlace para todo lo demás. Solo uno de los dos llega a verse.
Lo que el revisor dice de esta salida
Nada que se rompa ni que se degrade. Para eso se construye así.
4,98 kB · 5 % de los 102 KB de Gmail
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="es" xml:lang="es" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>Esta semana en Example</title>
<!--[if mso]>
<xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml>
<![endif]-->
</head>
<body style="margin:0;padding:0;background:#f2f4f7;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%">
<div style="display:none;max-height:0;overflow:hidden;mso-hide:all;font-size:1px;line-height:1px;color:#f2f4f7">Lo que cambió esta semana y dónde leer el resto‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ </div>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#f2f4f7" style="background:#f2f4f7">
<tr>
<td align="center" style="padding:24px 12px">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" bgcolor="#ffffff" style="width:100%;max-width:600px;background:#ffffff;border-radius:8px">
<tr><td align="left" style="padding:24px 24px 8px;font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:26px;line-height:1.35;font-weight:700;color:#1f2328">La novedad de esta semana</td></tr>
<tr><td align="left" style="padding:8px 24px 16px;font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:15px;line-height:1.75;color:#1f2328">Hola.<br>Esto es lo que cambió esta semana. La maquetación está hecha con tablas, así que llega entera a Outlook.</td></tr>
<tr><td align="center" style="padding:16px 24px"><!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com/news" style="height:46px;v-text-anchor:middle;width:240px;" arcsize="13%" stroke="f" fillcolor="#1a56db"><w:anchorlock/><center style="color:#ffffff;font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:16px;font-weight:700;">Leer la nota completa</center></v:roundrect><![endif]--><!--[if !mso]><!-- --><a href="https://example.com/news" target="_blank" style="display:inline-block;min-width:192px;background:#1a56db;color:#ffffff;font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:16px;font-weight:700;line-height:46px;text-align:center;text-decoration:none;border-radius:6px;padding:0 24px;mso-hide:all">Leer la nota completa</a><!--<![endif]--></td></tr>
<tr><td style="padding:8px 24px"><table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td height="1" style="height:1px;line-height:1px;font-size:0;background:#e3e6ea"> </td></tr></table></td></tr>
<tr><td style="padding:8px 24px"><table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td width="276" valign="top" style="font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:15px;line-height:1.7;color:#1f2328;padding-right:12px">Esta es la columna izquierda. Las dos son una sola fila de una tabla.</td><td width="276" valign="top" style="font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:15px;line-height:1.7;color:#1f2328;padding-left:12px">Y esta es la derecha. No hay flexbox de por medio, así que el motor de Word las deja una al lado de la otra.</td></tr></table></td></tr>
<tr><td align="left" style="padding:16px 24px 28px;font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:15px;line-height:1.7;color:#1f2328;font-size:12px;line-height:1.7;color:#6b7280;">Dirección del remitente · Seúl<br><a href="https://example.com/unsubscribe" target="_blank" style="color:#6b7280;text-decoration:underline">Darse de baja</a></td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>Texto plano
Lo que cambió esta semana y dónde leer el resto La novedad de esta semana ========================= Hola. Esto es lo que cambió esta semana. La maquetación está hecha con tablas, así que llega entera a Outlook. Leer la nota completa: https://example.com/news —————————————————————————————— Esta es la columna izquierda. Las dos son una sola fila de una tabla. Y esta es la derecha. No hay flexbox de por medio, así que el motor de Word las deja una al lado de la otra. —————————————————————————————— Dirección del remitente · Seúl Darse de baja: https://example.com/unsubscribe
Se genera a partir de los bloques, no quitando etiquetas: por eso los enlaces se leen como frases y no como un muro de URL.
Cómo se usa
Configura el mensaje
Asunto, preencabezado, ancho y colores. El preencabezado es la línea gris que la lista de la bandeja muestra después del asunto; si lo dejas vacío, el cliente toma el primer texto que encuentre, que suele ser «Ver en el navegador».
Apila los bloques
Título, párrafo, imagen, botón, dos columnas, separador, espaciador, pie. El bloque de dos columnas es una fila de tabla, no una media query, así que sigue siendo de dos columnas en los clientes que ignoran las media queries.
Observa la vista previa y el veredicto
Los mismos paneles por cliente que el comprobador, y debajo, la lectura que el propio comprobador hace de esta salida. Debería quedar vacía: ese es el sentido de construirlo así.
Exporta las dos partes
Envíalas como multipart/alternative. Un mensaje solo en HTML puntúa peor en todos los filtros de spam y es ilegible para cualquier cosa que lea el correo en voz alta.
Preguntas frecuentes
¿Por qué el botón aparece dos veces en el HTML?
Una copia es una forma VML dentro de un comentario <!--[if mso]-->, que solo lee el motor de Word de Outlook; la otra es un ancla normal dentro de un comentario que Word ignora. Exactamente una de las dos es visible en cada caso. Sin la mitad VML, Outlook descarta el relleno y solo el texto en sí es pulsable.
¿El texto en coreano se verá bien en Windows?
La pila de fuentes pone Apple SD Gothic Neo, Malgun Gothic y Noto Sans KR antes que cualquier tipografía latina, porque Outlook, cuando falla una fuente web, recurre a Times New Roman en lugar de a la siguiente fuente; una pila que empieza por una latina es como el hangul acaba convertido en cuadrados.
¿Puedo pegar aquí mi propio HTML?
No: esta página solo construye. El HTML existente va al comprobador de compatibilidad, que te dirá qué cambiar y generará el marcado de sustitución para los elementos que lo necesiten.
Puede recibir de
Comprobar compatibilidad de correos HTML
HTML Email Compatibility Check
Contrasta el HTML de un correo con lo que cada cliente admite de verdad, señala el elemento que lo rompe y muestra lado a lado qué sobrevive en Gmail, Outlook y los demás.
Tabla de compatibilidad de clientes de correo
Email Client Support Table
Qué admiten Gmail, Outlook, Apple Mail, Yahoo, Samsung Mail y Thunderbird en el HTML de un correo, según las pruebas en dispositivos de caniemail, con la fecha del último ensayo de cada dato.
Después
Estas aceptan lo que produce esta herramienta, así que el resultado puede pasar directamente.
Tabla de compatibilidad de clientes de correo
Email Client Support Table
Qué admiten Gmail, Outlook, Apple Mail, Yahoo, Samsung Mail y Thunderbird en el HTML de un correo, según las pruebas en dispositivos de caniemail, con la fecha del último ensayo de cada dato.
Comparar el correo enviado con el recibido
Sent vs Delivered Comparison
Envía un borrador desde tu propia cuenta a una dirección desechable y muestra qué reescribió el camino de salida: enlaces envueltos en redirecciones, bloques de estilo eliminados, balizas añadidas y la codificación usada.
Comprobar compatibilidad de correos HTML
HTML Email Compatibility Check
Contrasta el HTML de un correo con lo que cada cliente admite de verdad, señala el elemento que lo rompe y muestra lado a lado qué sobrevive en Gmail, Outlook y los demás.
Comprobar un enlace sospechoso
Suspicious URL Check
Examina la forma de un enlace antes de que lo abras —caracteres que imitan a otros, IP en lugar de dominio, trucos con @, subdominios profundos, puertos raros, acortadores— y, si lo pides, sigue sus redirecciones y consulta cuándo se registró el dominio; no consulta ninguna base de reputación.
Inspector de archivos comprimidos
Archive Inspector
Abre un ZIP sin extraerlo y señala las entradas con rutas que se escapan del directorio, los ejecutables, las macros y las bombas de descompresión.
Conversor de audio
Audio Converter
Convierte entre MP3, WAV, FLAC, AAC, OGG y Opus con ajustes de bitrate y frecuencia de muestreo.