Descripción general
El Editor HTML te permite enviar correos electrónicos completamente personalizados y con marca usando tu propio HTML. Deberías usar el Editor HTML cuando:- Necesites control completo sobre diseño, espaciado y estilo
- Ya tengas plantillas de correo HTML listas para producción
- Estés cómodo trabajando dentro de las limitaciones de los clientes de correo
Los correos HTML no son iguales a las páginas web. Muchas características HTML y CSS no están soportadas o se renderizan inconsistentemente entre clientes de correo.
Prerrequisitos
Antes de usar el Editor HTML, asegúrate de:- Tener experiencia construyendo correos HTML responsivos
- Alojar todas las imágenes en URLs accesibles públicamente (tu sitio, CDN, S3, etc.)
Resultado esperado
Después de la configuración, tu correo:- Se renderiza consistentemente en los principales clientes (Gmail, Outlook, Apple Mail)
- Rastrea clics de enlaces correctamente
- Incluye un mecanismo de cancelación de suscripción funcional
- Pasa las verificaciones de spam y entregabilidad
Importar tus propias plantillas
Si ya tienes plantillas de correo HTML, puedes agregarlas a OneSignal de cualquiera de las siguientes maneras:- Usa el Reenvío de plantillas de correo electrónico
- Crea plantillas programáticamente usando la API Create Template
- Copia y pega tu HTML en el Editor HTML
Usar el Editor HTML
Al crear un mensaje de correo, selecciona Editor HTML como el tipo de editor.- Pega o escribe tu HTML en el editor.
- Usa Enviar correo de prueba para previsualizar el renderizado en clientes y dispositivos.
- Corrige problemas de diseño antes de programar o enviar.
Enlaces y seguimiento
El seguimiento de enlaces está habilitado por defecto para correos HTML. El seguimiento de múltiples enlaces está soportado, y los clics aparecen en los informes de mensajes.Enlaces
Configura el seguimiento de enlaces, el seguimiento de múltiples enlaces y el análisis de clics para correo.
Deep linking
Dirige a los destinatarios a pantallas específicas de tu app desde los enlaces del correo.
Enlaces de cancelación de suscripción
Todos los correos de marketing deben incluir un enlace de cancelación de suscripción. Los correos sin una opción válida de cancelación tienen más probabilidades de:- Ser marcados como spam
- Dañar la reputación del remitente
- Ser bloqueados por los proveedores de buzón
- Enlace de cancelación predeterminado de OneSignal
- Usar una página de cancelación personalizada (opcional)
Incluye el siguiente marcador de posición en cualquier lugar de tu HTML (normalmente en el pie de página):Cuando se hace clic, este enlace cancela la Suscripción de correo del destinatario en OneSignal.
HTML
Mejores prácticas para correos HTML
Usar siempre CSS en línea
La mayoría de los clientes de correo eliminan bloques<style> y hojas de estilo externas.
Prueba esta herramienta: Responsive Email CSS Inliner
Estilo de modo oscuro
Muchos clientes de correo aplican inversión automática de colores cuando el modo oscuro está habilitado. Esto puede causar resultados impredecibles — los botones pueden aparecer con fondo negro y texto negro, o los logos pueden desaparecer. Define explícitamente cómo debe verse tu correo en modos claro y oscuro para evitar estos problemas.Cómo los clientes de correo gestionan el modo oscuro
| Cliente | Comportamiento | ¿Respeta CSS prefers-color-scheme? |
|---|---|---|
| Apple Mail (iOS/macOS) | Inversión total de colores | Sí |
| Gmail (apps iOS/Android) | Inversión parcial — cambia fondos claros pero no todos los colores | No |
| Gmail (Web) | Sin renderizado en modo oscuro | N/A |
| Outlook (Windows) | Inversión total usando el motor de renderizado de Word | No — ignora la mayoría de anulaciones CSS |
| Outlook (Mac/iOS) | Inversión parcial | Sí |
| Yahoo Mail | Inversión parcial | No |
| Samsung Mail | Inversión total | No |
Mejores prácticas
- Define estilos base en línea. Siempre establece colores de fondo y texto directamente en los elementos en lugar de depender de valores predeterminados o transparencia.
- Usa consultas de medios para modo oscuro. Los clientes que soportan
@media (prefers-color-scheme: dark)(Apple Mail, Outlook Mac/iOS) te permiten anular estilos para modo oscuro. - Aplica
!importantcon moderación. Agregar!importanta las anulaciones de modo oscuro ayuda a evitar que los buzones apilen reglas de inversión sobre tus estilos personalizados. - Señala soporte de tema. Incluye las siguientes meta etiquetas en el
<head>de tu HTML para reducir la auto-inversión:
- Evita el blanco puro y el negro puro. Usa blancos cercanos y grises oscuros para reducir el impacto de los clientes con inversión total.
- Usa PNGs transparentes con cuidado. Los logos oscuros sobre fondos transparentes se vuelven invisibles en fondos oscuros. Añade un contorno claro o usa una versión con fondo incorporado.
Para una guía paso a paso sobre cómo añadir CSS de modo oscuro usando el Editor Drag and Drop, consulta Estilo de modo oscuro con drag and drop.
Tamaños de imagen recomendados para correo
Proporciones de aspecto
Proporciones de aspecto
- Imágenes de cabecera/banner:
3:1o4:1(ej.:600×200o600×150) - Imágenes hero:
16:9o2:1(ej.:600×338o600×300) - Imágenes cuadradas:
1:1(ej.:300×300) — bueno para cuadrículas de productos - Miniaturas:
1:1o4:3 - Ancho máximo:
600–700pxes estándar (la mayoría de clientes de correo) - Diseña en
2xpara pantallas Retina (ej.:1200pxde ancho, mostrado en600px)
Tamaño de archivo
Tamaño de archivo
- Mantén imágenes individuales bajo
100–200 KB - Tamaño total del correo (incluidas imágenes) bajo
1 MB - Imágenes más pequeñas significan tiempos de carga más rápidos y mejor entregabilidad
Formatos de archivo
Formatos de archivo
- JPG — mejor para fotos
- PNG — mejor para gráficos, logos e imágenes con transparencia
- GIF — para animaciones simples (mantén el tamaño de archivo pequeño)
- WebP — aún no ampliamente soportado en correo; evitar
Consejos generales
Consejos generales
- Siempre incluye texto alternativo para accesibilidad y cuando las imágenes no cargan
- Usa CSS en línea para estilos (muchos clientes eliminan etiquetas
<style>) - Evita imágenes de fondo (soporte inconsistente entre clientes)
- Prueba entre clientes — Gmail, Outlook y Apple Mail todos renderizan diferente
- Outlook a menudo ignora dimensiones de imagen, así que establece atributos
widthyheighten HTML
Añadir texto alternativo a las imágenes
El texto alternativo mejora la accesibilidad y asegura que la información se transmita incluso cuando las imágenes están bloqueadas o no cargan. La mayoría de los principales clientes de correo muestran y estilizan el texto alternativo:| Cliente de correo | ¿Bloquea imágenes? | ¿Muestra texto alt? | ¿Estiliza texto alt? |
|---|---|---|---|
| AOL | Sí | Sí | Sí |
| Gmail | Sí | Sí | Sí |
| Yahoo | Sí | Sí | Sí |
| Outlook | A veces | Sí | Sí |
Usar solo HTML compatible
Los clientes de correo no soportan:- JavaScript
<iframe>- Formularios HTML
- Audio o vídeo incrustado
- Trucos de posicionamiento o capas CSS
Validar antes de enviar
Antes de enviar, verifica lo siguiente:- Todos los enlaces funcionan (los enlaces rotos perjudican la entregabilidad y pueden activar filtros de spam)
- El enlace de cancelación funciona correctamente
- Los correos de prueba se renderizan en Gmail, Outlook y Apple Mail
- El renderizado en modo oscuro es aceptable
- El HTML usa etiquetas semánticas e indentación correcta para accesibilidad y mantenibilidad
Si tu correo se renderiza correctamente en los principales clientes y la cancelación funciona, está listo para enviar.
Personalización
Usa plantillas Liquid para insertar contenido específico del suscriptor como nombres, etiquetas o valores de reserva directamente en tu HTML. Ejemplo:{{ first_name | default: "there" }}
Personalización de mensajes
Variables de personalización disponibles y cómo usarlas.
Uso de sintaxis Liquid
Condicionales, filtros, bucles y patrones Liquid avanzados.
Preguntas frecuentes
¿Puedo reutilizar mis plantillas de correo existentes?
Sí. Reenvíalas a OneSignal mediante el Reenvío de plantillas de correo, súbelas con la API Create Template, o copia y pega el HTML directamente en el editor.¿Puedo usar fuentes personalizadas?
Sí, pero el soporte varía. Declara fuentes personalizadas con@font-face e incluye siempre fuentes del sistema como reserva. Outlook en Windows ignora completamente las fuentes web y recurre a los valores predeterminados del sistema.
¿Por qué mi correo se ve diferente en modo oscuro?
Cada cliente de correo aplica el modo oscuro de forma diferente — algunos invierten completamente los colores, otros parcialmente, y Gmail web no aplica modo oscuro en absoluto. Consulta la tabla de comportamiento de clientes anterior para más detalles. Define estilos explícitos de modo claro y oscuro para controlar el renderizado.¿Qué características HTML y CSS no están soportadas en correo?
JavaScript,<iframe>, formularios HTML, audio/vídeo incrustado y el posicionamiento CSS no están soportados. Usa CSS en línea para todos los estilos — la mayoría de los clientes eliminan bloques <style> y hojas de estilo externas.
¿Cuál es el tamaño máximo del correo?
Mantén el tamaño total del correo (HTML + imágenes) bajo 1 MB. Los correos con más de 102 KB de HTML son recortados por Gmail, que oculta el contenido bajo un enlace “Ver mensaje completo”.Páginas relacionadas
Diseñar correos con arrastrar y soltar
Constructor de correo visual para diseñar correos sin escribir HTML completo.
Descripción general de correo
Guía completa para enviar correo con OneSignal.
Plantillas de correo
Guarda y reutiliza diseños de correo entre campañas.
Enlaces de cancelación de suscripción
Añade enlaces de cancelación predeterminados o personalizados para cumplimiento.
Personalización de mensajes
Personaliza correos con etiquetas, sintaxis Liquid y contenido dinámico.
Reenvío de plantillas de correo
Importa plantillas HTML de correo existentes a OneSignal.