¿Quieres diseñar un e-mail simple, hermoso, adaptable al móvil con un montón de fotos? Aquí encontrarás cómo. La entrada de hoy es una guía paso a paso para construir un impresionante mensaje de e-mail con galería de imágenes en cuadrícula. Puedes usar este esquema dinámico para presentar un nuevo producto, ofrecer una promoción, gestionar una venta o contar prácticamente cualquier historia visual. Usando un e-mail de la marca de moda & Other Stories, te iremos mostrando cómo organizar y optimizar una galería en cuadrícula en un e-mail. Entre otras cosas, aprenderás a:

  • Hacer galerías en cuadrícula en configuraciones creativas
  • Establecer un ancho automático para seleccionar imágenes
  • Ocultar imágenes específicas en la versión móvil
  • Apilar imágenes en la versión móvil (o dejarlas formando cuadrícula)

Inspiration: & Other Stories

La marca de comercio eléctrico & Other Stories sigue una línea de enviar mensajes de e-mail cuidadosamente diseñados. Son mensajes que, pese a estar llenos de fotografías de productos, se ven simples, frescos y nunca sobrecargados. Además, la marca hace un excelente trabajo usando texto vivo bien formateado y asegurándose de que sus galerías en cuadrícula se vean bien también en el móvil. Para entender mejor de qué estamos hablando, puedes ver algunos mensajes recientes de & Other Stories:

El email de & Other Stories

Cada e-mail es un poco distinto, pero la mayoría incluye una galería en cuadrícula con imágenes de distintos tamaños. Este tiene dos imágenes destacadas, seguidas de una galería en cuadrícula:

Un otro email de & Other Stories

Nos encanta cómo usan imágenes de distinto tamaño que encajan entre sí perfectamente. Saber crear configuraciones de imágenes inteligentes puede llevar el diseño de tus mensajes de e-mail a un nivel más alto. En el tutorial de hoy vamos a iniciarnos en cómo lograrlo.

La inspiración para nuestra galería en cuadrícula

Para el tutorial de hoy, te mostraremos cómo crear un e-mail como este:

Asunto: Combinaciones de color para primavera

El email de & Other Stories

Bonito, ¿verdad? Y no es difícil de crear. ¡Allá vamos!

Paso 1: Construye la estructura

Abre el editor BEE desde tu cuenta de MailUp y comienza a diseñar en una plantilla básica de una columna.

Podemos pensar en un e-mail con seis estructuras o módulos.

La estructura del email

Desde nuestro menú Estructura a la derecha, arrastramos módulos para crear un esquema de e-mail que reproduzca el de nuestro ejemplo. La primera mitad es una sola columna, mientras la segunda mitad tiene una serie de estructuras de varias columnas.

La estructura del email

El uso de una serie de estructuras asimétricas de varias columnas como estas nos da pie a diseñar una galería en cuadrícula dinámica. Alternando el esquema de fila a fila, es fácil crear una galería con imágenes de distintos tamaños. Sigue leyendo para ver cómo.

Paso 2: Oganiza bloques de contenido

Fila por fila, vamos arrastrando bloques de contenido que corresponden al contenido de cada estructura. Por ejemplo, la primera estructura (o fila) necesitará un bloque de texto donde se lea “ATELIER DE ESTOCOLMO”, una línea divisoria y un bloque de imagen para el logotipo de & Other Stories . Introduciremos cada uno de estos bloques de contenido en la Estructura 1.

El primero bloque de texto

La siguiente estructura solo necesitará un bloque de contenido de imagen para la imagen destacada, y la siguiente solo requerirá texto.

Para construir la primera estructura de la galería en cuadrícula, en la fila 4 arrastramos marcadores de posición para contenidos de imagen, de modo que la fila quedará así:

La siguiente estructura

Hecho esto, soltamos dentro las imágenes.

Soltamos dentro las imágenes

Por la estructura, o esquema, elegida para esta fila, la foto de la derecha dispone de espacio para ser tan ancha como las dos imágenes apiladas a la izquierda.

Debajo de ella, la estructura de cuatro columnas contendrá cuatro imágenes del mismo tamaño.

(1) Esta es la estructura sin nada:

La estructura sin nada

(2) La misma estructura con bloques de contenido de imagen:

La misma estructura con bloques de contenido de imagen

(3) Y así queda la estructura final una vez que arrastramos las imágenes:

La estructura final con imágenes:

Ya solo queda ir fila por fila, añadiendo las imágenes y bloques de contenido que se deseen para completar el e-mail. Este es el resultado en el nuestro:

El resultado final

3. Formatear imágenes: consejos y trucos

Ahora que ya has visto cómo organizar las imágenes, veamos algunos consejos para que tengan exactamente el aspecto que quieras.

Ajuste de precisión de los espacios de relleno

Recuerda que puedes alinear cada imagen junto a otra, sin espacio intermedio, estableciendo un espacio de relleno entre imágenes igual a cero. Simplemente haz clic en la imagen y usa el menú Propiedades de contenido a la derecha para hacer los ajustes.

Configurare el relleno del email

