> ## Documentation Index > Fetch the complete documentation index at: https://documentation.onesignal.com/llms.txt > Use this file to discover all available pages before exploring further. # 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. ## 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](./design-emails-with-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ñ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. *** ## 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 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. *** ## 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 HTML block theme={null}

¡Bienvenido!

Gracias por suscribirte.

``` 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 ` ``` Reemplaza los bloques de contenido que no se renderizan correctamente en modo oscuro con bloques HTML que usen las clases CSS definidas anteriormente. ```html email-header theme={null} ``` ```html email-body theme={null} ``` ```html email-button theme={null} ``` 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**](./templates) 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](./create-custom-unsubscribe-page) 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](./templates). ### ¿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](./email-template-forwarding) 2. Usa la [API Crear plantilla](/reference/create-template) para subir HTML programáticamente 3. Copia y pega tu HTML directamente en el [Editor HTML](./design-emails-with-html) ## Páginas relacionadas Guía completa para enviar correo con OneSignal. Control HTML completo, anulaciones de modo oscuro y estilos avanzados. Guarda y reutiliza diseños de correo entre campañas. Añade enlaces de cancelación predeterminados o personalizados para cumplimiento. Personaliza correos con etiquetas, sintaxis Liquid y contenido dinámico. Prueba líneas de asunto, contenido y horarios de envío para optimizar el engagement.