Utiliser le mode développeur pour une personnalisation avancée des designs d'emails

Le mode développeur de l'éditeur d'email Drag & Drop offre une personnalisation avancée avec une plus grande flexibilité et un meilleur contrôle sur le design de vos emails. Il est conçu pour les personnes souhaitant ajouter des codes personnalisés tels que la modification de la couleur des puces ou l'affichage d'une taille ou d'une couleur de police différente pour les emails lus sur les téléphones portables. 

Qu’est-ce que le mode développeur ?

Le mode développeur est un éditeur de code YAML intégré à l'éditeur d'email Drag & Drop. Il vous permet de contrôler vos templates email et d'effectuer des actions qui ne sont pas prises en charge par l'interface de l'éditeur d'email Drag & Drop. Notez que toutes les propriétés CSS ne sont pas prises en charge dans le mode développeur.

➡️ Découvrez nos cas d'utilisation les plus fréquents en mode développeur pour une personnalisation avancée des emails !

ddde_access-developer-mode_fr.png

Bon à savoir

  • Toutes les modifications apportées en mode développeur sont automatiquement enregistrées. S'il y a une erreur dans votre code, un message d'erreur s'affiche et vos modifications ne sont pas enregistrées.
  • Le mode développeur s'ouvre sur la gauche de votre écran, ce qui vous permet de voir vos modifications en temps réel dans le design de votre email. Vous pouvez développer ou fermer le mode développeur à tout moment en passant la souris dessus et en cliquant sur l'icône correspondante dans le coin supérieur droit :
    dvlp-mode_expand-close_EN-US.gif
  • Pour éviter d'avoir à faire défiler le mode développeur pour trouver un contenu, vous pouvez le rechercher rapidement en appuyant sur Ctrl ou ⌘ + F et en le saisissant dans la barre de recherche.
  • Testez vos emails avant de les programmer pour vous assurer que toutes les modifications que vous avez apportées dans le mode développeur fonctionnent correctement.

</> Accéder au mode développeur

Pour accéder au mode développeur :

  1. Créez une campagne email ou un template email et accédez à l'étape Conception
  2. Choisissez l'éditeur Drag & Drop pour créer le design de votre email.
  3. Dans l'en-tête de l'éditeur Drag & Drop, cliquez sur l'icône à trois points > Mode développeur. Une fenêtre d'information s'ouvre.
  4. (Facultatif) Cochez la case Ne plus afficher si vous ne voulez pas voir la fenêtre d'information la prochaine fois que vous ouvrirez le mode développeur. 
  5. Cliquez sur Ouvrir le mode développeur.open-dvlp-mode_FR.gif

Le mode développeur s'ouvre sur la gauche de votre écran, affichant les modifications en temps réel sur le design de votre email à droite de votre écran. Toutes vos modifications sont automatiquement enregistrées. Une fois que vous avez terminé d'utiliser le mode développeur, vous pouvez le fermer et revenir au mode de conception. 

Cas d'utilisation courants du mode développeur pour une personnalisation avancée

Pour vous aider à comprendre la puissance du mode développeur de l'éditeur d'email, nous avons listé nos cas d'utilisation les plus fréquents du mode développeur pour la personnalisation avancée des emails. Ouvrez les accordéons ci-dessous pour découvrir comment tirer parti du mode développeur :

🔤 Définir une taille, une famille ou une couleur de police différente pour le mode mobile

Définissez différents styles de police pour les appareils mobiles afin de garantir la lisibilité et l'attrait visuel :

  • Utilisez une taille de police plus petite pour adapter le contenu aux écrans plus petits,
  • utilisez une famille de polices sûre pour une meilleure lisibilité, et
  • ajustez la couleur de la police pour assurer un bon contraste dans diverses conditions d'éclairage ou pour les paramètres mode sombre.
Email sur les ordinateurs de bureau Email sur les appareils mobiles
dvlp-mode_desktop_EN-US.jpeg dvlp-mode_mobile_EN-US.jpeg

