Diseñar correos electrónicos con arrastrar y soltar

Descripción general

El constructor de correos electrónicos de arrastrar y soltar de OneSignal te permite diseñar visualmente correos responsivos, exactamente como aparecerán en las bandejas de entrada de los usuarios—sin escribir HTML completo. Constituyes correos electrónicos usando tres componentes principales:

Configuración – estilos globales y diseño aplicados a todo el correo
Filas – contenedores de diseño horizontal que controlan estructura y responsividad
Contenido – bloques individuales como texto, imágenes, botones y HTML

Esta guía te orienta a través de cada componente y muestra la forma recomendada de construir un correo del principio al fin.

Usa el constructor de correos de arrastrar y soltar si quieres:

Diseñar correos visualmente sin manejar 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 (predeterminado)

Sigue este orden para mejores resultados y reducir problemas de renderizado:

Configura estilos globales en Configuración
Agrega estructura de diseño usando Filas
Inserta bloques de Contenido
Agrega personalización y enlaces
Agrega enlaces 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 o menos
Renderizarse claramente en móvil y escritorio
Incluir enlaces de cumplimiento necesarios

Importar tus propias plantillas

Si ya tienes plantillas de correo HTML, puedes agregarlas a OneSignal a través de:

Reenvío de plantillas de correo electrónico
API Create Template
Copiar y pegar HTML en el Editor HTML

Configuración

La configuración define el diseño fundamental y estilo de tu correo electrónico. Estos valores se propagan en cascada a las filas y bloques de contenido a menos que se reemplacen explícitamente.

Configuración de diseño	Descripción
Ancho del área de contenido	Ancho del correo (píxeles). Recomendado: `600px`.
Alineación del área de contenido	Alinea 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, a menos que se reemplace. Las fuentes personalizadas requieren HTML.
Color de enlace	Color predeterminado para todos los enlaces.
Idioma	Establece el atributo `lang` HTML para accesibilidad. Predeterminado es inglés.

Valores predeterminados recomendados: Configura tanto estilo como sea posible en la configuración para garantizar consistencia y reducir reemplazos por bloque.

Filas

Las filas definen el diseño horizontal de tu correo electrónico. 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.

Usa filas para controlar diseño y espaciado. Evita depender de bloques de contenido individuales para decisiones principales de diseño.

Eliminar y duplicar filas

Seleccione la fila y use los íconos de eliminar y duplicar.

Filas guardadas

Haga clic en el ícono de guardar en cualquier fila para reutilizarla en todas las plantillas. Las actualizaciones a una fila guardada opcionalmente pueden aplicarse a todas las plantillas que la usan.

Para acceder a las filas guardadas, vaya a la pestaña Rows y abra el menú desplegable de filas guardadas:

Categorías del menú desplegable:

Empty – plantillas de fila en blanco
My Saved Rows – filas que ha guardado
Sample Rows – plantillas preconstruidas por OneSignal

Propiedades de fila

Haz clic en el borde exterior de la fila para editar configuraciones 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.

Propiedades de fila	Descripción
Fondo	Color o imagen detrás de la fila. Recomendado: Establece color de fondo en configuración para consistencia.
Bordes	Color, ancho y estilo del borde.
Diseño	Mostrar u ocultar fila en móvil o escritorio.
Columnas	Agregar, eliminar o redimensionar columnas y ajustar relleno de columna.

Evita usar imágenes de fondo en filas. El soporte del cliente de correo es inconsistente. Si una fila contiene solo una imagen, usa un Bloque de Imagen en su lugar.

Contenido

Los bloques de contenido son los elementos reales que los usuarios ven—texto, imágenes, botones, divisores y HTML. Arrastra bloques de contenido a columnas de fila. Se adaptan automáticamente al ancho de la columna.

Reglas de decisión para bloques de contenido:

Usa Bloques de Texto para la mayoría del texto.
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 de arrastrar y soltar soporta fuentes del sistema por defecto. Para usar fuentes personalizadas, debes usar bloques HTML.

Bloque HTML

<!-- Coloca esto en un bloque HTML en la parte superior de tu correo -->
<style type="text/css">
  /* Declara Bebas Neue (carga solo en clientes que soportan fuentes web) */
  @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>

