Éditeur de lettres d'information : CSS en ligne dans les lettres d'information HTML

Vous avez consacré beaucoup d'efforts à la conception de votre lettre d'information et vous voulez qu'elle arrive dans la boîte de réception de vos destinataires exactement comme vous l'avez créée. En effet, lorsque vous envoyez des lettres d'information, une conception attrayante est importante et essentielle.  

Certains clients de messagerie, comme Gmail, n'affichent plus que les styles CSS en ligne. Que signifie CSS ou Inline CSS, comment accéder au code source de la newsletter ou d'un élément et comment convertir facilement vos styles en Inline CSS dans notre éditeur de newsletter?

Qu'est-ce que CSS/Inline CSS ?

CSS est l'abréviation de "Cascading Style Sheets" (feuilles de style en cascade) et est un langage informatique qui peut être utilisé pour spécifier et définir la conception d'un document électronique (par exemple, un site web, une lettre d'information). Suivez nos instructions simples pour personnaliser des éléments tels que la mise en page, les couleurs et la typographie. Ils sont affichés dans le code source.

L'une des façons de mettre en forme les feuilles de style CSS dans un document web consiste à regrouper toutes les spécifications de style dans une zone centrale. C'est à cela que sert le CSS en ligne. Certains clients de messagerie, tels que Gmail, AOL Mail et Yahoo, n'affichent plus que des feuilles de style CSS en ligne dans les lettres d'information.

Ajuster le code source d'un courriel

Pour accéder au code source de votre e-mail dans notre éditeur de newsletter, cliquez sur [Editor] et [Source code] dans le coin supérieur droit.

Bildschirmfoto_2021-04-12_um_10.10.31.png

Définissez et enregistrez le style de votre newsletter.

Modifier le code source d'un élément

Vous pouvez naviguer dans le code source d'un élément dans notre éditeur de newsletter et l'ajuster. Lorsque vous déplacez la souris sur votre élément, un cadre orange apparaît. Cliquez sur </> pour accéder au code source d'un élément :

Bildschirmfoto_2021-03-23_um_09.36.15.png

Définissez et sauvegardez votre style.

CSS en ligne dans l'éditeur de newsletter

Pour convertir automatiquement les styles en styles CSS en ligne, ouvrez votre e-mail dans notre éditeur de newsletter. Cliquez sur les trois tirets à droite :

Bildschirmfoto_2021-04-27_um_15.16.07.png

Vous pouvez maintenant activer la conversion de tous les styles en [Inline CSS] :

Bildschirmfoto_2021-04-27_um_15.16.18.png

Exemple de zone CSS

Voici à quoi pourrait ressembler une zone de style dans le code source de votre newsletter :

<style>

2 /* @title Test */

3.classtest

4 {

5 taille de la police : 13px ;

6 font-family : Arial, sans-serif ;

7 hauteur de ligne : 21px ;

8 couleur : #262626 ;

9 margin : 0pt ;

10 padding : 0pt ;

11 Décoration du texte : soulignée ;

12 bordure : 0px solid #000000 ;

13 couleur de fond : #370707 ;

14 }

15 </style>

16

 

Définir et styliser des zones CSS supplémentaires :

1/*@title Footer

2 @groupe Pied de page */

3.footer {

4 couleur de fond : #A7C5A1 ;

5 font-size : 10px ;

6 couleur : #ACE950 ;

7 largeur : 600px ;    

8 margin : 0pt ;

9 padding : 15px ;

10 font-family : verdana ;    

11 }

 

Conseil : gardez un style CSS simple, de sorte que si le programme de messagerie du destinataire de votre lettre d'information ne se charge pas correctement, l'e-mail reste lisible.

Aide & Support

Si vous avez des questions ou si vous avez besoin d'une assistance supplémentaire, veuillez contacter notre équipe de service à tout moment .