Pour modifier la taille, la couleur ou la famille de vos polices pour les appareils mobiles, vous devez définir les styles de police pour les appareils mobiles et les ordinateurs de bureau : 

  1. Concevez votre email. 
  2. Accédez au mode développeur
  3. Recherchez le contenu pour lequel vous souhaitez modifier les styles de police. Les paramètres de votre contenu se trouvent juste au-dessus de celui-ci dans le code. 
  4. Copiez les codes correspondant au type de style que vous souhaitez modifier sur les appareils mobiles : 
    • Police du texte : font-family: 'font family name'
    • Taille du texte : font-size: SIZEpx
    • Couleur du texte : color: 'HEX' 
  5. Sous la chaîne de layout et la valeur 320px, collez les codes que vous avez copiés ci-dessus pour modifier les styles de police pour appareil mobile et remplacez leur valeur par celle dont vous avez besoin :
    • font-family: 'font family name'font family name est le nom de la police tel qu'il apparaît dans la liste des polices disponibles dans l'éditeur
    • font-size: SIZEpxSIZE est la taille que vous souhaitez donner à votre contenu en px. 
    • color: 'HEX'HEX est le code HEX correspondant à la couleur que vous souhaitez donner à votre contenu. 
      dvlp-mode_font-changes_EN-US.png
  6. Depuis la chaîne de contenu, dans notre exemple 3 conseils pour pratiquer le yoga en toute sécurité, supprimez tous les attributs de style, span ou class entre les '' pour ne conserver que votre contenu.
    ➡️  Par exemple
    Si votre chaîne de contenu est : 
    content: '<h2 class="default-heading2"><span style="color:#116b6b;">Nos 3 conseils pour pratiquer le yoga en toute sécurité 🧘</span></h2>'
    Supprimez tous les attributs de style ou de classe pour ne conserver que votre contenu, par exemple : 
    content: 'Nos 3 conseils pour pratiquer le yoga en toute sécurité 🧘'
  7. Passez du mode bureau desktop-mode.png (⇧ + D) au mode mobile mobile-mode.png (⇧ + M) en utilisant les icônes correspondantes en haut à droite de votre éditeur d'email. Cela vous permettra de vous assurer que vos styles de police changent en fonction du type d'appareil sur lequel ils sont lus :
    dvlp-mode_switch-modes_EN-US.gif
  8. Effectuez d'autres modifications en mode développeur si nécessaire.  
  9. Cliquez sur l'icône en forme de croix close-dvlp-mode.jpeg pour fermer le mode développeur.

Félicitations ! Vos styles de police changent désormais en fonction de l'appareil sur lequel ils sont lus. 

🎠 Ajouter des annotations Gmail (aperçu de l'opportunité, de l'image, ou du carrousel de produits dans la boîte de réception)
❗️Important
Pour afficher les annotations Gmail à vos destinataires Gmail, vous devez d'abord vous inscrire auprès de Google. Les annotations peuvent ne pas apparaître pour tous les destinataires Gmail en raison de facteurs tels que les filtres de qualité et les limites de fréquence. Les annotations sont uniquement visibles dans l'onglet Promotions de Gmail. 

Les annotations Gmail permettent aux utilisateurs de Gmail de visualiser vos promotions et d'y participer directement depuis leur boîte de réception en cliquant sur l'image ou le texte annoté sans ouvrir l'email. Ces annotations permettent aux messages reçus dans l'onglet Promotions de Gmail de se démarquer en ajoutant des fonctionnalités telles que les suivantes :

  • Annotations de l'opportunité
  • Carrousels de produits
  • Aperçu d'une seule image

dvlp-mode_gmail-annotation_EN-US.png