Valores predeterminados recomendados: Usa fuentes del sistema para texto del cuerpo, fuentes personalizadas solo para títulos.

Muchos clientes de correo (incluyendo Gmail y Outlook para Windows) no cargan fuentes web. Siempre incluye fuentes de respaldo o usa imágenes para tipografía garantizada.Para “forzar” una fuente específica, considera usar imágenes con la fuente deseada.

Imágenes y video

Puedes subir imágenes al panel de OneSignal para hacerlas accesibles a tu equipo. Cambia y aplica efectos de imagen como recorte, filtrado y más directamente en el editor. También puedes usar URLs para imágenes y videos. Asegúrate de que estén accesibles a través de la URL proporcionada.

Tamaños de imagen recomendados para correo

Proporciones de aspecto:

Imágenes de encabezado/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 rejillas 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 para 2x para pantallas Retina (ej: 1200px de ancho, mostrado en 600px)

Tamaño de archivo:

Mantén imágenes individuales bajo 100–200KB
Tamaño total del correo (incluyendo imágenes) bajo 1MB
Más pequeño = tiempos de carga más rápidos y mejor entregabilidad

Formatos de archivo:

JPG: Mejor para fotos
PNG: Mejor para gráficos, logos, transparencia
GIF: Para animaciones simples (mantén el tamaño de archivo pequeño)
WebP: Aún no ampliamente soportado en correos — evitar

Otros consejos:

Siempre incluye texto alt 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)
Prueba entre clientes (Gmail, Outlook, Apple Mail todos renderizan diferente)
- Outlook a menudo ignora dimensiones de imagen, así que establece atributos width y height en HTML

Enlaces

El seguimiento de enlaces está habilitado de forma predeterminada. El seguimiento de múltiples enlaces está disponible. Consulte Enlaces y Deep Linking para más detalles.

Enlaces de cancelación de suscripción

Todos los correos de marketing deben contener un enlace de cancelación de suscripción. Sin un enlace de cancelación de suscripción, tus correos tienen mayor probabilidad de ser marcados como spam. Para más detalles, consulta Enlaces de cancelación de suscripción. OneSignal proporciona un enlace de cancelación de suscripción predeterminado que, cuando se usa, cancelará la Suscripción de correo del usuario. También puedes incluir tu propia URL de cancelación de suscripción personalizada si lo deseas. Solo asegúrate de manejar adecuadamente las suscripciones de correo (detalles en Crear una página de cancelación de suscripción personalizada). Agrega el [unsubscribe_url] predeterminado de OneSignal a tu correo a través de:

Bloque HTML: <a href="[unsubscribe_url]">Cancelar suscripción</a>
Selecciona tu texto y usa la opción Enlaces especiales en el editor, o establece [unsubscribe_url] en el campo URL

Bloques HTML

Los bloques HTML permiten marcado y estilo personalizados.

JavaScript no es soportado
CSS en línea recomendado
Algunos clientes eliminan clases e IDs

Los bloques HTML son el mejor lugar para estilo avanzado como reemplazos de modo oscuro. Consulta Mejores prácticas de estilo de modo oscuro.

Personalización

Usa plantillas liquid para personalizar mensajes. Ejemplo: {{ first_name | default: "there" }}

Personalizando mensajes usando plantillas Liquid

Para más detalles, consulta Personalización de mensajes y Uso de sintaxis Liquid.

Emojis

Los emojis pueden renderizarse de manera diferente en diferentes plataformas de correo.

Guardar su trabajo

Puedes guardar tu diseño de correo como una plantilla para uso futuro.

Preguntas frecuentes

¿Cómo manejar el modo oscuro?

La mayoría de los correos se renderizan aceptablemente en modo oscuro, pero asegúrate de probar. Para estilo avanzado de modo oscuro, usa bloques HTML, consulta Mejores prácticas de estilo de modo oscuro.

¿Cómo agregar un enlace de cancelación de suscripción personalizado?

Para detalles, consulta Crear una página de cancelación de suscripción personalizada.

Primeros pasos & configuraciones

Canales de mensajería

Journeys

Audiencia & eventos personalizados

Analítica & Integraciones

Privacidad & Seguridad

Diseñar correos electrónicos con arrastrar y soltar

Descripción general