¡No te pierdas ni un evento!

Suscríbete ahora para mantenerte actualizado sobre las novedades de email y SMS marketing.

Sí, quiero recibir actualizaciones sobre la formación y los eventos de MailUp.
Recibe actualizaciones
por Messenger
5 min.

En el apasionante taller de hoy, veremos una característica del editor BEE de MailUp: ¡puedes añadir imágenes de fondo a tus e-mail!. Veámoslo en detalle, con la promesa de que lo que vas a aprender va a ser truco preferido para el diseño de mensajes de e-mail.

Imágenes de fondo en acción

Si te pones a buscar, descubrirás imágenes con texto superpuesto en la mayor parte de los e-mail de tu bandeja de entrada. Este ejemplo es de Skillshare:

Y este otro, de Huckberry:

Uno de Brit + Co.:

Uno de Everlane:

Podríamos seguir indefinidamente. Añadir texto a las imágenes es una gran manera de:

  • Personalizar fotos de bancos de imágenes para hacerlas propias
  • Animar a los lectores a hacer clic en una imagen
  • Poner el texto en primera plana, “above the fold” en el e-mail (en lugar de situarlo debajo de una imagen)

Sin embargo, estas “imágenes de fondo del e-mail” en realidad no son verdaderas imágenes de fondo. En realidad, el texto y la imagen son parte de un solo archivo de imagen JPG, PNG…o cualquier otro formato de imagen. El texto no es solo texto; es parte de la imagen, añadido con Photoshop o con otra herramienta. Lo que ocurre entonces es que si un bloqueo de imágenes impide la visualización de la imagen, el texto tampoco se verá. Además, cambiar el texto requiere editar la imagen.

Hoy vamos a enseñarte a crear auténticas imágenes de fondo que, a diferencia de estas, sí llevan solo texto encima. Esto significa que incluso si tus imágenes no se cargan, tu texto se conservará, y cambiar el texto no requiere editar la imagen.

También podrás ver cómo repetir una imagen en una fila entera para crear un patrón o una textura.

Esta nueva capacidad del editor de e-mail BEE de MailUp es lo que los diseñadores han estado pidiendo, así que ¡vamos a echar un vistazo a cómo funciona!

Usar imágenes de fondo en mensajes de e-mail

Hoy vamos a usar este módulo de un e-mail de Litmus como inspiración. Lo recrearemos en BEE.

Tutorial de vídeo

¿Quieres ver cómo añadir una imagen de fondo a tu e-mail rápidamente? Sigue paso a paso el tutorial detallado de vídeo que presentamos a continuación (en inglés):

Elige una plantilla de e-mail

Abre el editor BEE en MailUp. Elige una plantilla para comenzar. Nosotros típicamente elegimos la plantilla básica de una columna.

Habilita la fila de imagen de fondo

Simplemente haz clic en cualquier fila de contenido y verás una opción de Imagen de fondo en el menú Estructura del panel derecho. Habilítala y haz clic en Cambiar imagen para navegar hasta una foto.

Navega hasta una imagen

Puedes encontrar fotos gratuitas, de alta resolución disponibles en BEE, así que vamos a elegir una. (También puedes subir tu propia imagen o pegar la URL de una imagen).

En la siguiente pantalla, abre una de tus carpetas desde el explorador. Pulsa entonces en el CTA Busca fotos gratuitas en la parte superior.

Inspirándonos en el e-mail de Litmus, vamos a buscar “stars” o “night sky”, para ver qué encontramos.

Elige la imagen que vas a importar, y añádela al e-mail. Este es el resultado:

Arrastrar y soltar contenido

Usando el marcador de posición ya presente en la plantilla, añade la imagen del calendario arrastrándola hasta él. Sigue añadiendo marcadores de contenido para el logotipo de Litmus, el texto y el botón de CTA. Después de arrastrar y soltar cada módulo, puedes hacerte una idea de cómo está quedando el e-mail con un solo vistazo:

Puedes ver cómo el texto, las imágenes e incluso el botón CTA quedan por encima de la imagen de fondo. Esto permite incluir texto y un botón CTA a prueba de balas—como en las mejores prácticas de diseño de e-mail— para construir todo el e-mail dentro de BEE.

Para acabar, añade las demás imágenes y el texto que necesites y formata los estilos, colores y espacios de relleno. Así es cómo se ve el producto final:

¿Asombroso, verdad? El uso de las imágenes de fondo en los mensajes de e-mail es simple y directo en BEE. Con las imágenes de fondo, tus e-mail no solo se verán lindos, sino que serán más funcionales y efectivos que nunca.

Ajustes de la imagen de fondo

Una vez elegida tu imagen de fondo, también puedes ajustar cómo aparece en tu e-mail. Hay tres ajustes clave: Ancho completo, Repetido y Centrado.

Úsalos para encontrar el mejor ajuste para tu imagen de fondo. Selecciona Repetido, por ejemplo, para crear un patrón. Esto es especialmente útil si tu imagen no cubre toda la anchura del e-mail como tú deseas.

Como con cualquier imagen en BEE, también puedes editarla usando el editor fotográfico incluido. Siempre puedes recortar, filtrar, añadir efectos especiales, etc.

Compatibilidad con el cliente de e-mail y configuración alternativa de color de fondo

Como con cualquier diseño de e-mail avanzado, es necesario tener presente si los clientes de e-mail y de móvil aceptan imágenes de fondo. Según nuestras pruebas más recientes, los únicos clientes de e-mail que no permitieron las imágenes de e-mail de fondo fueron:

  • Outlook 2016 en MAC OS X 10.10
  • Lotus Notes 7
  • Cliente de e-mail Xfinity / Comcast

Para estos clientes de e-mail (y para obtener los mejores resultados cuando está bloqueado el uso de imágenes), asegurarse de establecer un color de fondo en la fila de que se trate como un color de fondo alternativo en los casos en que la imagen de fondo no se visualice.

Para establecer un color de fondo, solo hay que seleccionar la fila y pasar al menú Estructura para elegir un Color de fondo de la fila o un Color del área de contenido.

Para terminar

Esperamos que disfrutes de esta nueva característica para añadir imágenes de fondo a los e-mail: regístrate para una prueba gratuita de MailUp y así tener acceso a plantillas y funciones de diseño adicionales.

Prueba MailUp 9

¿Te gustó este artículo? Tenemos muchos otros para ti.

Te mantendremos actualizado sobre las citas de marketing digital.

Lee también

Infundir vida en los e-mail con ayuda de vídeos, animaciones GIF, cuentas atrás e imágenes dinámicas

Cómo hacerlo, pros y contras: por qué y cómo dar impulso dinámico a los mensajes para aumentar las aperturas y conversiones.  Según un reciente reporte de ...

Sigue leyendo

Tutorial: cómo personalizar las imágenes de los e-email para cada usuario

Personalizar las comunicaciones, hoy en día significa también utilizar contenidos dinámicos. Bata con echar un vistazo a la bandeja de entrada para darse cuenta de ...

Sigue leyendo

Black Friday: la estrategia de Email Marketing en 8 pasos

La clave para sacar el máximo partido del 24 de noviembre (con su larga cola del Cyber Monday) es prepararse a tiempo, creando expectativas y ...

Sigue leyendo

8 e-mail promocionales realmente efectivos para generar conversiones

¿Cómo crear e-mail promocionales realmente efectivos para generar conversiones? Veamos 5 consejos a tener en cuenta y 8 ejemplos de promociones para experimentar inmediatamente. Usar un ...

Sigue leyendo

Cuatro errores fatales en el manejo de imágenes en los mensajes electrónicos

Cuando hablamos de mercadeo por correo electrónico, inmediatamente pensamos en los aspectos más evidentes de un mensaje: los gráficos, la elección de imágenes, una CTA ...

Sigue leyendo

Cómo evitar que Gmail recorte el correo electrónico

Hay mucha información sobre la planificación de la campaña perfecta de correo electrónico, desde el contenido visual y el cuerpo del texto hasta el asunto ...

Sigue leyendo