Pour afficher les annotations Gmail à vos destinataires : 

  1. Concevez votre email. 
  2. Accédez au mode développeur
  3. Copiez le code de l'onglet ci-dessous correspondant au type d'annotation que vous souhaitez afficher pour vos destinataires Gmail : 
    Annotations de l'opportunité Carrousels de produits Aperçu d'une seule image

    Code à copier

    Valeurs à remplacer
    promo:
    -
    @context: 'http://schema.org/'
    @type: DiscountOffer
    description: DESCRIPTION
    discountCode: DISCOUNT_CODE
    availabilityStarts: START_DATE_TIME
    availabilityEnds: END_DATE_TIME
    • (Facultatif) DESCRIPTION est le texte qui s'affiche avec le badge d'opportunité, par exemple 20 % de réduction
    • (Facultatif) DISCOUNT_CODE est le code de réduction ou de promotion de l'offre, par exemple 20AUJOURDHUI
    • (Facultatif) START_DATE_TIME est la date et l'heure de début de l'offre au format ISO 8601, par exemple 2023-09-25T18:44:37-07:00.
    • (Facultatif) END_DATE_TIME est la date et l'heure de fin de la promotion au format ISO 8601, par exemple 2023-09-25T18:44:37-07:00.
  4. En haut du mode développeur, sous la valeur fonts et au premier niveau, collez le code que vous avez copié dans l'un des onglets ci-dessus.
  5. Effectuez d'autres modifications en mode développeur si nécessaire.
  6. Cliquez sur l'icône en forme de croix close-dvlp-mode.jpeg pour fermer le mode développeur.
  7. (Facultatif) Envoyez un email de test à une adresse email de test utilisant Gmail et avec l'onglet Promotions actif, pour vous assurer que l'annotation Gmail s'affiche correctement.

Vous pouvez également utiliser notre éditeur HTML pour afficher les annotations Gmail. Pour en savoir plus, consultez la documentation officielle de Google

🎨 Modifier la couleur des listes à puces et des listes numérotées

Il peut être utile de modifier la couleur de vos puces ou de vos numéros pour mettre l'accent sur des points clés, regrouper des idées ou correspondre à votre image de marque. Vous trouverez ci-dessous un exemple de liste à puces colorée : 

dvlp-mode_bullet-points_EN-US.png

💡 Bon à savoir
Lorsque vous changez la couleur de vos puces ou de vos numéros, le texte qui leur est associé hérite automatiquement de leur couleur. Cependant, vous pourrez modifier la couleur de votre texte en dehors du mode développeur après avoir appliqué la couleur de votre puce.

Pour modifier la couleur de vos listes à puces et numérotées :

  1. Créez une liste d'éléments avec des puces ou des numéros. 
  2. Accédez au mode développeur
  3. Recherchez la liste que vous venez de créer dans le mode développeur et repérez la valeur content qui lui correspond. Les paramètres de votre contenu se trouvent juste au-dessus de celui-ci dans le code. 
  4. Sous la valeur default, collez le code suivant, où HEX est le code HEX correspondant à la couleur que vous voulez donner à votre liste : color: '#HEX'.
    dvlp_paste-bullet_EN-US.png
  5. Vérifiez le design de votre email à droite de votre écran pour voir si votre liste d'éléments a changé de couleur. Vos puces ou numéros et le texte associé doivent apparaître dans la couleur qui correspond au code HEX que vous avez entré dans le mode développeur. 
  6. Effectuez d'autres modifications en mode développeur si nécessaire. 
  7. Cliquez sur l'icône en forme de croix close-dvlp-mode.jpeg pour fermer le mode développeur.
  8. Pour changer la couleur de votre texte tout en conservant la couleur de vos puces ou de vos numéros :
    1. Sélectionnez le texte dont vous souhaitez modifier la couleur. 
    2. Dans la barre d'outils au-dessus de votre texte, cliquez sur l'icône Couleur de police.
      dvlp-mode_change-text-color_EN-US.png
    3. Dans le champ HEX, collez le code couleur HEX que vous souhaitez donner à votre texte. Dans notre exemple, #
      3B3F44

Félicitations ! Vous avez changé la couleur de vos puces ou de vos numéros. 

️↪️ Ajouter des espaces ou des traits d'union insécables

