Saltar al contenido principal

​
Descripción general

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.

​
Flujo de construcción recomendado

Sigue este orden para mejores resultados y menos problemas de renderizado:
  1. Configura estilos globales en Configuración
  2. Añade estructura de diseño usando Filas
  3. Inserta bloques de Contenido
  4. Añade personalización y enlaces
  5. Añade un enlace de cancelación de suscripción (para correos de marketing)
  6. 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.

​
Configuración

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.
Global settings panel in the Drag and Drop Editor
Ajuste de diseñoDescripción
Ancho del área de contenidoAncho del correo en píxeles. Recomendado: 600px.
Alineación del área de contenidoAlinear contenido a la izquierda o al centro.
Color de fondoColor detrás del área de contenido.
Color de fondo del área de contenidoColor dentro del área de contenido.
Fuente predeterminadaAplicada a todo el texto salvo que se reemplace. Las fuentes personalizadas requieren HTML.
Color de enlaceColor predeterminado para todos los enlaces.
IdiomaEstablece 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.

​
Filas

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.
Adding rows to structure an email
Usa filas para controlar el diseño y el espaciado. Evita depender de bloques de contenido individuales para decisiones de diseño principales.

​
Filas guardadas

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.
Saving a row for reuse
Accede a las filas guardadas desde Rows > Saved rows.
Selecting a saved row
Categorías de filas guardadas:
  • Empty – plantillas de fila en blanco
  • My Saved Rows – filas creadas por ti o tu equipo
  • Sample Rows – ejemplos de OneSignal

​
Propiedades de fila

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 filaDescripción
FondosColor o imagen detrás de la fila. Recomendado: establece el color de fondo en Configuración para consistencia.
BordesColor, ancho y estilo del borde.
DiseñoMostrar u ocultar filas en móvil o escritorio.
ColumnasAñadir, eliminar o redimensionar columnas y ajustar el relleno de columna.
Eliminar/DuplicarSelecciona 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.

​
Contenido

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.
Available content blocks
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.

​
Fuentes personalizadas

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.

​
Imágenes y vídeo

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.

​
Tamaños de imagen recomendados para correo

  • Imágenes de cabecera/banner: 3:1 o 4:1 (ej.: 600×200 o 600×150)
  • Imágenes hero: 16:9 o 2:1 (ej.: 600×338 o 600×300)
  • Imágenes cuadradas: 1:1 (ej.: 300×300) — bueno para cuadrículas de productos
  • Miniaturas: 1:1 o 4:3
  • Ancho máximo: 600–700px es estándar (la mayoría de clientes de correo)
  • Diseña en 2x para pantallas Retina (ej.: 1200px de ancho, mostrado en 600px)
  • Mantén imágenes individuales por debajo de 100–200 KB
  • Tamaño total del correo (incluidas imágenes) por debajo de 1 MB
  • Imágenes más pequeñas significan tiempos de carga más rápidos y mejor entregabilidad
  • 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
  • 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 las dimensiones de imagen, así que establece atributos width y height en HTML

​
Enlaces

OneSignal habilita el seguimiento de enlaces por defecto y soporta el seguimiento de múltiples enlaces.

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 enlaces de correo.

​
Enlaces de cancelación de suscripción

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:

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.

​
Bloques HTML

Usa bloques HTML cuando necesites control que los bloques de contenido drag and drop no pueden proporcionar:
  • Anulaciones de modo oscuro — añade CSS prefers-color-scheme. Consulta Estilo de modo oscuro a continuación.
  • Fuentes personalizadas — declara reglas @font-face con pilas de reserva.
  • Diseños avanzados — cuadrículas de múltiples columnas, contenido condicional o marcado específico de Outlook.
JavaScript no está soportado en correo. Usa CSS en línea — muchos clientes eliminan etiquetas <style>, clases e IDs.

​
Personalización

