.png){kind=logo}
Contenido, bloques y más
El editor de emails de arrastrar y soltar está diseñado para que crear emails atractivos y eficaces sea sencillo. Se compone de dos secciones principales: Bloques y Contenido.
Los bloques te permiten añadir y organizar elementos como imágenes, columnas, botones, texto y más.
La sección Cuerpo te ayuda a definir el estilo general del email: color de texto, fondo y otros detalles de diseño.
También puedes subir tus propias imágenes o elegir entre nuestra biblioteca de imágenes prediseñadas. Además, la función Auditoría te permite revisar los cambios y detectar posibles errores antes de enviar.
En este artículo repasamos cada funcionalidad disponible en el editor. Haz clic en cualquier sección para ir directamente a la funcionalidad que quieras conocer.
ANTES DE COMENZAR
Los elementos de contenido solo pueden usarse dentro de un bloque.
Por ejemplo, puedes añadir un elemento de Encabezado dentro de un bloque de una sola columna.
Bloques
Cada bloque está formado por una o varias columnas. Dentro de ellas puedes añadir distintos elementos de contenido como texto, encabezados, imágenes, botones y más.
Opciones de estilo del bloque
Para ver las opciones de estilo de un bloque:
- Haz clic fuera del contenido hasta que veas el contorno del bloque.
- Haz clic sobre ese contorno.
- A la izquierda aparecerán las opciones de estilo bajo el nombre Fila.
Opciones de estilo disponibles dentro de los bloques:
|
Columnas: Un bloque puede dividirse en distintas proporciones, como:
Puedes elegir el tipo de columnas:
Cuando usas dos o más columnas, verás opciones de edición para cada una. Desde ahí también puedes añadir o eliminar columnas.
|
|
|
Propiedades de la columna Aquí puedes configurar:
Las opciones de Borde y Relleno incluyen ajustes avanzados para cada lado (superior, inferior, izquierdo o derecho). Consejo: usa un borde para crear un efecto de texto enmarcado. |
|
Propiedades de la fila
|
Las propiedades de la fila te permiten definir el color de fondo para toda la fila y las columnas. Si no se define un color de fondo para el contenido, se aplicará el color de fondo de la fila. Nota: el color de fondo de una columna tiene prioridad sobre el del contenido. Subir imagen como fondo Puedes añadir una imagen como fondo de la fila y ajustar cuánto de la imagen se muestra usando las opciones de imagen. |
|
|
|
|
|
|
Bloques guardados
Para guardar una sección del email:
- Haz clic en el bloque.
- Selecciona Guardar en la esquina inferior derecha.
- Asigna un nombre o etiquetas para organizarlo fácilmente.
Los bloques guardados se encuentran en el menú Bloques.
EJEMPLO
Añadir bloque (1 columna) + elemento Imagen, cambiar el tamaño de la imagen y cambiar el color de fondo del bloque.
Elementos de contenido
Los elementos de contenido se colocan dentro de un bloque. A veces un bloque puede referirse también como fila o columna. Estos elementos te permiten añadir texto, imágenes, botones y otros componentes.
| Las opciones de estilo varían según el elemento. A continuación, repasamos cada uno. |
|
Haz clic en cada uno de los elementos para saber más.
| Columnas | Texto |
| Encabezado | Imagen |
| Botón | Divisor |
| Menú | HTML |
| Video | Redes Sociales |
| Temporizador |
|
Columnas
| El elemento Columnas te permite añadir varias columnas dentro del diseño. Una vez creadas, puedes añadir otros elementos (texto, imágenes, botones) en cada columna. |
|
|
Texto
|
El elemento Texto te permite añadir contenido escrito a tu email. |
|
|
Puedes editar el texto desde:
Ambos se activan al hacer clic sobre el texto. |
|
Barra de herramientas de texto
|
Permite realizar cambios rápidos como, pero asegúrate antes de tener seleccionado el texto que quieres editar:
|
|
Opciones del menú de texto Desde el menú izquierdo puedes ajustar:
|
Encabezado
| El elemento Encabezado se usa para títulos y subtítulos. |
|
| Tiene una barra de herramientas más simple que el texto normal y no incluye tablas, listas ni Texto inteligente. |
|
Imagen
|
El bloque Imagen te permite:
Las imágenes de stock se guardan automáticamente en Subidas. |
|
|
|
|
|
|
Botón
|
El bloque Botón añade una llamada a la acción clara en tu email. Puedes personalizar texto, enlace, color, tamaño y alineación. El Botón inteligente sugiere textos basados en el contenido del botón o en palabras clave. |
|
Tipos de acción
Cada tipo de acción tiene diferentes opciones disponibles.
Abrir sitio web
- Introduce una URL
- Añadir destino:
- Abrir la URL en la misma pestaña.
- Abrir en una nueva pestaña.
Enviar email
Completa la información del email.
Opciones disponibles:
- Email a (Mailto:)
- Asunto
- Cuerpo
Llamar a un número
Al hacer clic, solo se verán las aplicaciones telefónicas de los destinatarios.
Ir a una sección del email
|
Todas las secciones que hayas nombrado aparecerán en el menú desplegable. Usa esta opción para crear enlaces clicables que lleven al lector a otra sección del mismo email. Por ejemplo: Puedes colocar un botón “Leer más” al inicio del email. Cuando el lector haga clic, el email se desplazará automáticamente hasta la sección correspondiente |
|
Para usar “Ir a una sección”, primero debes asignar un nombre a la sección desde las propiedades del bloque.
Espaciado
Las opciones de espaciado te permiten controlar el tamaño, la forma y la posición del botón para que encaje correctamente en el diseño del email. Incluyen:
- Alineación
- Espaciado interno
- Borde
- Borde redondeado
General
Espaciado del contenedor
Se refiere al espacio que rodea al botón dentro del contenedor.
Divisor
El bloque Divisor añade una línea horizontal para dividir secciones y mejorar la lectura.
Puedes ajustar ancho, grosor y espaciado.
Menú
|
El bloque Menú funciona como una navegación con enlaces clicables. Cada elemento puede dirigir a una web, un número de teléfono, una sección del email o iniciar un email. Puedes personalizar colores, tipografías y diseño desde la pestaña Estilos. |
|
|
Ejemplo: Usa un menú con enlaces como Recursos, Sobre nosotros y Contacto en la parte superior o inferior de tu email para mejorar la navegación y aumentar la interacción. |
|
HTML
El bloque HTML permite insertar código HTML personalizado, como firmas o formularios.
Video
El bloque Video añade una vista previa con botón de reproducción usando la URL del video.
Al hacer clic, el video se abre en una nueva ventana del navegador.
|
Puedes personalizar:
|
|
- Cualquier cambio en el propio video (como el título o la miniatura) debe hacerse en la plataforma donde está alojado.
- La mayoría de los buzones de correo no permiten reproducir videos directamente dentro del email. El bloque de Video solo muestra una imagen de vista previa con un icono de reproducción, pensada para generar clics y llevar al lector al video.
Redes sociales
El bloque Redes sociales te permite añadir iconos enlazados a tus perfiles sociales.
Para usar el bloque:
- Arrastra y suelta el bloque de Redes sociales en el diseño de tu email.
- En el menú izquierdo, haz clic en un icono de red social para añadirlo al email.
- En el campo Enlaces sociales, pega la URL de tu perfil (por ejemplo:
https://facebook.com/tumarca). - Repite el proceso para añadir tantos iconos como necesites.
Opciones de estilo:
- Tipo de icono (círculo, cuadrado, claro u oscuro)
- Alineación
- Tamaño
- Espaciado
Temporizador
El bloque Temporizador añade una cuenta regresiva en tiempo real según la zona horaria seleccionada.
Es ideal para promociones, eventos o lanzamientos con tiempo limitado.
Opciones de estilo:
- Etiquetas (días, horas, etc.)
- Colores
- Tipografías
- Tamaño
- Texto alternativo
- Enlace clicable
Cuerpo
La sección Cuerpo define el estilo base de todo el email y garantiza un diseño coherente sin necesidad de personalizar cada bloque.
Puedes configurar:
- Color de texto
- Color de fondo
- Ancho del email (600 px por defecto)
- Alineación del contenido
- Tipografía
- Grosor de fuente
- Color de enlaces
Los bloques heredan estos estilos salvo que se modifiquen individualmente.
- Puedes sobrescribir cualquiera de estos estilos dentro de bloques individuales (como un bloque de Texto o Botón). Si no realizas cambios, cada bloque heredará automáticamente los estilos definidos en la sección Cuerpo.
- Definir estilos coherentes en la sección Cuerpo te ahorra tiempo y garantiza una imagen de marca consistente en todo tu mensaje.
Imágenes y subidas
Las opciones Imagen y Subidas están disponibles exclusivamente dentro del editor de emails.
Puedes arrastrar imágenes desde estas secciones directamente al email, sin necesidad de añadir previamente un bloque de imagen.
Imágenes
|
La sección Imágenes del editor te da acceso a una biblioteca de imágenes de stock que puedes explorar y arrastrar fácilmente a tu diseño. Además, puedes usar la herramienta de IA integrada para generar imágenes personalizadas a partir de una descripción. |
|
Subidas
|
La sección Subidas almacena todas las imágenes que hayas subido, así como las imágenes de stock o generadas con IA que hayas usado en tus emails. Funciona como tu biblioteca personal de imágenes, lo que facilita reutilizar recursos visuales en distintas campañas. Desde Subidas, puedes:
|
|
Auditar
La función Auditoría revisa tu email antes de enviarlo y detecta posibles problemas, como:
- Enlaces faltantes, como botones o imágenes sin URL
- Texto ALT faltante en las imágenes, fundamental para la accesibilidad y la entregabilidad
- Secciones o bloques vacíos que no contienen contenido
- Problemas de formato o diseño inusuales
- Campos de personalización o marcadores rotos
Recomendación:
Ejecuta una auditoría antes de finalizar cualquier email para asegurarte de que esté completo, accesible y listo para enviar.