L’éditeur Drag & Drop [Nouveau design] vous aide à concevoir des emails au design professionnel en toute facilité. Il inclut davantage d’options pour personnaliser votre email et vous permet de vous assurer que vos emails s’affichent parfaitement quel que soit le client de messagerie et l’appareil utilisés.

Dans cet article, nous vous expliquons comment utiliser les blocs de contenu dans vos emails et comment en modifier les paramètres.

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

• Partie 1 : Vue d’ensemble de l’éditeur
• Partie 2 : Blocs de mise en page et blocs de contenu
• Partie 3 : Comment utiliser les blocs de contenu ? – VOUS ÊTES ICI
• Partie 4 : Définir un style de conception pour tout votre email
• Partie 5 : Enregistrer les blocs pour les réutiliser dans vos campagnes
• Partie 6 : Modifier l’affichage de vos emails sur mobile
• Partie 7 : Restaurer, prévisualiser, tester et enregistrer le design de votre campagne

Bon à savoir

Configurez votre bibliothèque de marque afin que vos éléments de marque, tels que le logo, les couleurs, les polices ou les liens de réseaux sociaux, s'appliquent à chaque nouveau template sélectionné. En plus de vous faire gagner du temps, la bibliothèque de marque vous permet d'assurer la cohérence de votre image de marque dans vos emails. Pour en savoir plus, consultez notre article Appliquer automatiquement vos éléments de marque au design de vos emails à l'aide de la bibliothèque de marque.

Titre et texte

Barre de mise en forme du texte

Sélectionnez le bloc de contenu Texte ou Titre dans l’éditeur pour afficher la barre de mise en forme du texte au-dessus du bloc, avec les options suivantes :

Couleurs Effacer la mise en forme Personnalisation Liens

Les couleurs que vous utilisez dans votre template seront maintenant enregistrées dans le sélecteur de couleur. Vous pouvez toujours supprimer une couleur enregistrée. Pour ce faire, sélectionnez un texte de cette couleur, puis cliquez sur le sélecteur de couleur puis sur Supprimer la couleur. La couleur peut mettre quelques minutes à disparaître.

💡 Bon à savoir

Nous avons ajouté vos couleurs de marque à vos templates !
Nous utilisons l’API Brand Fetch pour obtenir toutes les informations disponibles sur votre marque et ajouter automatiquement le logo, les couleurs et les liens vers les réseaux sociaux (le cas échéant) afin de personnaliser les quatre templates de mise en forme.

Vous pouvez facilement effacer la mise en forme d’un texte sélectionné en cliquant sur l’icône Effacer la mise en forme :

Cliquez sur l’icône 👤 pour ajouter une personnalisation à votre texte, par exemple le prénom de vos destinataires.
Pour en savoir plus, consultez l’article Personnaliser votre texte avec des attributs de contacts.

Pour ajouter un lien à votre texte, sélectionnez le texte, puis cliquez sur l’icône de lien, ou appuyez sur ⌘ ou Ctrl+ K, et renseignez les informations dans la fenêtre Insérer/Modifier un lien. Le titre Lien correspond à la fenêtre de contextualisation qui s’affiche lorsque vous passez la souris sur votre lien.

Vous pouvez sélectionner différents types de liens :

• Lien absolu (URL)
  Il s’agit de l’option de base des liens. Choisissez cette option pour ajouter une URL.
• Afficher dans le navigateur
  Le lien miroir peut être ajouté dans l'en-tête de vos campagnes. Il s’agit d’un lien sur lequel vos destinataires peuvent cliquer s’ils rencontrent des difficultés pour afficher votre email dans leur boîte de réception afin d’ouvrir votre email en tant que page Web. L’utilisation d’un lien miroir dans vos campagnes n’est pas obligatoire.
  ➡️ Pour en savoir plus, consultez notre article dédié aux liens miroirs.
• Désinscription
  Le lien de désinscription est automatiquement ajouté au pied de page de vos campagnes. Il s’agit d’un lien sur lequel vos destinataires peuvent cliquer pour ouvrir votre page de désinscription Brevo et cesser de recevoir vos emails. L’utilisation d’un lien de désinscription dans vos campagnes est obligatoire : ce lien est essentiel pour vos contacts ainsi que pour garantir le bon déroulement de vos campagnes.
  ➡️ Pour en savoir plus, consultez  notre article dédié aux liens de désinscription.
  
