La disposition de grille est un moyen efficace d’organiser le contenu dans le design de votre email. Cela vous aide à présenter plusieurs informations, telles que des produits, des événements ou des articles, de manière claire, structurée et visuellement attrayante. En organisant le contenu en lignes et en colonnes, Vous permettez à vos lecteurs de parcourir, de comparer et d'interagir plus facilement avec le plus important.

Créer une disposition de grille dans le design d'un email

🎥 Regardez la vidéo suivante et suivez les instructions ci-dessous pour savoir comment créer une disposition de grille dans l’éditeur d’emails Drag & Drop :

1. Créez ou ouvrez un design d’email dans l’éditeur d’email Drag & Drop.
2. Faites glisser et déposez un bloc de contenu dans le canevas. Ici, nous allons placer un bloc de contenu Image.
3. Cliquez sur la section contenant votre bloc de contenu dans le canevas pour afficher ses paramètres.
4. Dans le canevas, cliquez sur l’icône plus + à côté de votre bloc de contenu pour ajouter une colonne. Vous pouvez ajouter un maximum de 5 colonnes. Ici, nous voulons afficher 3 colonnes.
5. Sous chaque bloc de contenu, faites glisser et déposez les autres blocs de contenu que vous souhaitez ajouter pour créer une disposition de grille et répéter le schéma. Faites en sorte de déposer vos blocs de contenu dans la même section. Pour en savoir plus, consultez notre article dédié Différences entre les Blocs de Style et blocs de contenu.
6. Remplissez vos blocs de contenu avec les textes et les images que vous souhaitez. 

Félicitations ! 🎉 Vous avez réussi à créer une disposition de grille dans le design de votre email. 

Insérer des variables de flux de données sous forme de grille [Avancé]

Pour insérer vos variables de flux de données sous forme de grille, vous devez les insérer manuellement pour spécifier l’index exact de chaque élément que vous souhaitez afficher. Cela signifie que vous devez décider à l’avance quelles entrées de votre flux afficher.

Partie 1 : récupérer les variables de flux de données

Pour savoir exactement quels champs référencer dans votre flux de données, rendez-vous sur votre page Flux de données et ouvrez le flux de données que vous souhaitez afficher. Vous pouvez y consulter la structure de votre flux et trouver les bonnes clés à utiliser dans la syntaxe de vos variables. 

La syntaxe permettant d’extraire manuellement des éléments spécifiques de votre flux de données est la suivante : {{feed.feedalias.array.index.variable}} où : feedalias est le nom d’alias exact de votre flux de données, avec la même orthographe et casse telles qu’elles apparaissent sur la page Flux de données. array est le tableau contenant les valeurs de chaque élément. index est la position de l’élément spécifique que vous souhaitez afficher à partir de votre flux de données (à partir de 0 pour le premier élément). variable est le nom de la variable ou du champ spécifique que vous souhaitez afficher, par ex. nom, prix, date.

Par exemple, pour afficher le nom du cours de yoga dans le tableau following_classes, dans le premier index, votre variable de flux de données serait la suivante : 

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

Partie 2 : créer et remplir votre disposition de grille avec des flux de données

