Aller au contenu principal

Éditeur Drag & Drop - Partie 3 : Utiliser les blocs de contenu (Texte et Liens, Image, Bouton, etc.)

L'éditeur Drag & Drop facilite la conception d'emails de qualité professionnelle à l'adresse suivante. 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 ou appareil.

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

Nous avons réparti les articles sur l'éditeur Drag & Drop en plusieurs parties :

Avant de commencer

Configurez votre bibliothèque de marques pour que chaque nouveau modèle sélectionné hérite des propriétés de votre marque, telles que le logo, les couleurs, les polices et les liens vers les réseaux sociaux. En plus de vous faire gagner du temps, Brand Library vous permet de maintenir une image de marque cohérente pour vos emails. Pour en savoir plus, consultez notre article Concevoir automatiquement vos emails avec vos éléments de marque à l'aide de la Bibliothèque de marque.

Titre et texte

Barre d'outils de formatage de texte

Sélectionnez le bloc de contenu Texte ou Titre dans le concepteur pour afficher la barre d'outils de formatage de texte en haut du bloc avec les options suivantes :

  • Styles (paragraphes, titres, liens, boutons)
  • Police
  • Taille
  • Couleur du texte
  • Mise en forme du texte (gras, italique, souligné, barré, exposant et indice)

DEE_formatting-toolbar-text_EN-US.gif

❗️ Important
Lorsque vous collez du contenu provenant d'une autre campagne ou d'un autre éditeur, la mise en forme, les tableaux et les images ne sont pas reflétés dans l'éditeur Drag & Drop afin d'éviter que votre contenu ne soit gâché par une mise en forme obsolète. Nous vous recommandons de dupliquer ou d'enregistrer votre bloc de contenu pour le réutiliser dans l'éditeur Drag & Drop. 
Couleurs Ajouter une personnalisation Insérer des liens
DDE_colors_EN.png

Les couleurs que vous utilisez dans votre modèle seront désormais enregistrées dans le sélecteur de couleurs. Vous pouvez toujours supprimer une couleur enregistrée en sélectionnant un texte avec cette couleur en cliquant sur le sélecteur de couleurs, puis sur Supprimer la couleur. La suppression peut prendre quelques minutes.

Regardez la vidéo pour en savoir plus sur l'ajout d'un lien, d'une couleur d'arrière-plan ou d'une image et sur la modification des paramètres du bloc de texte :

Paramètres du panneau gauche

Même un bloc ou un formatage différent

Cliquez sur le bloc Texte pour afficher le panneau de gauche avec des paramètres supplémentaires similaires à ceux disponibles dans l'onglet Conception
Pour obtenir plus d'informations sur l'utilisation de ces paramètres, voir Définir le style de conception de l'ensemble de votre email.

Grâce à cet éditeur, vous pouvez choisir différents formatages au sein d'un même bloc de texte. Par exemple, vous pouvez avoir un titre suivi d'un paragraphe et de puces. Vous pouvez également avoir des couleurs différentes au sein d'un même bloc. 

DEE_text-block_EN-US.gif

Bordures

Vous pouvez également ajouter des bordures à votre bloc Texte ainsi qu'à vos images en utilisant le paramètre Bordures dans le panneau de gauche. Vous pouvez définir des tailles et des couleurs différentes pour chaque bordure ou activer le bouton Appliquer sur tous les côtés pour appliquer une taille et une couleur uniques à toutes les bordures. 

DDE_borders_EN-US.gif

Image

Vous pouvez ajouter une image à partir de l'onglet Contenu en utilisant le bloc Image. Vous pourrez ajouter l'image de votre choix par glisser-déposer depuis votre système, votre bibliothèque de contenu ou en collant le lien vers votre image dans le champ Insérer une image à partir d'une URL. Vous pouvez redimensionner ou modifier votre image directement à partir de l'éditeur.

💡 Bon à savoir
Les images prises en charge dans votre bibliothèque de contenu sont des images .png, .jpeg, .jpg, et .gif avec une taille maximale de 5 Mo.

Le panneau de gauche contient des paramètres supplémentaires similaires à ceux disponibles dans l'onglet Conception
Pour obtenir plus d'informations sur l'utilisation de ces paramètres, voir Définir le style de conception de l'ensemble de votre email.

Ajouter une image

Glisser-déposer Via la bibliothèque de contenu À partir d'une URL
Ajoutez facilement des images dans la conception de votre email en les faisant glisser et en les déposant directement depuis votre système dans votre bloc de contenu Image. Vos images seront automatiquement ajoutées à la conception de votre email et sauvegardées dans votre bibliothèque de contenu.

dde_drag-drop-image_EN-US.gif