• Mise à jour des préférences
  Brevo propose un formulaire de mise à jour du profil pour vous aider à recueillir des informations au sujet de vos abonnés, telles que leurs coordonnées, leurs préférences et même les listes auxquelles ils souhaitent s’inscrire, et à tenir à jour ces informations. Nous vous conseillons d’ajouter un lien vers ce formulaire dans le pied de page de l’ensemble de vos emails afin d’aider les abonnés à vous faire part de leurs préférences. 
  ➡️ Pour en savoir plus, consultez notre article dédié aux liens de mise à jour du profil.
  
  💡 Bon à savoir

  Cette option est ajoutée automatiquement lorsque vous sélectionnez un formulaire dans la section Campagne > Paramètres avancés > Utiliser un formulaire personnalisé de mise à jour du profil, comme expliqué ici.
  Si cette option est grisée, vous devez l’activer dans la section Campagnes > Paramètres avancés. Si vous utilisez un template, vous devez ajouter manuellement le lien de mise à jour des préférences.
• Lien de l’email (mailto)
  Ajoutez un lien vers une adresse email.
• Cliquer pour appeler un numéro de téléphone
  Ajoutez un lien vers un numéro de téléphone.
• Ancre pour liens relatifs
  Insérez une ancre dans votre campagne et utilisez l’option de lien relatif pour ajouter un lien vers cette ancre. 
• Lien relatif (pour les ancres)
  Une fois que vous avez inséré une ancre dans votre campagne, utilisez cette option pour ajouter un lien vers cette ancre.
  Cette option permet par exemple de retourner à un endroit spécifique en haut de la page de votre newsletter.

Pour supprimer ou modifier un lien, placez votre curseur sur le lien, puis cliquez sur l’icône Lien pour afficher les boutons Supprimer et Modifier.

Regardez la vidéo pour savoir comment ajouter un lien, définir une couleur ou image d’arrière-plan et modifier les paramètres de votre bloc de texte :

Paramètres du panneau de gauche

Même bloc, différentes mises en forme

Cliquez sur le bloc Texte pour afficher le panneau de gauche, qui comprend des paramètres supplémentaires similaires à ceux disponibles sous l’onglet Conception. 
Pour en savoir plus sur l’utilisation de ces paramètres, consultez l’article Définir un style de conception pour tout votre email.

Ce nouvel éditeur vous permet d’utiliser différentes mises en forme au sein d’un même bloc de texte. Par exemple, vous pouvez utiliser un titre suivi d’un paragraphe et d’une liste à puces. Vous pouvez également utiliser différentes couleurs à l’intérieur d’un même bloc. 

Bordures

Vous pouvez également ajouter des bordures à votre bloc Texte et à vos images à l’aide des paramètres Bordures dans le panneau de gauche. Vous pouvez définir différentes tailles et couleurs pour chaque bordure ou activer l’option Appliquer à tous les côtés pour définir une taille et une couleur uniques pour toutes les bordures. 

Image

Vous pouvez ajouter une image à partir de l’onglet Contenu à l’aide du bloc Image. Pour ajouter une image de votre choix, cliquez sur Remplacer ou collez le lien de votre image dans le champ Insérer une image à partir d’une URL. Vous pouvez redimensionner ou modifier votre image directement dans l’éditeur.

Pour en savoir plus, consultez notre article dédié Utiliser des dossiers pour organiser les images dans votre bibliothèque de contenu.

Le panneau de gauche contient des paramètres supplémentaires similaires à ceux disponibles sous l’onglet Conception. 
Pour en savoir plus sur l’utilisation de ces paramètres, consultez l’article Définir un style de conception pour tout votre email.

Vous pouvez également ajouter des bordures à votre bloc Image à l’aide des paramètres Bordures dans le panneau de gauche. Vous pouvez définir différentes tailles et couleurs pour chaque bordure ou activer l’option Appliquer à tous les côtés pour définir une taille et une couleur uniques pour toutes les bordures.

Ajouter une image

Regardez la vidéo pour savoir comment ajouter plusieurs images dans une ligne et modifier les paramètres de votre bloc d’image.

Redimensionner une image

Pour redimensionner une image, cliquez sur l’image que vous souhaitez redimensionner afin de la sélectionner, puis placez votre curseur sur le coin inférieur droit de l’image. Lorsque la double flèche apparaît, tirez sur le coin pour ajuster la taille. La taille de votre image s’affiche en bleu en bas à droite de votre image et est automatiquement mise à jour lorsque vous la redimensionnez.
Vous pouvez aussi redimensionner votre image à l’aide du champ Largeur dans le panneau de gauche.