1. Créez un design d’email avec une disposition de grille. Pour en savoir plus sur la création d’une disposition de grille, consultez notre section dédiée ci-dessus Créer une disposition de grille dans le design d'un email.
2. Remplissez vos blocs de contenu avec des variables de flux de données à l’aide de la syntaxe de la Partie 1 : récupérer les variables de flux de données. Pour savoir comment insérer des variables dans vos blocs de contenu, ouvrez l'accordéon correspondant au bloc de contenu que vous voulez remplir :
   🔠 Ajouter une variable sous forme de texte

   Ajoutez une variable dans un bloc de contenu contenant du texte pour afficher des informations spécifiques relatives à un élément, comme le nom, le lieu ou la date.

   1. Cliquez sur un bloc de contenu contenant du texte (bloc Titre, Texte ou Bouton).
   2. Placez votre curseur à l'endroit où vous souhaitez ajouter une variable.
   3. Entrez la variable de flux de données correspondant au texte que vous souhaitez afficher. Par exemple, avec notre exemple de flux de données, pour afficher le nom de la classe de yoga du premier élément du flux de données, la variable serait : {{feed.yoga_classes.following_classes.0.class_name}}.
      
   4. Répétez les étapes pour chaque variable que vous souhaitez ajouter sous forme de texte. Remplacez à chaque fois l’index correspondant à l’élément de votre flux de données que vous souhaitez afficher.

   🖼️ Ajouter une variable à une image

   Ajoutez une variable à un bloc Image pour afficher l'image associée à un objet, comme la photo d'un événement.

   1. Cliquez sur un bloc Image.
   2. Dans la barre latérale, cliquez sur Paramètres de l'image.
   3. Dans le champ Insérer image à partir d'une URL, entrez la variable de flux de données correspondant à l’image que vous souhaitez afficher. Dans notre exemple, pour afficher l’image du premier élément dans le flux de données, la variable serait : {{feed.yoga_classes.following_classes.0.imageurl}}.
      
      
   4. Répétez les étapes pour chaque variable que vous souhaitez ajouter à une image. Remplacez à chaque fois l’index correspondant à l’élément de votre flux de données que vous souhaitez afficher.

   🔗 Ajouter une variable sous forme de lien hypertexte sur du texte

   Ajoutez une variable sous forme de lien hypertexte sur du texte pour diriger les destinataires vers l’URL associée à un élément, telle qu’un formulaire d’inscription ou une page de planification d’événements.

   1. Cliquez sur un bloc de contenu contenant du texte (bloc Titre ou Texte).
   2. Mettez en évidence le texte à l'endroit où vous souhaitez ajouter le lien.
   3. Cliquez sur l’icône Ajouter un lien 🔗 dans la barre de mise en forme.
   4. Dans le champ Cible du lien, indiquez la variable de flux de données correspondant à l’URL que vous souhaitez afficher. Dans notre exemple, pour afficher l’URL de la page de réservation du cours de yoga pour le premier élément du flux de données, la variable serait la suivante : {{feed.yoga_classes.following_classes.0.url}}.
      
      
   5. Répétez les étapes pour chaque variable que vous souhaitez ajouter en tant que lien hypertexte dans un texte. Remplacez à chaque fois l’index correspondant à l’élément de votre flux de données que vous souhaitez afficher.

   🔗 Ajouter une variable sous forme de lien hypertexte sur une image

   Ajoutez une variable sous forme de lien hypertexte sur une image pour diriger les destinataires vers l’URL associée à un élément, telle qu’une page d’événement.

   1. Cliquez sur un bloc Image.
   2. Dans la barre latérale, accédez à Paramètres du lien.
   3. Dans le champ Cible du lien, indiquez la variable de flux de données correspondant à l’URL que vous souhaitez afficher. Dans notre exemple, pour afficher l’URL de la page de réservation du cours de yoga pour le premier élément du flux de données, la variable serait la suivante : {{feed.yoga_classes.following_classes.0.url}}.
      
      
   4. Répétez les étapes pour chaque variable que vous souhaitez ajouter en tant que lien hypertexte sur une image. Remplacez à chaque fois l’index correspondant à l’élément de votre flux de données que vous souhaitez afficher.

   🔗 Ajouter une variable sous forme de lien hypertexte sur un bouton

   Ajoutez une variable sous forme de lien hypertexte sur un bouton pour diriger les destinataires vers l’URL associée à un élément, telle qu’une page de produit.

   1. Cliquez sur un bloc Boutons.
   2. Dans la barre latérale, accédez à Paramètres du lien.
   3. Dans le champ Cible du lien, indiquez la variable de flux de données correspondant à l’URL que vous souhaitez afficher. Dans notre exemple, pour afficher l’URL de la page de réservation du cours de yoga pour le premier élément du flux de données, la variable serait la suivante : {{feed.yoga_classes.following_classes.0.url}}.
      
      
   4. Répétez les étapes pour chaque variable que vous souhaitez ajouter en tant que lien hypertexte sur un bouton. Remplacez à chaque fois l’index correspondant à l’élément de votre flux de données que vous souhaitez afficher.
3. Affichez un aperçu de votre email et testez-le pour vous assurer que vos variables de flux de données s’affichent correctement. 

Félicitations ! 🎉 Vous avez créé une disposition de grille contenant des variables de flux de données. 

Template d'email	Email dans la boîte de réception de vos destinataires

⏭️ Et après ? 

• Personnaliser le contenu de vos emails avec des données en temps réel (flux de données)
• Personnaliser l'objet et l'aperçu du texte de votre email avec des données en temps réel (flux de données)

🤔 Vous avez des questions ?

Pour toute question, n’hésitez pas à contacter notre service client en créant un ticket à partir de votre compte. Si vous n’avez pas encore de compte, vous pouvez nous contacter ici.

Si vous avez besoin d'aide pour un projet impliquant Brevo, nous pouvons vous mettre en relation avec une agence partenaire Brevo.