Redimensionner une image

Pour redimensionner une image,cliquez sur l'image à redimensionner pour la sélectionner et placez votre curseur dans le coin inférieur droit de l'image. Une fois que la double flèche apparaît, tirez sur le coin jusqu'à ce que vous trouviez la taille parfaite. La taille de votre image est affichée en bleu dans le coin inférieur droit de votre image et est automatiquement mise à jour lorsque vous redimensionnez l'image.
Vous pouvez également utiliser le champ Largeur du panneau de gauche pour redimensionner votre image.

2022-02-11_16-24-57__1_.gif

Modifier une image

Notre éditeur par glisser-déposer comprend un éditeur de photos dans lequel vous pouvez redimensionner votre image, ajouter des filtres, du texte ou une conception de texte. Pour accéder à l'éditeur de photos, cliquez sur votre image et cliquez sur le bouton Modifier dans les paramètres de l'image.

mceclip1.png

Vous pouvez également :

Ajouter un lien vers une image

L'ajout d'un lien vers une image vous permet de rediriger vos destinataires. Vous pouvez les rediriger vers une page ou un fichier.

Redirection vers une page Redirection vers un fichier

Pour rediriger vos destinataires vers la page de votre choix :

  1. Sélectionnez l'image et cliquez sur icon-add-link.png Ajouter un lien, ou appuyez sur ⌘ ou CTRL + K.
    image-add-link.png
  2. Sélectionnez le type de lien que vous souhaitez insérer et saisissez son URL dans le champ Cible du lien.
  3. Facultatif : Ajoutez un titre de lien qui apparaîtra sous forme d'info-bulle au survol.
  4. Cliquez sur Insérer.

Bouton

Ajoutez des boutons pour créer un appel à l'action dans vos emails :

  1. Faites un glisser-déposer du bloc Bouton dans votre campagne.
  2. Remplacez le texte de l'appel à l'action par un texte correspondant au contenu vers lequel vous souhaitez rediriger vos destinataires. 
    Vous pouvez personnaliser le texte avec des attributs de contact. 
  3. Facultatif : Utilisez la barre d'outils de mise en forme du texte et les paramètres du bouton dans le panneau de gauche pour personnaliser votre bouton. 
  4. Ajoutez un lien pour rediriger vos destinataires.
    Redirection vers une page Redirection vers un fichier

    Pour rediriger vos destinataires vers la page de votre choix :

    1. Sélectionnez le bouton et cliquez sur icon-add-link.png Ajouter un lien.
    2. Sélectionnez le type de lien que vous souhaitez insérer et saisissez son URL dans le champ Cible du lien.
    3. Facultatif : Ajoutez un titre de lien qui apparaîtra sous forme d'info-bulle au survol.
    4. Cliquez sur Insérer.
      mceclip1.png

Regardez la vidéo pour en savoir plus sur la modification des paramètres tels que la largeur, le rayon de la bordure, la taille de la ligne, la couleur d'arrière-plan pour le bloc de boutons.

Logo

Ce bloc de contenu vous permet d'insérer le logo de votre marque n'importe où dans la conception de votre email. Ajoutez votre logo à votre bibliothèque de marques pour éviter d'avoir à le télécharger à nouveau à chaque fois. 

logo_EN-US.png

Social

Le bloc Social vous permet de rediriger vos destinataires vers vos pages de réseaux sociaux lorsqu'ils cliquent sur les icônes.

💡 Bon à savoir
Si vous avez déjà ajouté des liens vers des réseaux sociaux dans votre bibliothèque de marques, ces liens seront automatiquement renseignés dans les champs de paramétrage d'icônes. Pour en savoir plus, consultez notre article Concevoir automatiquement vos emails avec les actifs de votre marque à l'aide de la bibliothèque de marques.
  1. Dans l'onglet Contenu, faites un glisser-déposer du bloc Social dans votre campagne.
  2. Laissez les paramètres de conception des icônes par défaut ou choisissez la taille, le style, le thème et l'espacement désirés pour vos icônes de réseaux sociaux.
  3. Collez le lien vers vos pages de réseaux sociaux dans le champ configuration des icônes.
    Vous pouvez cliquer sur
    Ajouter plus pour ajouter des icônes de réseaux sociaux et des liens le cas échéant ou cliquer sur l'icône de corbeille pour supprimer une icône de réseau social et un lien du bloc. 

Regardez la vidéo pour en savoir plus sur la modification des paramètres du bloc social.

HTML

Le bloc HTML vous permet d'ajouter votre propre code. Vous pouvez soit taper votre code, soit le copier-coller. Pour voir un aperçu de votre code, il suffit de quitter le bloc HTML.

