Tutorial: Cómo añadir imágenes de fondo a un e-mail

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!

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):

[post_video_embed url=»https://www.youtube.com/embed/4c5Qytwypg0?list=PLdTMlS6t4dMJesxhENxTAhjBxImgGZqeb» height=»» width=»»]

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.

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.

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.