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 !
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 :
- 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 :
- Créez une campagne email ou un template email et accédez à l'étape Conception.
- Choisissez l'éditeur Drag & Drop pour créer le design de votre email.
- 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.
- (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.
- Cliquez sur Ouvrir le mode développeur.
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é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 |
---|---|
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 :
- Concevez votre email.
- Accédez au mode développeur.
- 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.
- 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'
-
Police du texte :
- Sous la chaîne de
layout
et la valeur320px
, 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'
où 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: SIZEpx
où SIZE est la taille que vous souhaitez donner à votre contenu en px. -
color: 'HEX'
où HEX est le code HEX correspondant à la couleur que vous souhaitez donner à votre contenu.
-
- 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 exempleSi 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é 🧘'
- Passez du mode bureau
(⇧ + D) au mode mobile
(⇧ + 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 :
- Effectuez d'autres modifications en mode développeur si nécessaire.
- Cliquez sur l'icône en forme de croix
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.
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 :
|
|
Pour afficher les annotations Gmail à vos destinataires :
- Concevez votre email.
- Accédez au mode développeur.
- Copiez le code de l'onglet ci-dessous correspondant au type d'annotation que vous souhaitez afficher pour vos destinataires Gmail :
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.
❗️ImportantPour chaque image de votre carrousel de produits, ajoutez un type PromotionCard.Code à copier
Valeurs à remplacer promo:
-
@context: 'http://schema.org/'
@type: PromotionCard
image: IMAGE_URL1
url: PROMO_URL1
headline: HEADLINE1
price: PRICE1
priceCurrency: PRICE_CURRENCY1
discountValue: DISCOUNT_VALUE1
position: POSITION
-
context: 'http://schema.org/'
type: PromotionCard
image: IMAGE_URL2
url: PROMO_URL2
headline: HEADLINE2
price: PRICE2
priceCurrency: PRICE_CURRENCY2
discountValue: DISCOUNT_VALUE2
position: POSITION-
IMAGE_URL
est l'URL de votre image au format PNG ou JPEG, par exemple https://www.exemple.com/image.png. Les formats d'image pris en charge sont 4:5, 1:1, 1,91:1. Pour les carrousels de produits, chaque image doit avoir une URL unique et utiliser le même format d'image. -
PROMO_URL
est l'URL de la promotion. Lorsque les utilisateurs cliquent sur l'image dans l'onglet Promotions, ils se rendent à cette URL. -
(Facultatif
) HEADLINE
est une description de une à deux lignes de la promotion qui s'affiche sous l'image de l'aperçu. -
(Facultatif)
PRICE
est le prix de la promotion. -
(Facultatif)
PRICE_CURRENCY
est la devise du prix au format ISO 4217 à trois lettres, par exemple USD. Cela détermine le symbole de la devise affiché avec le prix. -
(Facultatif)
DISCOUNT_VALUE
est le montant soustrait du prix pour afficher un prix ajusté. Le prix ajusté est affiché à côté du prix d'origine. Par exemple, si discountValue est égal à 25, si le prix est de 100 et si priceCurrency est USD, le prix ajusté s'affiche comme ceci : 75 $. -
(Facultatif)
POSITION
est la position de la carte dans le carrousel.
Code à copier
Valeurs à remplacer promo:
-
@context: 'http://schema.org/'
@type: PromotionCard
image: IMAGE_URL1
url: PROMO_URL1
headline: HEADLINE1
price: PRICE1
priceCurrency: PRICE_CURRENCY1
discountValue: DISCOUNT_VALUE1-
IMAGE_URL
est l'URL de votre image au format PNG ou JPEG, par exemple https://www.exemple.com/image.png. Les formats d'image pris en charge sont 4:5, 1:1, 1,91:1. Pour les carrousels de produits, chaque image doit avoir une URL unique et utiliser le même format d'image. -
PROMO_URL
est l'URL de la promotion. Lorsque les utilisateurs cliquent sur l'image dans l'onglet Promotions, ils se rendent à cette URL. -
(Facultatif)
HEADLINE
est une description de une à deux lignes de la promotion qui s'affiche sous l'image de l'aperçu. -
(Facultatif)
PRICE
est le prix de la promotion. -
(Facultatif)
PRICE_CURRENCY
est la devise du prix au format ISO 4217 à trois lettres, par exemple USD. Cela détermine le symbole de la devise affiché avec le prix. -
(Facultatif)
DISCOUNT_VALUE
est le montant soustrait du prix pour afficher un prix ajusté. Le prix ajusté est affiché à côté du prix d'origine. Par exemple, si discountValue est égal à 25, si le prix est de 100 et si priceCurrency est USD, le prix ajusté s'affiche comme ceci : 75 $.
- (Facultatif)
- 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.
- Effectuez d'autres modifications en mode développeur si nécessaire.
- Cliquez sur l'icône en forme de croix
pour fermer le mode développeur.
- (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.
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 :
Pour modifier la couleur de vos listes à puces et numérotées :
- Créez une liste d'éléments avec des puces ou des numéros.
- Accédez au mode développeur.
- 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. - 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'
. - 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.
- Effectuez d'autres modifications en mode développeur si nécessaire.
- Cliquez sur l'icône en forme de croix
pour fermer le mode développeur.
- Pour changer la couleur de votre texte tout en conservant la couleur de vos puces ou de vos numéros :
- Sélectionnez le texte dont vous souhaitez modifier la couleur.
- Dans la barre d'outils au-dessus de votre texte, cliquez sur l'icône Couleur de police.
- 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.
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 |
---|---|
Pour insérer des espaces et des traits d'union insécables dans le design de votre email :
- Concevez votre email.
- Accédez au mode développeur.
- 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.
- Copiez le code correspondant au type de caractère insécable que vous souhaitez inclure :
- Espace insécable :
- Trait d'union insécable :
-
- Espace insécable :
- Collez le code copié ci-dessus à la place de l'espace ou du trait d'union que vous souhaitez rendre insécable.
- Vérifiez le design de votre email à droite de votre écran pour voir si votre liste d'éléments a changé de couleur.
- Effectuez d'autres modifications en mode développeur si nécessaire.
- Cliquez sur l'icône en forme de croix
pour fermer le mode développeur.
Félicitations ! Vous avez ajouté des caractères insécables au design de votre email.
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 :
- Concevez votre email.
- Récupérez la hauteur en px de votre image d'arrière-plan. Dans notre exemple, 265px.
- Accédez au mode développeur.
- Cliquez sur l'onglet correspondant au problème de rendu que vous souhaitez résoudre :
❗️ImportantCette solution fonctionne uniquement pour les images d'arrière-plan appliquées à la largeur du corps, et non à la pleine largeur, et sous une valeurgrid-row
. Notez qu'une valeurgrid-row
ne doit pas contenir de bouton.- Recherchez la valeur
grid-row
correspondant à l'endroit où votre image d'arrière-plan est affichée. - Sous la valeur
background-image
, entrezheight:
suivi de la hauteur en px de votre image d'arrière-plan. Dans notre exemple, nous allons entrerheight: 265px
.
- Recherchez le contenu pour lequel vous souhaitez résoudre les problèmes d'affichage. Recherchez la valeur
line-height
correspondant à l'endroit où votre texte est affiché. S'il n'y a pas de valeurline-height
pour ce contenu, ajoutez-en une. - Remplacez la taille par défaut de votre valeur
line-height
ou entrez une taille enpx
, car ce sont les seules valeurs prises en charge par les clients email Outlook. Dans notre exemple, nous allons entrer30px
.
- Recherchez la valeur
- Effectuez d'autres modifications en mode développeur si nécessaire.
- Cliquez sur l'icône en forme de croix
pour fermer le mode développeur.
- (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.
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 :
- Concevez votre email et incluez vos icônes de médias sociaux.
- Accédez au mode développeur.
- 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. - Sous chaque valeur
type: social-media
, recherchez la valeuralt: null
. - 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. - Effectuez d'autres modifications en mode développeur si nécessaire.
- Cliquez sur l'icône en forme de croix
pour fermer le mode développeur.
- (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.
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 :
➡️ 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. |
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
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.
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.
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 ?
- Optimiser le design de vos emails pour les appareils mobiles (adapté aux mobiles)
- Concevoir des emails adaptés au mode sombre
- Enregistrez vos éléments de marque dans la bibliothèque de marque pour créer des designs d'email unifié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é.
- SIBML.pdf200 ko