¿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

¿Qué nos pueden enseñar las mejores campañas de email marketing?

Ya sea que esté ejecutando una empresa local o una empresa digital internacional, poseer una lista de correo electrónico es crucial. El marketing por correo ...

Sigue leyendo

La gestión de las desuscripciones: cómo crear tu flujo con Páginas

Hemos puesto por escrito los 5 pasos para configurar la modalidad de baja, opt-out, las páginas de post-baja, el Centro de preferencias y el pie ...

Sigue leyendo

Cómo crear el flujo de suscripción para el canal e-mail: del registro a la bienvenida

Vamos a guiarte, paso a paso, en la creación de formularios, páginas y mensajes de e-mail que te permitirán gestionar el registro de nuevos destinatarios ...

Sigue leyendo

Nuevo manejo de rebotes para una mejor entregabilidad

Rebotes duros. Filtros anti-spam. Carga de entrega. Entregabilidad (capacidad de entrega). Todos aquellos que trabajan en e-mail marketing y que nunca han tenido que enfrentar estos problemas que evocan ...

Sigue leyendo

Amplía tu audiencia: en MailUp nace el área Páginas

En un único espacio, todas las herramientas y funciones que te permiten aumentar y mejorar la gestión de los destinatarios de tus mensajes de e-mail. ...

Sigue leyendo

La importancia de desarrollar el liderazgo: 5 habilidades principales

¿Es usted un experto en marketing en una alta posición en la jerarquía del equipo, o simplemente está cuidando el contenido del correo electrónico y ...

Sigue leyendo