Usa plantillas Liquid para insertar contenido específico del suscriptor como nombres, etiquetas o valores de reserva. Ejemplo: {{ first_name | default: "there" }}
Using Liquid templating to personalize messages

Personalización de mensajes

Variables de personalización disponibles y cómo usarlas.

Uso de sintaxis Liquid

Condicionales, filtros, bucles y patrones Liquid avanzados.

​
Modo oscuro

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.

​
¿Necesito estilo de modo oscuro?

Añade anulaciones de modo oscuro si tu correo incluye cualquiera de los siguientes:
  • Secciones con colores de marca — los colores saturados se vuelven agresivos en modo oscuro y perjudican la legibilidad
  • Logos o iconos sobre fondos blancos/claros — el fondo puede invertirse mientras la imagen sigue siendo clara, haciéndola invisible
  • Texto sobre fondos de colores — los fondos invertidos pueden chocar con los colores de texto no invertidos
  • Botones de llamada a la acción — los fondos de los botones pueden invertirse a colores inesperados
Si tu correo es mayormente texto con estilo mínimo, el renderizado predeterminado suele ser aceptable.

​
Previsualizar modo oscuro en el editor

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.
ClienteComportamiento¿Respeta CSS prefers-color-scheme?
Apple Mail (iOS/macOS)Inversión total de coloresSí
Gmail (apps iOS/Android)Inversión parcial — cambia fondos claros pero no todos los coloresNo
Gmail (Web)Sin renderizado en modo oscuroN/A
Outlook (Windows)Inversión total usando el motor de renderizado de WordNo — ignora la mayoría de anulaciones CSS
Outlook (Mac/iOS)Inversión parcialSí
Yahoo MailInversión parcialNo
Samsung MailInversión totalNo
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.

​
Estilo de modo oscuro con drag and drop

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.
HTML block
<meta name="color-scheme" content="light dark" />
<meta name="supported-color-schemes" content="light dark" />
<style>
  :root {
    color-scheme: light dark;
  }

  @media (prefers-color-scheme: dark) {
    .email-body {
      background-color: #1a1a1a !important;
      color: #f0f0f0 !important;
    }

    .email-header {
      background-color: #2d2d2d !important;
    }

    .email-button {
      background-color: #0a84ff !important;
    }
  }
</style>
3

Reemplaza el contenido problemático con bloques HTML

Reemplaza los bloques de contenido que no se renderizan correctamente en modo oscuro con bloques HTML que usen las clases CSS definidas anteriormente.
<div class="email-header" style="background-color: #f5f5f5; padding: 0; text-align: center;">
  <img src="https://dashboard.onesignal.com/assets/email/your-email-strategy-starts-here.jpg"
       alt="Your email strategy starts here"
       width="600"
       style="display: block; width: 100%; max-width: 600px; height: auto;" />
</div>
Vuelve al modo de previsualización para verificar que los estilos de modo oscuro se aplican correctamente.

​
Guardar tu trabajo

Guarda tu diseño de correo como una plantilla para uso futuro.
Save email as a template

​
Preguntas frecuentes

​
¿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.

​
¿Por qué mi correo se ve diferente en Outlook?

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.

​
¿Cuál es el tamaño máximo del correo?

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.

​
¿Cómo previsualizo mi correo antes de enviarlo?

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.

​
¿Funcionan los emojis en los correos?

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.

​
¿Cómo importo una plantilla HTML de correo existente?

Puedes traer plantillas HTML existentes a OneSignal de tres formas:
  1. Reenvía el correo a OneSignal usando Reenvío de plantillas de correo
  2. Usa la API Crear plantilla para subir HTML programáticamente
  3. Copia y pega tu HTML directamente en el Editor HTML

​
Páginas relacionadas

Descripción general de correo

Guía completa para enviar correo con OneSignal.

Diseñar correos con HTML

Control HTML completo, anulaciones de modo oscuro y estilos avanzados.

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.

Pruebas AB

Prueba líneas de asunto, contenido y horarios de envío para optimizar el engagement.