Aller au contenu principal

[Nouveau design] Éditeur Drag & Drop - Partie 3 : Comment utiliser les blocs de contenu ? (Texte & Liens, Images, Boutons, etc.)

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] :

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 :

  • Styles (paragraphe, titre, lien, bouton)
  • Police
  • Taille
  • Couleur du texte
  • Format du texte (gras, italique, souligné, barré, exposant et indice)

DEE_formatting-toolbar-text_EN-US.gif

Couleurs

DDE_colors_EN.png

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.

Effacer la 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 :

mceclip1.png

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 :

Ajouter une personnalisation 

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.

DEE_personalization_en-us.png

Insérer des liens 

Pour ajouter un lien à votre texte, sélectionnez le texte, puis cliquez sur l’icône de lien 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.

mceclip0.png

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 est automatiquement ajouté au pied de page 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 Sendinblue 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
    Sendinblue 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.

mceclip1.png

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. 

DEE_text-block_en-us.gif

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. 

DDE_borders_en-us.gif

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.

DEE_image-settings_en-us.gif

Ajouter une image à partir de la médiathèque

  1. Sélectionnez le bloc d’image et cliquez sur Remplacer dans les paramètres de l’image pour ouvrir la médiathèque.
  2. Repérez l’image que vous souhaitez ajouter depuis Mes fichiers ou Images stock.
    • Mes fichiers : contient les images que vous avez vous-même importées. Cliquez sur Nouvelle importation pour importer une ou plusieurs images à partir de votre système.
      Vous pouvez également créer des dossiers pour organiser vos images et les trouver plus facilement.
    • Images stock : il s’agit d’images extraites d’Unsplash, qui sont libres d’utilisation.
  3. Sélectionnez l’image souhaitée et cliquez sur Insérer dans la barre du haut.
    Votre image est alors ajoutée dans le bloc d’image.

Ajouter une image à partir d’une URL

  1. Sélectionnez le bloc Image.
  2. Dans les paramètres d’image sur la gauche, ajoutez l’URL de l’image dans le champ Insérer une image à partir d’une URL.

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.

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

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.

mceclip1.png

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.

mceclip2.png

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.

mceclip1.png

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.

💡 Bon à savoir
Nous avons probablement ajouté les liens de réseaux sociaux de votre 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.

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.

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 :

  • Informations sur l’entreprise
    Cette option comprend le nom et les coordonnées de votre entreprise. 
  • Icônes de réseaux sociaux
    Vous pouvez ajouter des liens vers vos pages de réseaux sociaux dans le pied de page de votre campagne. 
    Pour en savoir plus, consultez la section dédiée au bloc de contenu Réseaux sociaux.
  • Lien « Visualiser dans le navigateur »
    Également appelé « lien miroir », cet élément est un lien sur lequel les destinataires peuvent cliquer s’ils ont des difficultés à afficher l’email dans leur messagerie et s’ils souhaitent afficher l’email dans le navigateur. La plupart des templates d’email n’ont pas besoin de cette option si leur design s’adapte automatiquement à l’appareil utilisé, mais vous pouvez toujours l’ajouter si nécessaire.
  • Cet email a été envoyé à
    Cette option permet d’indiquer à vos destinataires que cet email leur est destiné. Elle leur explique également pourquoi ils ont reçu cet email. 
  • Lien de désinscription
    Ce lien est obligatoire, puisqu’il permet à vos destinataires de se désinscrire de votre newsletter, conformément au RGPD.
  • Logo de Sendinblue
    Ce logo s’affiche par défaut dans le pied de page de vos emails.
    • Si vous avez une offre gratuite, le logo sera toujours inclus dans votre pied de page.
    • Si vous avez un plan payant, vous pouvez retirer le logo manuellement sur chaque template : sélectionnez le logo et cliquez sur l'icône poubelle. Pour éviter d'avoir à retirer le logo manuellement à chaque fois, vous pouvez créer des templates sans logo et les réutiliser. 
      DDE_delete-logo-new_EN-US.gif

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 ?

 

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