• HOME
  • Blog
  • Tutorial: Cómo crear un e-mail con galería en cuadrícula para PC y móvil
Kelly Shetron
1 agosto 2018
Tiempo de lectura: 8 min.

Tutorial: Cómo crear un e-mail con galería en cuadrícula para PC y móvil

¿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)
256x218
Prueba la plataforma
Descubre todo lo que puedes hacer con MailUp.

Desde el desarrollo de integraciones hasta el apoyo estratégico, desde la creación de conceptos creativos hasta la optimización de resultados.

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:

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:

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:

AsuntoCombinaciones de color para primavera

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.

 

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.

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

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

Hecho esto, 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:

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

(3) Y así queda la estructura final una vez que arrastramos las 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:

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.

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.

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

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

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 vista previa del e-mail te permite ver cómo se ve el correo electrónico con la imagen destacada oculta:

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:

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 .

Nuestra vista previa tiene ahora el siguiente aspecto:

¡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.

Share this article

80x80
Kelly Shetron

Crecí en Filadelfia, Estados Unidos, y tengo dos licenciaturas, en Inglés y en Economía. Me gusta reflexionar sobre cómo viven y trabajan las personas, sobre cómo se desarrollan los procesos creativos y sobre cómo interactuamos los unos con los otros. Colaborar en nuevos proyectos es mi combustible diario.

    Mucho contenido original, cero spam. Suscríbete al boletín