Certains clients de messagerie ne prennent pas en charge tous les contenus HTLM, car le HTML de la messagerie n'est pas aussi développé que le HTML du Web. Pour éviter les problèmes concernant votre code dans l'éditeur HTML et le bloc, consultez notre article consacré à l' utilisation du HTML dans vos campagnes de messagerie.

Style 

Les blocs de contenu de style sont des blocs de contenu prédéfinis que vous pouvez compléter avec d'autres blocs. Vous avez le choix entre trois styles de blocs de contenu différents. Pour en savoir plus, consultez notre article consacré aux blocs de style et de contenu.

Séparateur

Le bloc de séparation ajoute une ligne horizontale pour séparer les blocs.

divider-block_EN-US.png

Regardez la vidéo pour en savoir plus sur la modification des paramètres tels que l'épaisseur, la couleur, la forme, la largeur et la couleur d'arrière-plan du bloc séparateur.

En-tête et pied de page

Utilisez le bloc d'en-tête pour ajouter le logo de votre entreprise.

Le bloc du pied de page est essentiel, car il donne à vos destinataires plus d'informations sur votre entreprise et leur permet de se désinscrire ou de modifier leurs préférences. Il peut être composé des éléments suivants :

Informations sur l'entreprise

Cette ligne est composée du nom de votre entreprise et de vos coordonnées.

Icônes de réseaux sociaux
Vous pouvez ajouter des liens vers vos réseaux sociaux dans le pied de page de votre campagne. Pour obtenir plus d'informations, consultez la section relative au bloc de contenu social.
Lien Afficher dans le navigateur
C'est ce que l'on appelle aussi le lien miroir. Il s'agit d'un lien sur lequel les destinataires peuvent cliquer lorsqu'ils rencontrent des difficultés pour visualiser votre message sur leur client de messagerie ou lorsqu'ils souhaitent l'afficher dans la version du navigateur. La plupart des modèles d'email n'ont pas besoin de cette option si les modèles sont réactifs, mais vous pouvez toujours l'ajouter le cas échéant. Pour en savoir plus, consultez notre article Insérer un lien Voir dans le navigateur (miroir) dans vos campagnes.
Cet email a été envoyé à

Cette ligne permet à vos destinataires de savoir que cet email leur est destiné. Il explique également la raison pour laquelle ils ont reçu cet email.

Lien de désinscription

Ce lien est obligatoire, car il permet à vos destinataires de se désinscrire de votre lettre d'information en conformité avec le GRPD. Pour en savoir plus, consultez notre article Insérer un lien de désinscription dans vos campagnes.

Logo Brevo

Il apparaîtra par défaut dans le pied de page de vos emails.

  • Si vous disposez d'une offre gratuite, le logo sera toujours affiché dans votre pied de page.
  • Si vous disposez d'une offre payante, vous pouvez supprimer manuellement le logo de tous les modèles ; sélectionnez le logo et cliquez sur l'icône de la corbeille. Pour éviter de devoir retirer le logo à la main, vous pouvez créer des modèles sans logo et les réutiliser. 
    DDE_delete-logo-new_EN-US.gif

Produit

❗️ Important
La fonction de bloc de produit n'est disponible que si vous utilisez nos plug-ins Shopify, Shopware 5, Shopware 6 ou PrestaShop [1.7 et plus]. Pour obtenir plus d'informations, consultez notre article dédié à l'insertion d'un bloc de produit dans l'éditeur Drag & Drop.

Faites un glisser-déposer du bloc de contenu Produit dans votre bulletin d'information. Vous verrez l'image du produit, le titre du produit, la description du produit et le prix du produit. L'URL du produit est automatiquement liée à l'image et au bouton du produit tant que votre boutique est publiée.

Séparateur 

Le bloc de contenu d'espacement vous permet d'ajouter un bloc d'espacement dans la conception de votre email. Vous pouvez modifier la largeur ou la hauteur du bloc de contenu de l'espaceur pour créer un espace plus ou moins grand. La largeur maximale est de 100 % et la hauteur minimale est de 30 px. Vous pouvez également modifier la couleur de votre bloc d'espacement pour créer un bloc de couleur.

spacer-block-example_EN-US.gif

Vidéo 

Avec le bloc de contenu Vidéo, vous pouvez facilement insérer un lien vidéo dans vos campagnes email :

DDE_insert-video-block_EN-US.gif

Pour en savoir plus, consultez notre article dédié Insérer des vidéos dans ma campagne de messagerie.

⏩ Et après ?

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

💬 Cet article vous a-t-il été utile ?

Utilisateurs qui ont trouvé cela utile : 3 sur 37