Modifier une image

Notre éditeur Drag & Drop inclut un éditeur photo qui vous permet de recarder votre image ou d’y ajouter des filtres, du texte ou des éléments de design. Pour accéder à l’éditeur photo, cliquez sur votre image, puis sur le bouton Éditer dans les Paramètres de l’image.

Vous pouvez également éditer une photo à partir de la bibliothèque de contenus. Il vous suffit de sélectionner l’image et de cliquer sur Éditer.

Bouton

Ajoutez des boutons pour insérer un élément de call-to-action dans votre email :

1. Faites glisser le bloc Bouton dans votre email.
2. Remplacez le texte Call to action par un texte correspondant au contenu vers lequel vous souhaitez rediriger vos destinataires. 
   Si vous le souhaitez, vous pouvez personnaliser votre texte avec des attributs de contacts. 
3. Facultatif : utilisez la barre de mise en forme du texte et les paramètres de bouton dans le panneau de gauche pour personnaliser votre bouton. 
4. Cliquez sur l’icône de lien pour ajouter un lien vers votre bouton et rediriger vos destinataires vers la page de votre choix.

Regardez la vidéo pour découvrir comment modifier les paramètres tels que la largeur, l’arrondi des bords, la taille du cadre ou la couleur d’arrière-plan de votre bloc de bouton.

Social

Le bloc Social vous permet de rediriger vos destinataires vers vos pages de réseaux sociaux lorsqu’ils cliquent sur l’icône correspondante.

1. À partir de l’onglet Contenu, faites glisser le bloc Social dans votre campagne.
2. Conservez les paramètres de design des icônes par défaut, ou définissez une taille, un style, un thème et un espacement pour vos icônes de réseaux sociaux.
3. Collez le lien vers vos pages de réseaux sociaux dans le champ Paramètres des icônes correspondant.
   Vous pouvez cliquer sur Ajouter plus d’icônes pour ajouter des icônes et des liens de réseaux sociaux si besoin, ou cliquer sur l’icône de corbeille pour supprimer du bloc une icône et un lien de réseau social.

Si vous avez déjà ajouté des liens de réseaux sociaux sous Campagnes > Paramètres > Google & Réseaux sociaux, les liens seront automatiquement alimentés dans le champ Paramètres des icônes.

Regardez la vidéo pour en savoir plus sur la configuration du bloc Social.

HTML

Le bloc HTML vous permet d’ajouter votre propre code. Vous pouvez saisir ou copier-coller votre code. Pour obtenir un aperçu de votre code, laissez le bloc HTML tel quel.

Certains clients de messagerie ne supportent pas l'ensemble des contenus HTML, car l'HTML utilisé dans les e-mails n'est pas aussi répandu que l'HTML pour le web. Pour découvrir comment éviter les problèmes de code HTML dans le bloc et l'éditeur HTML, consultez notre article dédié Limites de l'utilisation du langage HTML pour vos campagnes d'emails.

Séparateur

Le bloc Séparateur permet d’ajouter une ligne horizontale pour séparer les blocs.

Regardez la vidéo pour découvrir comment modifier les paramètres tels que l’épaisseur, la couleur, la forme, la largeur et la couleur d’arrière-plan du bloc Séparateur.

Entête et pied de page

Utilisez le bloc Entête pour ajouter le logo de votre entreprise.

Le bloc Pied de page est essentiel, puisqu’il offre à vos destinataires davantage d’informations sur votre entreprise et leur permet de se désabonner ou de modifier leurs préférences. Il peut comprendre les éléments suivants :

Produit

Si vous utilisez le plugin Shopify ou Shopware avec notre nouvel éditeur Drag & Drop, le bloc de contenu Produit s’affiche.

1. Faites glisser le bloc de contenu Produit dans votre newsletter.
2. Sélectionnez un produit dans la barre de recherche.
3. Cliquez sur Insérer.

L’image, le titre, la description et le prix du produit s’affichent. L’URL du produit est automatiquement ajoutée à l’image et au bouton du produit, tant que votre boutique est publiée.
Pour en savoir plus, consultez notre article dédié Insérer un bloc Produit dans l’éditeur Drag & Drop (Nouveau).

⏩ Et après ?

• Partie 4 : Définir un style de conception pour tout votre email
• Partie 5 : Enregistrer les blocs pour les réutiliser dans vos campagnes
• 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.