Las imágenes juegan un papel clave para captar la atención de tu destinatario y dar vida al diseño de tu email. Utiliza el bloque de contenido Image (Imagen) del editor de email Drag and Drop para añadir, personalizar y mejorar tus imágenes. Ajusta el tamaño, los bordes, el texto alternativo y edita directamente dentro del editor para que tu email sea atractivo, profesional y acorde a tu marca.
🏞️ Inserta imágenes en tu diseño de email
Para insertar imágenes en tu diseño de email, primero necesitas arrastrar y soltar el bloque de contenido Image en tu lienzo de email, donde quieres que esté tu imagen:
Una vez que tu bloque de contenido Image esté insertado en tu lienzo, hay varias formas de añadir una imagen:
- Arrastra y suelta desde tu ordenador
- Carga las imágenes en tu biblioteca de contenido para poder reutilizarlas
- Insértalas desde una URL
- Utiliza variables para adaptar las imágenes a tus destinatarios
- Genera una imagen con Aura AI
Elige la pestaña correspondiente a la forma en que quieres insertar imágenes en el diseño de email:
Añade fácilmente imágenes al diseño del email arrastrándolas y soltándolas directamente desde tu equipo al bloque de contenido Imagen (Imagen). Tus imágenes se añadirán automáticamente al diseño del email y se guardarán en tu biblioteca de contenido:
Utiliza la biblioteca de contenido para cargar tus propias imágenes, utilizar imágenes de archivo o GIF, o crear imágenes directamente desde el editor de email. Para acceder a la biblioteca de contenido, coloca el cursor sobre el bloque de contenido de Image (Imagen) y haz clic en Select an image (Seleccionar una imagen):
A partir de ahí, podrás:
|
|
➡️ Para obtener más información sobre cómo usar la biblioteca de contenido, consulta el artículo dedicado Agregar y administrar imágenes en la biblioteca de contenido.
Para insertar una imagen desde una URL, tu imagen debe estar alojada en un sitio web de acceso público.
- Haz clic en el bloque de contenido de Image (Imagen). La configuración de la imagen se abre en la barra lateral izquierda.
- En la sección Visual, en el campo Image URL (URL de la imagen), pega el enlace directo a donde esté alojada tu imagen.
La imagen aparecerá en tu email sin necesidad de cargarla en tu biblioteca de contenido y no se guardará en ella. Cuando tu email esté abierto, la imagen se cargará directamente desde esa URL, por lo que cualquier actualización hecha en el archivo de tu sitio web aparecerá automáticamente en futuras visualizaciones del email.
Las variables te permiten mostrar automáticamente imágenes dinámicas y personalizadas en tu email. En lugar de insertar una imagen fija, añade una variable que se sustituirá en tiempo real cuando el email esté enviado, basándose en los datos más recientes disponibles.
| Plantilla de email en Brevo | Email recibido en la bandeja de entrada |
|---|---|
Por ejemplo, con una variable de datos de evento, cada destinatario verá la imagen de los datos que tiene actualmente vinculados en el momento de enviarlo. Los datos se actualizan automáticamente y la imagen mostrada siempre reflejará la versión más reciente de los datos, sin necesidad de actualizaciones manuales.
➡️ Para saber más sobre variables y cómo insertar imágenes con ellas, consulta nuestros artículos dedicados : Personalizar tus emails con datos de eventos, Crear y enviar recomendaciones de productos con feeds de productos, y Personalizar el contenido de tu email con datos en tiempo real (feeds de datos).
Genera fácilmente imágenes personalizadas mediante Aura como generador de imágenes integrado en el editor de email de arrastrar y soltar. Diseña objetos visuales que se adapten perfectamente a tu campaña sin necesidad de habilidades de diseño.
Para generar una imagen con Aura AI:
- Selecciona el bloque de contenido de Image (Imagen) y haz clic en Use AI (Utilizar IA) en la barra de herramientas de imágenes. Se abre un cuadro de diálogo.
- En el cuadro de diálogo, describe la imagen que quieres que cree Aura. Sé lo más específico posible para obtener los mejores resultados. Por ejemplo, "Un estudio de yoga tranquilo con la luz natural entrando por grandes ventanas, plantas de fondo y una esterilla de yoga sobre un suelo de madera".
- Elige el tamaño y estilo que quieres en las opciones desplegables correspondientes (por ejemplo, fotografía, fondo, arte vectorial, etc.).
- (Opcional) Haz clic en Add reference images (Añadir imágenes de referencia) para cargar imágenes de ejemplo que se correspondan con lo que te gustaría generar. Esto ayudará a Aura a generar exactamente lo que quieres.
- Pulsa Enter (Intro) o haz clic en el icono de la flecha ⬆ para generar la imagen. La imagen se guardará automáticamente en tu biblioteca de contenido.
Aura generará tu imagen en solo unos segundos. Si quieres editar tu imagen, puedes volver a hacer clic en Use AI (Utilizar IA) para mejorarla adaptando la indicación, o generar una nueva imagen.
🖌️ Edita tu imagen (redimensionar, recortar, texto alternativo, etc.)
Redimensionar una imagen
Para cambiar el tamaño de una imagen, haz clic en la imagen que quieras redimensionar y coloca el cursor en una de las esquinas inferiores de la imagen. Una vez que aparezca la flecha, arrastra la esquina hasta conseguir el tamaño perfecto. También puedes hacer clic en la imagen para abrir su configuración y ajustar su ancho en la sección Layout (Diseño):
Añadir texto alternativo a una imagen
| El texto alternativo es una breve descripción de la imagen que aparece si la esta no carga o para usuarios lectores de pantalla. Mejora la accesibilidad, mejora la experiencia del usuario y transmite el mensaje cuando las imágenes están bloqueadas o no están disponibles. |
Para añadir un texto alternativo a tus imágenes:
- Selecciona la imagen a la que quieras agregar un texto alternativo. La configuración de la imagen se muestra en el panel izquierdo.
- En la sección Visual del panel izquierdo, busca el campo Alt text (Texto alternativo).
-
Escribe una breve descripción de la imagen. Recomendamos escribir una descripción breve y precisa del contenido de la imagen, transmitiendo solo la información esencial. Evita escribir Imagen de y mantén la descripción centrada en el propósito de la imagen.
- (Opcional) Haz clic en el icono de {} Añadir variable para personalizar el texto alternativo con un atributo de contacto, datos de evento o variable de feed de datos.
Cómo agregar un enlace a una imagen
Agregar un enlace a una imagen te permite redirigir a tus destinatarios directamente desde tu página web, una página de producto o cualquier destino:
Para redirigir a tus destinatarios a una página web:
Haz clic en la imagen a la que quieras añadir un enlace. La configuración de la imagen se muestra en el panel izquierdo.
- En la sección Link (Enlace), haz clic en la lista desplegable Type (Tipo) y selecciona Absolute link (URL) (Enlace absoluto [URL]).
- En el campo Link (Enlace), introduce la URL de tu página.
- (Opcional) Haz clic en el icono {} Add variable (Añadir variable) para personalizar la URL con un atributo de contacto, datos de evento o variable de feed de datos.
- (Opcional) Añade una Tooltip (Descripción emergente) que aparecerá como texto de ayuda cuando pases el cursor sobre el enlace.
Para redirigir a tus destinatarios a un archivo que deseas que descarguen:
- Sube tu archivo a un proveedor externo como WeTransfer o Dropbox, y asegúrate de que el archivo sea accesible públicamente.
- Haz clic en la imagen a la que quieras añadir un enlace. La configuración de la imagen se muestra en el panel izquierdo.
- En la sección Link (Enlace), haz clic en la lista desplegable Type (Tipo) y selecciona Absolute link (URL) (Enlace absoluto [URL]).
- En el campo Link (Enlace), introduce la URL de tu página.
- (Opcional) Haz clic en el icono {} Add variable (Añadir variable) para personalizar la URL con un atributo de contacto, datos de evento o variable de feed de datos.
- (Opcional) Añade una Tooltip (Descripción emergente) que aparecerá como texto de ayuda cuando pases el cursor sobre el enlace.
Editar una imagen (recortar, cambiar color, añadir texto, etc...)
Nuestro editor Drag and Drop incluye un editor de imágenes donde puedes recortar tu imagen, agregar filtros, texto o diseños de texto. Para acceder al editor de fotos, haz clic en tu imagen y en Edit (Editar) en el panel izquierdo.
📹 Mira el siguiente vídeo para aprender a utilizar las funciones básicas del editor de imágenes:
Añadir un borde o esquinas redondeadas
Los bordes y las esquinas redondeadas pueden ayudar a que tus imágenes destaquen y aportar un estilo visual acorde con tu marca:
Haz clic en la imagen a la que quieras añadir un borde o esquinas redondeadas. La configuración de la imagen se muestra en el panel izquierdo.
Desplázate hacia abajo hasta la sección Rounded corners (Esquinas redondeadas) e introduce un tamaño de radio para tu imagen.
- Desplázate hacia abajo hasta la sección Borders (Bordes).
- Si solo quieres añadir bordes a determinados lados de la imagen, desmarca la casilla Apply to all sides (Aplicar a todos los lados). Para cada lado, introduce un tamaño y elige un color.
- De lo contrario, introduce un tamaño para tus bordes en px y elige su color.
Añadir condiciones de visibilidad a una imagen
| Elige cuándo mostrar tus propias imágenes en el email según las condiciones de visibilidad de configuración. Permite mostrar u ocultar una imagen según el dispositivo del destinatario o atributo de contacto, como la ubicación o el idioma. Es una forma sencilla de personalizar el diseño y asegurarte de que cada destinatario vea la versión más relevante del email. |
➡️ Para obtener más información sobre la visibilidad del contenido, consulte nuestro artículo dedicado Mostrar u ocultar contenido en tus emails (visibilidad del contenido).
⏭️ ¿Qué es lo siguiente?
🤔 ¿Tiene alguna duda?
Si tiene alguna pregunta, no dude en ponerse en contacto con nuestro equipo de asistencia mediante la creación de un ticket desde su cuenta. Si todavía no tiene una cuenta, puede ponerse en contacto con nosotros aquí.
Si necesitas ayuda con un proyecto usando Brevo, podemos ponerte en contacto con la agencia partner de Brevo adecuada.