Visual · Online · Gratis
Editor de Correo HTML Online
Edita el correo viendo el resultado, y consulta el código cuando te haga falta. El lienzo, la vista previa en móvil y el HTML de salida están a un clic de distancia, en el navegador, sin nada que instalar.
Edita en el lienzo, revisa el código aparte
El editor trabaja sobre un único documento con dos modos. En modo edición ves el lienzo: haces clic en un bloque y sus opciones aparecen al lado, en el panel de inspección. En modo vista previa desaparece toda la interfaz de edición y queda solo el correo, tal como llegaría, en ancho de escritorio o de móvil.
Desde ahí, las pestañas de salida muestran lo que realmente se está generando: el HTML y el JSON que describe el documento. Es un editor visual que no te esconde el código, algo que importa cuando quien tiene que enviar o revisar el correo es otra persona distinta de quien lo diseñó.
Qué puedes poner en el lienzo
La paleta de bloques es corta a propósito: cubre lo que un correo necesita y nada que se vaya a ver distinto según el cliente de correo que lo abra.
- Texto enriquecido, con encabezados 1 a 3, negrita, cursiva, subrayado y tachado, listas, alineación, color de texto y de fondo, enlaces, emoji e insertar variable de fusión.
- Imágenes, con su propio destino de enlace y ancho.
- Botones, con forma, color y texto propios.
- Contenedores y filas de varias columnas, para poner elementos en paralelo.
- Divisores y espaciadores, para separar secciones.
- Una fila de redes sociales para el pie.
Pensado para editar rápido, no para pelear con el layout
Deshacer y rehacer cubren todo el historial del documento, así que probar una disposición distinta no cuesta nada. Cambiar entre la vista de escritorio y la de móvil es un único interruptor, no cambiar el tamaño de la ventana a mano.
Como el documento vive en tu navegador, nada de esto espera a un viaje de ida y vuelta a un servidor: cada clic se refleja al instante en el lienzo y en las pestañas de salida.
Nada que instalar, ninguna cuenta que crear
Es una página web. La abres y el editor ya está ahí: sin aplicación de escritorio, sin extensión, sin un formulario de registro entre tú y el lienzo. El trabajo se queda en el navegador y exportarlo es cuestión de copiar el resultado.
Eso sí, necesita una ventana de al menos 960 píxeles de ancho: la paleta, el lienzo y el panel de inspección van uno junto al otro, y en una pantalla pequeña no caben con comodidad.
Cuándo mirar el lienzo y cuándo mirar el código
La mayor parte del trabajo pasa en el lienzo: mover bloques, ajustar el espaciado, cambiar un color. El código es para el momento en que ese correo tiene que salir del editor — pegarlo en la plantilla de un ESP, revisarlo antes de un envío importante, o guardarlo junto al código de la aplicación que lo dispara.
No hace falta decidir por adelantado cuál de los dos vas a necesitar: como las pestañas de salida están siempre actualizadas con lo que hay en el lienzo, puedes diseñar primero y consultar el HTML solo al final, o ir mirándolo cada pocos cambios si prefieres verificar sobre la marcha.
Quien revisa el correo no tiene que ser quien lo diseñó: puedes compartir el HTML exportado con alguien que solo necesita comprobar el código, o dejar que otra persona siga editando en el lienzo a partir del JSON, sin que ninguno de los dos tenga que reconstruir nada desde cero.
Ese mismo cambio entre modos también ayuda a detectar errores de diseño antes de exportar: un bloque con demasiado padding o un color de fondo que no contrasta se nota mucho más en la vista previa, sin la interfaz de edición alrededor, que mirando el lienzo mientras se sigue trabajando en él.
La combinación de las dos pestañas de salida también sirve como comprobación cruzada: si algo se ve distinto entre el HTML y lo que esperabas, el JSON del mismo documento muestra exactamente qué valor tiene cada propiedad del bloque en cuestión, sin tener que rastrear el marcado generado línea por línea para encontrar el origen del problema.
Ese mismo hábito de comprobar antes de exportar es lo que evita sorpresas cuando el correo llega finalmente a una bandeja de entrada real.
Con la práctica, moverse entre el lienzo y las pestañas de salida deja de sentirse como dos tareas distintas y pasa a ser una sola manera de trabajar: diseñar y verificar al mismo tiempo, en vez de dejar la comprobación del código para el final.
Abre un correo ya hecho y prueba a cambiarlo
La forma más rápida de ver cómo se comporta el editor es cargar un correo terminado y empezar a tocarlo.
Preguntas frecuentes sobre esto
¿Puedo ver el HTML mientras edito?
Sí. Las pestañas de salida muestran el HTML y el JSON del documento en todo momento, no solo al final; puedes revisarlos en cualquier punto de la edición.
¿Se puede pegar un HTML que ya tengo y convertirlo en bloques?
No. El editor trabaja con sus propios bloques y no existe una importación que convierta un HTML existente en bloques editables. Lo que sí puedes pegar es texto dentro de un bloque de texto enriquecido.
¿Funciona en el móvil del que estoy leyendo esto?
No de forma cómoda: necesita una ventana de al menos 960px porque la paleta, el lienzo y el inspector se muestran lado a lado. Ábrelo en un portátil o un ordenador de escritorio.