Un diseño de cuadrícula es una forma eficaz de organizar el contenido del diseño de tu email. Te ayuda a presentar múltiples piezas de información (como productos, eventos o artículos) de una manera limpia, estructurada y visualmente atractiva. Al organizar el contenido en filas y columnas, facilita que los lectores escaneen, comparen y se interesen por lo más importante.

Crear un diseño de cuadrícula en un diseño de email

🎥 Mira el siguiente vídeo y sigue las instrucciones que aparecen a continuación para aprender a crear un diseño de cuadrícula en el editor de email de arrastrar y soltar:

1. Crea o abre un diseño de email en el editor de email de arrastrar y soltar.
2. Arrastra y suelta un bloque de contenido en el lienzo. Vamos a soltar un bloque de contenido de Image (Imagen).
3. Haz clic en la sección que contiene tu bloque de contenido en el lienzo para mostrar su configuración.
4. En el lienzo, haz clic en el icono más + que aparece junto a tu bloque de contenido para añadir una columna. Puedes añadir un máximo de 5 columnas. En este caso, queremos mostrar 3 columnas.
5. Debajo de cada bloque de contenido, arrastra y suelta los demás bloques de contenido que deseas añadir para crear un diseño de cuadrícula y repetir el patrón. Asegúrate de soltar tus bloques de contenido dentro de la misma sección. Para obtener más información, consulta nuestro artículo dedicado Diferencias entre secciones y bloques de contenido.
6. Completa tus bloques de contenido con los textos e imágenes que deseas. 

¡Enhorabuena! 🎉 Has creado correctamente un diseño de cuadrícula en tu diseño de email. 

Insertar variables de feed de datos en un diseño de cuadrícula [Avanzado]

Para insertar tus variables de feed de datos en un diseño de cuadrícula, debes insertar manualmente las variables para especificar el índice exacto de cada elemento que deseas mostrar. Esto significa que debes decidir de antemano qué ingresos de tu feed quieres mostrar.

Parte 1: Recuperar las variables del feed de datos

Para saber exactamente a qué campos debes hacer referencia en tu feed de datos, ve a la página Data feeds (Feeds de datos) y abre el feed de datos que deseas mostrar. A continuación, podrás ver la estructura de tu feed y encontrar las claves correctas que debes utilizar en la sintaxis de tus variables. 

La sintaxis para obtener manualmente elementos específicos de tu feed de datos es: {{feed.feedalias.array.index.variable}} donde: feedalias es el nombre exacto del alias de tu feed de datos, y coincide con la ortografía y las mayúsculas y minúsculas tal y como aparece en la página Data feeds (Feed de datos). array (matriz) es la matriz que contiene los valores de cada elemento. index (índice) es la posición del elemento específico que deseas mostrar de tu feed de datos (comenzando por 0 para el primer elemento). variable es la variable específica o el nombre del campo que deseas mostrar, por ejemplo, nombre, precio o fecha.

Por ejemplo, para mostrar el nombre de la clase de yoga en la matriz following_classes, en el primer índice, tu variable del feed de datos sería: 

{{feed.yoga_classes.following_classes.0.class_name}}

Parte 2: Crear y completar tu diseño de cuadrícula con feed de datos

