L'éditeur Drag & Drop facilite la conception d'emails de qualité professionnelle. Il offre plus d'options pour personnaliser votre email et garantit également que votre email s'affiche parfaitement sur n'importe quel client de messagerie et appareil.

Dans cet article, nous allons vous montrer comment utiliser les sections et les blocs de contenu pour commencer à concevoir votre email.

Nous avons divisé en plusieurs parties les articles dédiés à l’éditeur Drag & Drop :

• Partie 1 : Présentation de l'éditeur
• Partie 2 : Blocs de Style et blocs de contenu – VOUS ÊTES ICI
• Partie 3 : Comment utiliser les blocs de contenu ?
• Partie 4 : Définir un style de conception pour votre email
• Partie 5 : Enregistrer les blocs pour les réutiliser dans vos emails
• Partie 6 : Modifier l'affichage de vos emails sur mobile
• Partie 7 : Restauration, aperçu, test et enregistrement d'un design d'email

Qu’est-ce qu’une section ?

Un bloc de Style est un bloc structurel qui comprend une ou plusieurs colonnes auxquelles vous pouvez ajouter des blocs de contenu.

Dans l’exemple ci-dessous, la section (en vert) contient 2 blocs de contenu (en rose) dans 2 colonnes différentes : 2 images et 2 blocs de texte.

Dans l’éditeur d'emails, il existe deux types de sections :

• Sections personnalisées
  Les sections personnalisées sont les sections que vous créez vous-même en faisant glisser et en déposant des blocs de contenu. 
• Sections prédéfinies
  Les sections prédéfinies sont des mises en page prédéfinies de différents blocs de contenu et vous permettent de créer facilement des designs d’emails sans avoir besoin de compétences en conception. 

À tout moment, vous pouvez ajouter, supprimer ou redimensionner des colonnes en cliquant sur la section et en utilisant les curseurs pour les déplacer et les boutons +/- pour ajouter des colonnes :

Paramètres de section

Vous pouvez renommer votre section en cliquant sur l’icône en forme de stylo à côté du titre.

Sélectionnez une section pour afficher les paramètres suivants dans le panneau de navigation de gauche : 

Arrière-plan Paramètres du bloc Espacement

Avec ce paramètre, vous pouvez définir la couleur d’arrière-plan et appliquer l’arrière-plan sur toute la largeur. Vous pouvez aussi cliquer sur Ajouter une image d’arrière-plan pour afficher la bibliothèque de contenus et utiliser vos fichiers ou vos images d’archive en tant qu'arrière-plan. Si vous souhaitez utiliser une image directement tirée d’Internet, collez le lien de l'image dans le champ Insérer une image à partir d’une URL.

Le paramètre Alignement vertical vous permet de modifier la position de vos contenus à l’intérieur de la section : en haut, au milieu ou en bas.

Le paramètre Espacement vous permet d’ajouter :

• De l'espace entre les colonnes de la section sélectionnée en cliquant sur les flèches vers le haut ou vers le bas ou en saisissant l’espacement souhaité.
• Une marge intérieure, c'est-à-dire l'espace entre l'élément et la bordure. Vous pouvez modifier la marge extérieure de chacun des quatre côtés autour du contenu.
• Une marge intérieure, c'est-à-dire l'espace entre la bordure et l'élément suivant de votre design. Vous pouvez modifier chaque marge en haut et en bas du contenu

Cliquez sur le bouton Marge intérieure ou Marge extérieure pour l'activer ou la désactiver. Définissez l'espacement ou la taille de la marge de chaque côté de votre contenu en cliquant sur les boutons +/- ou en saisissant la taille souhaitée dans le champ de texte.

Actions de section

Pour déplacer une section verticalement : passez la souris sur la section et maintenez enfoncé pendant que vous la déplacez à l’emplacement souhaité. La ligne bleue vous indiquera où le bloc sera déplacé.

Lorsqu’un bloc de Style est sélectionné, vous avez accès à certaines actions en bas à gauche du bloc :

1. Déplacer
   Glissez-déposez votre section où vous le souhaitez dans votre email.
2. Monter et Descendre
   Déplacez votre section vers le haut ou vers le bas dans votre email. 
3. Dupliquer (⌘ ou Ctrl + D) 
   Une fois que vous avez défini tous les paramètres de votre section, vous pouvez la dupliquer. Cette option vous permet de gagner beaucoup de temps lors de la conception de votre email.
4. Sauvegarder
   Enregistrez une section pour la réutiliser dans d’autres emails. Vos sections enregistrées s'affichent sous l’onglet Mon contenu dans le panneau de gauche. Pour en savoir plus, consultez notre article dédié Enregistrer du contenu pour le réutiliser dans vos emails.
5. Supprimer (⌫ + ↵)
   Cette option vous permet de supprimer une section.
6. Visibilité du contenu (Afficher ou masquer)
   Masquez ou affichez une section en ajoutant des conditions ou en fonction de l'appareil de votre destinataire. Pour en savoir plus, consultez nos articles dédiés Afficher ou masquer des blocs en fonction des attributs de contacts et Afficher ou masquer du contenu en fonction de l'appareil utilisé. 
7. Contenu répétable
   Vous pouvez répéter des sections dans vos confirmations d'achat ou emails de paniers abandonnés. Pour en savoir plus, consultez notre article dédié Répéter un bloc pour afficher plusieurs articles dans vos emails.

Qu’est-ce qu’un bloc de contenu ?

Les blocs de contenu sont différents types de contenu que vous pouvez ajouter à votre email. Vous pouvez faire glisser les blocs de contenu dans les sections.

Les blocs de contenu disponibles sont les suivants :

Titre	Texte	Image	Vidéo
Bouton	Logo	Social	HTML
Séparateur	Produit	Navigation	Espacement

Chaque bloc de contenu a ses propres paramètres personnalisables au besoin, ce qui remplacera les paramètres de template par défaut. Vous pouvez déplacer des blocs de contenu de la même manière que des blocs de style et vous pouvez également masquer ou afficher, dupliquer, sauvegarder et supprimer des blocs de contenu. Pour en savoir plus, consultez notre article dédié Utiliser les blocs de contenu.

Les actions supplémentaires (ajouter un lien, aperçu, remplacer l’image, etc.) varient en fonction du type de bloc que vous modifiez. L’exemple ci-dessous illustre les actions disponibles pour les blocs d'image (en rose) et les blocs de texte (en vert) :

Bloc de contenu d’image
Bloc de contenu de texte

⏩ Et après ?

• Partie 3 : Comment utiliser les blocs de contenu ?
• Partie 4 : Définir un style de conception pour votre email
• Partie 5 : Enregistrer les blocs pour les réutiliser dans vos emails
• Partie 6 : Modifier l'affichage de vos emails sur mobile
• Partie 7 : Aperçu et envoi d'un email de test

🤔 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 un Partenaire Brevo certifié.