Editor de bloques (nodos) del email

Referencia de cada bloque del editor drag and drop y sus opciones de configuración.

Los nodos son bloques prediseñados que permiten diseñar correos sin programar, con experiencias visuales profesionales y responsivas, y estructurar el contenido en bloques reutilizables.

Columns

Permite dividir el contenido en 2, 3 o 4 columnas con un clic. El diseño se ajusta automáticamente según el dispositivo. Define la estructura de columnas dentro de una fila (row) del correo.

Sección Columns

Sección Column Properties

Buenas prácticas: usa estructuras equilibradas; aplica color de fondo con cuidado y buen contraste con el texto; no sobrecargues cada columna; valida la visualización en móvil, porque algunas estructuras complejas se adaptan verticalmente; prueba siempre antes de enviar en diferentes clientes de correo.

Button

Personaliza el texto del botón haciendo clic sobre él (por ejemplo: Ver más, Comprar ahora, Confirmar asistencia). En el panel derecho, sección Action, defines qué sucede al hacer clic.

• Open Website: abre una URL externa (sitio web, tienda, landing page, etc.).
• URL: dirección web que se abre al hacer clic.
• Target: New Tab abre la página en una nueva pestaña; Same Tab la abre en la misma pestaña (menos común en emails).

Diseño visual

• Background Color: color del botón; debe contrastar con el fondo del email.
• Text Color: color del texto del botón; se recomienda buen contraste.
• Width: con Auto On el ancho se ajusta al contenido; desactívalo para definirlo manualmente.

Estilo de texto

• Font Weight: Regular, Bold, etc.
• Font Size: tamaño en píxeles (14px es estándar y legible).
• Line Height: espacio vertical entre líneas del texto.
• Letter Spacing: espacio entre caracteres.

Bordes y espaciado

• Rounded Border: radio de las esquinas (ejemplo: 4px).
• Container Padding: espacio interno alrededor del botón (ejemplo: 10px).

Responsive

• Hide on Desktop: el botón solo se ve en dispositivos móviles.

Heading

• Heading Type: H1 (título principal, más grande), H2 a H4 (subtítulos de menor jerarquía).
• Font Family: fuente tipográfica (Arial, Roboto, Open Sans, etc.).
• Font Weight: Regular, Bold, Light.
• Font Size: en píxeles (ej. 22px para H1).
• Color: color del texto.
• Text Align: izquierda, centrado, derecha o justificado.
• Line Height: ej. 140%.
• Letter Spacing: espaciado entre letras.
• Inherit Body Styles: hace que los enlaces adopten el estilo del texto principal (color, peso, tamaño).
• Container Padding: relleno interno (ej. 10px por lado).
• Responsive Design, Hide on Desktop: oculta el bloque solo en escritorio.

Image

• Upload Image: carga una imagen desde tu equipo, arrastrando el archivo o haciendo clic para seleccionarlo.
• Image URL: URL directa de una imagen alojada en un servidor o CDN.
• Width: con Auto On la imagen se adapta al contenedor (normalmente 100%); si lo desactivas, defines el ancho en porcentaje o píxeles.
• Align: izquierda, centrada o derecha.
• Alternate Text: descripción breve de la imagen, clave para accesibilidad y para cuando la imagen no carga. Ejemplos: «Logo de la empresa», «Banner de promoción de julio».

Menu

Ajustes aplicados desde el panel de configuración:

• Familia tipográfica: pendiente por definir (se selecciona según el diseño general).
• Peso de fuente: Regular.
• Tamaño de fuente: 14 px.
• Espaciado entre letras: 0 px.
• Color de texto: gris oscuro (#4A4A4A aprox.).
• Color de enlaces: azul (#007ACC aprox.).
• Alineación centrada; layout horizontal; separador no definido.
• Padding interno de cada ítem: Top 5 px, Right 15 px, Bottom 5 px, Left 15 px.
• Padding general del contenedor: 10 px en todos los lados.
• Responsive: puede ocultarse en dispositivos móviles mediante la opción «Hide on Desktop/Mobile» (configurable).

HTML

Bloque HTML personalizado para contenido enriquecido o funcionalidades que los bloques estándar no permiten. Configuración aplicada: padding del contenedor de 10 px en todos los lados. Sirve cuando necesitas más control del formato, etiquetas personalizadas o etiquetas avanzadas, dentro de los límites del envío de correos HTML.

Divider

• Separa bloques de contenido (por ejemplo, encabezado, cuerpo y pie de página).
• Mejora la legibilidad.
• Crea jerarquía visual.
• Da un aspecto más profesional y limpio.

Personalización común: color de la línea; grosor (1 px, 2 px, etc.); estilo (sólido, punteado, doble); alineación y margen superior/inferior.

Text

Funciones: agregar contenido informativo (introducciones, descripciones, promociones, instrucciones); incluir llamados a la acción (CTA); personalizar mensajes con etiquetas dinámicas como {{nombre}}, {{empresa}}; diseñar títulos y subtítulos con H1, H2, H3; insertar enlaces y estilos (hipervínculos, colores, tamaños, negritas, cursivas).

Opciones: tipo de fuente y tamaño; color del texto y del fondo; alineación (izquierda, centro, derecha, justificado); espaciado entre letras y líneas; estilo del enlace; responsive (visible solo en móvil o escritorio).

Social

El bloque Icons agrega enlaces a redes sociales mediante íconos.

1. Haz clic en el ícono deseado en la sección More Options.
2. Se agrega automáticamente a la lista de Social Links.
3. Ingresa la URL del perfil oficial de tu marca o empresa.
4. Opcional: elimina cualquier red con el ícono de papelera junto a cada red agregada.