1. Crea un diseño de email con un diseño de cuadrícula. Para obtener más información sobre cómo crear un diseño de cuadrícula, consulta nuestra sección dedicada anterior Crear un diseño de cuadrícula en un diseño de email.
2. Completa tus bloques de contenido con variables de feed de datos siguiendo la sintaxis de la Parte 1: Recuperar las variables de feed de datos. Para aprender a insertar variables en tus bloques de contenido, abre el acordeón correspondiente al bloque de contenido que deseas completar:
   🔠 Añadir una variable como texto

   Añade una variable dentro de un bloque de contenido que contenga texto para mostrar detalles específicos relacionados con un elemento, como un nombre, una ubicación o una fecha.

   1. Haz clic en un bloque de contenido que contenga texto (bloques de Title (Título, Text (Texto) o Button (Botón)).
   2. Coloca el cursor en la posición en la que deseas añadir una variable.
   3. Introduce la variable del feed de datos correspondiente al texto que deseas mostrar. Por ejemplo, para mostrar el nombre de la clase de yoga del primer elemento del feed de datos, la variable sería: {{feed.yoga_classes.following_classes.0.class_name}}.
      
   4. Repite los pasos para cada una de las variables que deseas añadir al texto. Reemplaza en cada caso el índice que corresponde al elemento del feed de datos que deseas mostrar.

   🖼️ Añadir una variable a una imagen

   Añade una variable a un bloque de Image (Imagen) para mostrar la imagen asociada a un elemento, como una imagen de evento.

   1. Haz clic en un bloque de Image (Imagen).
   2. En la barra lateral, ve a Image settings (Configuración de imagen).
   3. En el campo Insert image from URL (Insertar imagen desde URL), introduce la variable del feed de datos correspondiente a la imagen que deseas mostrar. En nuestro ejemplo, para mostrar la imagen del primer elemento del feed de datos, la variable sería: {{feed.yoga_classes.following_classes.0.imageurl}}.
      
   4. Repite los pasos para cada una de las variables que deseas añadir a la imagen. Reemplaza en cada caso el índice que corresponde al elemento del feed de datos que deseas mostrar.

   🔗 Añadir una variable como hipervínculo en un texto

   Añade una variable como hipervínculo en el texto para dirigir a los destinatarios a la URL asociada con un elemento, como un formulario de registro o una página de programación de eventos.

   1. Haz clic en un bloque de contenido que contenga texto (bloques de Title [Título] o Text [Texto]).
   2. Resalta el texto en el que deseas añadir el enlace.
   3. Haz clic en el icono Add link (Añadir enlace) 🔗 en la barra de formato.
   4. En el campo Link target (Destino del enlace), introduce la variable del feed de datos correspondiente a la URL que deseas mostrar. En nuestro ejemplo, para mostrar la URL de la página de reserva de clases de yoga del primer elemento del feed de datos, la variable sería: {{feed.yoga_classes.following_classes.0.url}}.
      
      
   5. Repite los pasos para cada una de las variables que deseas añadir como hipervínculo en el texto. Reemplaza en cada caso el índice que corresponde al elemento del feed de datos que deseas mostrar.

   🔗 Añadir una variable como hipervínculo en una imagen

   Añade una variable como hipervínculo en una imagen para dirigir a los destinatarios a la URL asociada con un elemento, como una página de evento.

   1. Haz clic en un bloque de Image (Imagen).
   2. En la barra lateral, ve a Link settings (Configuración del enlace.
   3. En el campo Link target (Destino del enlace), introduce la variable del feed de datos correspondiente a la URL que deseas mostrar. En nuestro ejemplo, para mostrar la URL de la página de reserva de clases de yoga del primer elemento del feed de datos, la variable sería: {{feed.yoga_classes.following_classes.0.url}}.
      
      
   4. Repite los pasos para cada una de las variables que deseas añadir como hipervínculo en la imagen. Reemplaza en cada caso el índice que corresponde al elemento del feed de datos que deseas mostrar.

   🔗 Añadir una variable como hipervínculo en un botón

   Añade una variable como hipervínculo en un botón para dirigir a los destinatarios a la URL asociada con un elemento, como una página de producto.

   1. Haz clic en el bloque Button (Botón).
   2. En la barra lateral, ve a Link settings (Configuración del enlace.
   3. En el campo Link target (Destino del enlace), introduce la variable del feed de datos correspondiente a la URL que deseas mostrar. En nuestro ejemplo, para mostrar la URL de la página de reserva de clases de yoga del primer elemento del feed de datos, la variable sería: {{feed.yoga_classes.following_classes.0.url}}.
      
      
   4. Repite los pasos para cada una de las variables que deseas añadir como hipervínculo al botón. Reemplaza en cada caso el índice que corresponde al elemento del feed de datos que deseas mostrar.
3. Previsualiza y prueba tu email para asegurarte de que las variables de tu feed de datos se muestran correctamente. 

¡Enhorabuena! 🎉 Has creado correctamente un diseño de cuadrícula que contiene variables de feed de datos. 

Plantilla de email	Email en bandejas de entrada de destinatarios

⏭️ ¿Qué es lo siguiente? 

• Personalizar el contenido del email con datos en tiempo real (feed de datos)
• Personalizar el asunto del email y el texto de vista previa con datos en tiempo real (feed de datos)

🤔 ¿Tiene alguna duda?

Si tiene alguna pregunta, no dude en ponerse en contacto con nuestro equipo de asistencia mediante la creación de un ticket desde su cuenta. Si todavía no tiene una cuenta, puede ponerse en contacto con nosotros aquí.

Si necesitas ayuda con un proyecto usando Brevo, podemos ponerte en contacto con la agencia partner de Brevo adecuada.