Les espaces et les traits d'union insécables garantissent une mise en forme correcte des emails en évitant les sauts de ligne indésirables, comme le fractionnement d'un nom composé ou du prix d'un article, et en préservant la lisibilité sur tous les appareils. Consultez l'exemple ci-dessous pour comprendre l'importance des espaces et des traits d'union insécables :

Sans caractères insécables Avec des caractères insécables
dvlp_breaking_EN-US.jpeg dvlp_non-breaking_EN-US.jpeg

Pour insérer des espaces et des traits d'union insécables dans le design de votre email : 

  1. Concevez votre email. 
  2. Accédez au mode développeur
  3. Recherchez le contenu auquel vous souhaitez ajouter un espace ou un trait d'union insécable. Les paramètres de votre contenu se trouvent juste au-dessus de celui-ci dans le code. 
  4. Copiez le code correspondant au type de caractère insécable que vous souhaitez inclure :
    • Espace insécable : &nbsp;
    • Trait d'union insécable : -
  5. Collez le code copié ci-dessus à la place de l'espace ou du trait d'union que vous souhaitez rendre insécable.
    dvlp_add-nonbreaking_EN-US.jpeg
  6. Vérifiez le design de votre email à droite de votre écran pour voir si votre liste d'éléments a changé de couleur. 
  7. Effectuez d'autres modifications en mode développeur si nécessaire. 
  8. Cliquez sur l'icône en forme de croix close-dvlp-mode.jpeg pour fermer le mode développeur.

Félicitations ! Vous avez ajouté des caractères insécables au design de votre email. 

🏞️ Corriger les problèmes de rendu des images d'arrière-plan et des blocs de texte dans Outlook

Les versions de bureau d'Outlook utilisant le moteur de rendu de Microsoft Word ont une prise en charge limitée du CSS (par exemple, Outlook 2007, 2010, 2013, 2016, et les versions de bureau d'Office 365). Les images d'arrière-plan et la mise en forme du texte s'affichent souvent de manière incorrecte, avec des arrière-plans blancs au lieu des images et du texte mal aligné en raison d'une mauvaise gestion de propriétés telles que background-image et line-height.

Pour vous assurer que les images d'arrière-plan et les blocs de texte s'affichent correctement dans Outlook, utilisez la solution de contournement suivante :

  1. Concevez votre email. 
  2. Récupérez la hauteur en px de votre image d'arrière-plan. Dans notre exemple, 265px. 
  3. Accédez au mode développeur
  4. Cliquez sur l'onglet correspondant au problème de rendu que vous souhaitez résoudre :
    Image d'arrière-plan Bloc de texte
    ❗️Important
    Cette solution fonctionne uniquement pour les images d'arrière-plan appliquées à la largeur du corps, et non à la pleine largeur, et sous une valeur grid-row. Notez qu'une valeur grid-row ne doit pas contenir de bouton.
    1. Recherchez la valeur grid-row correspondant à l'endroit où votre image d'arrière-plan est affichée.
    2. Sous la valeur background-image, entrez height: suivi de la hauteur en px de votre image d'arrière-plan. Dans notre exemple, nous allons entrer height: 265px.
      dvlp-mode_bckg-image_EN-US.png
  5. Effectuez d'autres modifications en mode développeur si nécessaire. 
  6. Cliquez sur l'icône en forme de croix close-dvlp-mode.jpeg pour fermer le mode développeur.
  7. (Facultatif) Envoyez un email de test à une adresse email de test utilisant l'une des versions d'Outlook qui ne prend pas en charge les images d'arrière-plan pour vous assurer qu'elle s'affiche correctement.
🤖 Ajouter un texte alternatif aux icônes des médias sociaux

Ajoutez un texte alternatif à vos icônes de médias sociaux dans le design de vos emails afin d'améliorer l'accessibilité pour les personnes malvoyantes utilisant des lecteurs d'écran, d'améliorer l'expérience de l'utilisateur et de garantir un contexte clair si les images ne se chargent pas.

