Diseñar correos electrónicos con arrastrar y soltar
Crea correos electrónicos responsivos visualmente con el Constructor de Correos Drag and Drop de OneSignal — configuraciones, filas, bloques de contenido, personalización y enlaces de cumplimiento.
El Constructor de Correos Drag and Drop de OneSignal te permite diseñar visualmente correos responsivos exactamente como aparecen en las bandejas de entrada de los destinatarios — sin escribir HTML completo.Construyes correos usando tres componentes principales:
Configuración – estilos globales y diseño aplicados a todo el correo
Filas – contenedores de diseño horizontal que controlan la estructura y responsividad
Contenido – bloques individuales como texto, imágenes, botones y HTML
Las secciones a continuación cubren cada componente y el orden recomendado para construir un correo.
Usa el Constructor de Correos Drag and Drop si quieres:
Diseñar correos visualmente sin gestionar HTML completo (bloques HTML disponibles)
Reutilizar filas o plantillas entre campañas
Permitir que miembros del equipo no técnicos editen contenido de forma segura
Si necesitas control HTML completo, fuentes personalizadas en todas partes o lógica avanzada de modo oscuro, usa el Editor HTML en su lugar.
Sigue este orden para mejores resultados y menos problemas de renderizado:
Configura estilos globales en Configuración
Añade estructura de diseño usando Filas
Inserta bloques de Contenido
Añade personalización y enlaces
Añade un enlace de cancelación de suscripción (para correos de marketing)
Guarda como plantilla o envía
Cuando termines, tu correo debería:
Tener un ancho de 600px como máximo
Renderizarse correctamente en móvil y escritorio
Incluir los enlaces de cumplimiento necesarios
Errores comunes que causan problemas de renderizado o entregabilidad:
Enlace de cancelación de suscripción ausente — obligatorio para correos de marketing. Sin él, los proveedores de buzón de correo tienen más probabilidades de marcar tu correo como spam.
Correo más ancho de 600px — provoca desplazamiento horizontal en móvil y rompe diseños en muchos clientes.
Imágenes de fondo en filas — Outlook y varios clientes móviles no las renderizan. Usa bloques de Imagen en su lugar.
Sin fuentes de reserva — las fuentes web personalizadas solo cargan en pocos clientes. Siempre declara fuentes del sistema como reserva.
Imágenes de gran tamaño — los correos de más de 1 MB cargan lentamente y pueden ser bloqueados. Las imágenes individuales deben tener menos de 200 KB.
La configuración define el diseño fundamental y los estilos de tu correo. Estos valores se aplican en cascada a filas y bloques de contenido a menos que se reemplacen explícitamente.
Panel de configuración global en el Editor Drag and Drop
Ajuste de diseño
Descripción
Ancho del área de contenido
Ancho del correo en píxeles. Recomendado:600px.
Alineación del área de contenido
Alinear contenido a la izquierda o al centro.
Color de fondo
Color detrás del área de contenido.
Color de fondo del área de contenido
Color dentro del área de contenido.
Fuente predeterminada
Aplicada a todo el texto salvo que se reemplace. Las fuentes personalizadas requieren HTML.
Color de enlace
Color predeterminado para todos los enlaces.
Idioma
Establece el atributo HTML lang para accesibilidad. Predeterminado es inglés.
Predeterminado recomendado: Configura el máximo de estilos posible en Configuración para garantizar consistencia y reducir reemplazos por bloque.
Las filas definen el diseño horizontal de tu correo. Cada fila puede contener una o más columnas, y cada columna puede contener bloques de contenido.Arrastra y suelta filas en el editor para construir tu estructura.
Añadiendo filas para estructurar un correo
Usa filas para controlar el diseño y el espaciado. Evita depender de bloques de contenido individuales para decisiones de diseño principales.
Las filas guardadas te permiten reutilizar cabeceras, pies de página o secciones repetidas entre correos y plantillas.Haz clic en el icono de guardar en una fila para guardarla.
Guardar una fila para reutilización
Accede a las filas guardadas desde Rows > Saved rows.
Haz clic en el borde exterior de una fila para editar la configuración a nivel de fila.
Si ves Contenido en lugar de Fila al pasar el cursor, has seleccionado un bloque de contenido. Haz clic en el borde del contenedor exterior hasta que la etiqueta muestre Fila.
Propiedad de fila
Descripción
Fondos
Color o imagen detrás de la fila. Recomendado: establece el color de fondo en Configuración para consistencia.
Bordes
Color, ancho y estilo del borde.
Diseño
Mostrar u ocultar filas en móvil o escritorio.
Columnas
Añadir, eliminar o redimensionar columnas y ajustar el relleno de columna.
Eliminar/Duplicar
Selecciona una fila y usa los iconos de eliminar o duplicar para quitarla o copiarla.
Evita usar imágenes de fondo en filas. El soporte de clientes de correo es inconsistente. Si la fila contiene solo una imagen, usa un Bloque de Imagen en su lugar.
Los bloques de contenido son los elementos que ven los destinatarios — texto, imágenes, botones, divisores y HTML.Arrastra un bloque de contenido a una columna de fila. Se adapta automáticamente al ancho de la columna.
Bloques de contenido disponibles
Reglas de decisión para bloques de contenido:
Usa bloques de Texto para la mayor parte del contenido.
Usa bloques de Imagen para elementos visuales o tipografía personalizada.
Usa bloques HTML solo cuando necesites estilo o comportamiento avanzado.
El Editor Drag and Drop soporta fuentes del sistema por defecto. Para usar fuentes personalizadas, debes usar un bloque HTML.
HTML block
<!-- Place this into a HTML block at the top of your email --><style type="text/css"> /* Declare Bebas Neue (only loads in clients that support web fonts) */ @font-face { font-family: 'Bebas Neue'; font-style: normal; font-weight: 400; src: url('https://fonts.gstatic.com/s/bebasneue/v9/JTUSjIg69CK48gW7PXoo9Wlhzg.ttf') format('truetype'); }</style><h1 style="font-family:'Bebas Neue', Arial, Helvetica, sans-serif; font-size:36px; line-height:1.2; margin:0; text-transform:uppercase;"> ¡Bienvenido!</h1><p style="font-family:Arial, Helvetica, sans-serif; font-size:16px; margin:12px 0 0;"> Gracias por suscribirte.</p>
Muchos clientes de correo (incluidos Gmail y Outlook para Windows) no cargan fuentes web. Usa fuentes del sistema para el texto del cuerpo y reserva las fuentes personalizadas solo para títulos. Siempre incluye fuentes de reserva o usa imágenes para tipografía garantizada.
Sube imágenes directamente al panel de OneSignal para que tu equipo pueda reutilizarlas. El editor soporta recorte, filtrado y otros efectos. También puedes referenciar imágenes y vídeos alojados externamente por URL — asegúrate de que cada URL sea públicamente accesible.
Todos los correos de marketing deben contener un enlace de cancelación de suscripción. Los correos sin uno tienen más probabilidades de ser marcados como spam por los proveedores de buzón de correo. Cuando un destinatario hace clic en el enlace de cancelación de suscripción predeterminado de OneSignal, su Suscripción de correo se establece automáticamente como cancelada.Añade la etiqueta [unsubscribe_url] a tu correo usando cualquiera de los métodos:
Editor (Special links)
HTML block
Selecciona el texto que quieres convertir en el enlace de cancelación de suscripción.
Haz clic en el icono de enlace en la barra de herramientas.
Elige Special links > Unsubscribe.
Añadiendo el enlace de cancelación usando Special links en el editor
Pega lo siguiente en un bloque HTML:
<a href="[unsubscribe_url]">Unsubscribe</a>
Enlaces de cancelación de suscripción
Requisitos de cumplimiento y cómo OneSignal gestiona las cancelaciones de suscripción.
Página de cancelación personalizada
Reemplaza el flujo de cancelación predeterminado con tu propia página con marca.
Usa plantillas Liquid para insertar contenido específico del suscriptor como nombres, etiquetas o valores de reserva. Ejemplo: {{ first_name | default: "there" }}
Usar plantillas Liquid para personalizar mensajes
Personalización de mensajes
Variables de personalización disponibles y cómo usarlas.
Uso de sintaxis Liquid
Condicionales, filtros, bucles y patrones Liquid avanzados.
La mayoría de los correos se renderizan de forma aceptable en modo oscuro sin cambios. Sin embargo, los correos con colores de marca, logos sobre fondos blancos o secciones de colores a menudo necesitan ajustes.
Usa el botón Modo de previsualización para obtener una previsualización general del renderizado en modo oscuro. Esta previsualización es una aproximación — el renderizado real varía según el proveedor de buzón de correo (consulta la tabla de comportamiento de clientes a continuación).
Preview mode in the Drag and Drop Editor
Light and dark mode toggle in the Drag and Drop Editor
Cómo los clientes de correo gestionan el modo oscuro
Cada cliente de correo aplica el modo oscuro de forma diferente. No puedes controlar este comportamiento directamente, pero puedes diseñar correos que se rendericen bien en todos los modos.
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
Fallos comunes de modo oscuro a vigilar:
Logos que desaparecen — un logo oscuro en un PNG transparente se vuelve invisible sobre un fondo oscuro. Añade un contorno blanco o claro, o usa una versión con fondo claro incorporado.
Texto ilegible — el texto oscuro sobre fondo claro puede permanecer oscuro tras invertir el fondo. Siempre combina las anulaciones de color de texto con anulaciones de fondo.
Colores de marca que chocan — los colores de marca saturados que quedan bien sobre blanco se vuelven agresivos sobre fondos oscuros. Prueba alternativas desaturadas o más suaves.
Botones invisibles — los botones CTA con texto oscuro sobre fondo del color de la marca pueden perder contraste tras una inversión parcial.
Consejos de diseño:
Evita el blanco puro (#FFFFFF) y el negro puro (#000000). Usa blancos cercanos y grises oscuros para reducir el impacto de los clientes con inversión total.
Usa PNGs transparentes con cuidado. Se mezclan bien con cualquier fondo, pero los logos oscuros sobre fondos transparentes se vuelven invisibles en modo oscuro. Añade un contorno claro o usa una versión con fondo incorporado para los logos.
En imágenes que incluyen texto, contornea el texto oscuro en blanco para garantizar legibilidad. Para texto blanco sobre fondo oscuro, contornea en negro.
Si solo algunos elementos se renderizan mal en modo oscuro, puedes reemplazarlos con bloques HTML y anular el estilo directamente usando clases CSS y declaraciones !important.
1
Añade un bloque HTML en la parte superior de tu correo
Arrastra un bloque HTML a la primera fila de tu correo.
Adding an HTML block to the top of your email
2
Añade CSS de modo oscuro
Pega lo siguiente en el bloque HTML. La media query prefers-color-scheme: dark aplica estilos solo cuando el cliente de correo del destinatario está en modo oscuro.
¿Cómo añado un enlace de cancelación de suscripción personalizado?
Reemplaza el [unsubscribe_url] predeterminado con tu propia URL. Eres responsable de actualizar el estado de Suscripción de correo en OneSignal cuando un destinatario cancela su suscripción. Consulta Crear una página de cancelación de suscripción personalizada para los detalles de configuración.
Outlook en Windows usa el motor de renderizado de Microsoft Word, que no soporta CSS moderno. Los problemas comunes incluyen max-width ignorado, imágenes de fondo colapsadas y fuentes web ausentes. Prueba específicamente en Outlook y usa CSS en línea con atributos explícitos de width y height en las imágenes.
Mantén el tamaño total del correo (HTML + imágenes) por debajo de 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”. Optimiza las imágenes y elimina código no utilizado para mantenerte por debajo de este umbral.
¿Puedo reutilizar partes de un correo en múltiples campañas?
Sí. Guarda cualquier fila como Fila Guardada haciendo clic en el icono de guardar de la fila. Las filas guardadas aparecen en Rows > My Saved Rows y pueden arrastrarse a cualquier correo. Para la reutilización de correos completos, guarda todo el diseño como una plantilla.
Usa el botón Previsualizar en la barra de herramientas superior para ver cómo se renderiza tu correo en escritorio y móvil. Para enviar una prueba en vivo, haz clic en Enviar correo de prueba e introduce una dirección de destinatario. Los correos de prueba se entregan en la bandeja de entrada para que puedas verificar el renderizado, los enlaces y la personalización en clientes de correo reales.
Sí, pero se renderizan de forma diferente entre clientes de correo. Outlook en Windows es el más inconsistente — los emojis pueden aparecer como contornos en blanco y negro o cuadros. Si los emojis forman parte de tu línea de asunto o texto CTA, prueba entre clientes antes de enviar.