Sí, por el contrario, quieres dejar espacio entre las imágenes, aumenta un poco el espacio de relleno. Así queda nuestra fila de cuatro columnas añadiendo un poquito de relleno (5 px) entre las imágenes:

Establece un ancho automático para seleccionar imágenes

Cuando arrastres y sueltes una imagen en tu e-mail, automáticamente llenará el ancho del contenedor. Pero también puedes usar el menú Propiedades del contenido para ajustar el ancho de una imagen. Por ejemplo, en el mensaje de e-mail en que estamos trabajando, cuando soltamos la imagen de encabezado de & Other Stories , automáticamente tendrá el ancho del e-mail.

Establecer el ancho automático del email

Para disminuir el ancho de la imagen, deselecciona el ancho automático a la derecha…

Establece el ancho del email

… y haz descender la barra de porcentaje hasta un 20 %, para reducir el tamaño del logotipo.

Establecer un ancho automático

Nota: También puedes marcar la casilla “Ancho completo en móvil” para asegurarte de que el logo sea fácil de ver en una pantalla pequeña.

Ocultar imágenes específicas en la versión móvil

Si tienes un e-mail con un gran peso de imágenes, plantéate ocultar algunas de ellas en el móvil. De ese modo, la descarga del e-mail en dispositivos móviles será más rápida y mejorarás la legibilidad: con menos imágenes, el lector no tendrá que pasar pantallas y pantallas y pantallas… También, si tienes una imagen destacada grande, como en este e-mail de & Other Stories, la imagen no debe ocupar tanto espacio de pantalla en dispositivos más pequeños. Por estas razones, BEE tiene ahora una función de Ocultar en móvil que se puede seleccionar para una imagen.

La opción Ocultar en móvil está situada en la parte inferior del menú Propiedades de contenido para cualquier imagen que selecciones. Si seleccionas la imagen destacada, por ejemplo, puedes desplazarte hacia abajo y elegir ocultarla.

La opcion ocultar sobre movil

La vista previa del e-mail te permite ver cómo se ve el correo electrónico con la imagen destacada oculta:

El resultado en movil

Apila las imágenes en la versión móvil (o déjalas formando una cuadrícula)

Todos los e-mail diseñados en el editor BEE se adaptan a la visualización en móvil. Esto significa que cuando tienes un e-mail con una galería de imágenes en cuadrícula, la versión móvil “apilará” automáticamente la imágenes una sobre otra para facilitar la visualización en pantallas pequeñas. De ese modo, nuestra galería en cuadrícula en el móvil generalmente se presenta de la siguiente manera, con cada imagen mostrada en pantalla completa, una de cada vez:

Las imágenes apiladas

Sin embargo, ahora tienes la opción de pedir a BEE que no apile las imágenes, si prefieres que la cuadrícula se mantenga intacta incluso en pantallas móviles.

Simplemente selecciona la estructura de tu galería en cuadrícula y usa el menú Propiedades del contenido para activar la opción No apilar en el móvil .

La opcion Apilar imagenese

Nuestra vista previa tiene ahora el siguiente aspecto:

La vista previa del email en movil

¡No solo eso! Todas estas características tienen por objeto darte más control sobre cómo se ve tu correo electrónico. ¡Esperamos que disfrutes de la flexibilidad del diseño cuando empieces a construir, hasta dominar el arte, asombrosas galerías en cuadrícula en tus mensajes de e-mail con el editor BEE! Para utilizarlo sólo tienes que pedir tu prueba gratuita de la plataforma.

Prueba la plataforma

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

Te mantendremos actualizado sobre las citas de marketing digital.

Lee también

E-mail y móvil: todo lo que debes saber sobre el diseño adaptativo

Hemos puesto un poco de orden entre los muchos aspectos de la adaptación al móvil, para ofrecerte técnicas, herramientas y buenas prácticas que te permitan ...

Sigue leyendo

Preparar la Navidad: las recetas de email y mensajería para salir airosos

Desde hoy hasta el 25 de diciembre y más allá: Presentamos las estrategias para dar impulso a las ventas de fin de año, aprovechando los ...

Sigue leyendo

6 consejos esenciales para crear títulos de e-mail irresistibles

Cuando repasas una página de tu plataforma de redes sociales preferida o un sitio web, ¿qué elemento del contenido te hace desear hacer clic y ...

Sigue leyendo

La diferencia entre un e-mail bueno y uno impresionante: 7 factores

Asunto, enfoque, seguimiento y mucho más. Aquí hay 7 tácticas operativas para crear email brillantes, efectivos y centrados en el cliente. Cada vez que aparece algo ...

Sigue leyendo

Tres tácticas de Email Marketing para fomentar la compra por impulso

El email marketing es uno de los mejores canales para traer tráfico a su sitio web. No solo puede usarlo para compartir noticias sobre su ...

Sigue leyendo

Tutorial: Cómo crear un e-mail en bloques de color

Nos gustan mucho los email coloreados. Un estilo que nos encanta (y lo vemos mucho) son los bloques de colores: la mitad del e-mail tiene un ...

Sigue leyendo