Pour ajouter du texte alternatif au design de votre email : 

  1. Concevez votre email et incluez vos icônes de médias sociaux.
  2. Accédez au mode développeur
  3. Recherchez les valeurs type: social-media. Il doit y en avoir une pour chaque icône de média social. Les paramètres de votre contenu se trouvent juste au-dessus de celui-ci dans le code. 
  4. Sous chaque valeur type: social-media, recherchez la valeur alt: null.
  5. Remplacez null par votre texte alternatif. Dans notre exemple, le texte alternatif de l'icône de notre site web sera Site web de The Green Yoga et celui de notre icône Instagram sera Compte Instagram
    dvlp-mode_alt-text_EN-US.jpeg
  6. Effectuez d'autres modifications en mode développeur si nécessaire.  
  7. Cliquez sur l'icône en forme de croix close-dvlp-mode.jpeg pour fermer le mode développeur.
  8. (Facultatif) Envoyez un email de test pour vérifier que votre texte alternatif s'affiche correctement pour chacune de vos icônes de média.
📦 Afficher une liste d'éléments en fonction de leur statut

Affichez une liste spécifique de contenu (image, titre, texte, section, etc.) uniquement lorsque les conditions de la section sont remplies. Cette fonction est très utile lorsque vous souhaitez afficher une liste d'éléments uniquement si elle contient les éléments souhaités.

Par exemple, vous pouvez créer un email de confirmation d'expédition qui comprend des listes distinctes pour les articles expédiés et les articles en rupture de stock.

Cet email contiendrait :

  • une liste des articles qui ont été expédiés.
  • une liste des articles qui sont en rupture de stock et qui seront expédiés plus tard.

➡️ Pour en savoir plus sur la façon dont vous pouvez afficher une liste d'articles en fonction de leur statut, consultez notre article dédié Afficher ou masquer du contenu en fonction du contenu répétable.

email-example-shipped-later_fr.png

Si vous souhaitez aller plus loin dans la personnalisation du design de vos emails avec le mode développeur, consultez notre documentation technique pour notre langage de template et voyez toutes les actions disponibles :

❓ FAQ

Puis-je utiliser le langage HTML en mode développeur ?

Contrairement à ce que vous auriez pu penser, vous ne pouvez pas taper directement du code HTML en mode développeur. Au lieu de cela, vous devez utiliser YAML qui est une représentation facile pour une structure arborescente similaire à JSON.

Ce langage vous permet d'utiliser des définitions abstraites créées par notre équipe pour faciliter le développement de templates et pour vous assurer que le code HTML généré et envoyé au client est géré par nos outils. Cela permet d’obtenir la meilleure qualité et une assistance étendue pour les clients email.

Pourquoi ne puis-je pas modifier le code HTML directement ?

Comme vous le savez peut-être, les clients email ne sont pas tous les mêmes et il peut être difficile de créer des newsletters d’aspect professionnel qui fonctionnent partout, y compris sur les téléphones mobiles et dans Outlook.

Il s’agit également d’un travail standard en cours, car de nouveaux clients email arrivent et les anciens clients modifient la façon dont ils affichent les emails.

C’est pourquoi nous travaillons dur pour nous assurer que vos emails fonctionneront comme prévu partout, avec un minimum d’effort de votre part. Nous avons créé un moyen abstrait de haut niveau vous permettant de définir votre code HTML ; nous nous occupons de faire opérer la magie en coulisses. 

Y a-t-il des limitations dans le mode développeur ?

Pour 99 % des cas d’utilisation, vous trouverez rarement des limitations avec notre langage de template, car nous travaillons constamment à sa mise à jour, mais bien sûr, nous avons pu manquer quelques bizarreries ou fonctionnalités spécifiques au client. Cela ouvre un nouveau monde de possibilités au-delà de ce que nous proposons dans l’interface. Découvrez nos cas d'utilisation les plus fréquents en mode développeur pour une personnalisation avancée des emails !

⏭️ 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.

Si vous avez besoin d'aide pour un projet impliquant Brevo, nous pouvons vous mettre en relation avec un Partenaire Brevo certifié.

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

Utilisateurs qui ont trouvé cela utile : 5 sur 10