Le texte aura la même taille de police sur les ordinateurs de bureau et les appareils mobiles. Si le titre est assez grand, il peut être judicieux de le réduire sur les appareils mobiles afin qu'il n'occupe pas tout l'écran.
Même si vous n'êtes pas très familier avec le CSS, nous pouvons vous aider à modifier la taille de la police ou d'autres éléments de style avec le CSS dans les skins.
Cliquez sur le texte que vous souhaitez modifier pour voir quelle classe lui est appliquée. Lorsque le texte a la classe Heading 1, vous devez utiliser H1 dans le CSS
Heading 1 » H1
Heading 2» H2
Text 1 » P1
Text 2 » P2
Link 1 » L1
Link 2 » L2
Header Header » HeaderH
Header Text » HeaderP
Header Link » HeaderL
Footer Header » FooterH
Footer Text » FooterP
Footer Link » FooterL
Ensuite, vous allez dans Skins, soit directement dans l'onglet Scripts, soit, si vous voulez seulement changer le style d'un projet, vous sélectionnez d'abord le projet.
Dans Scripts, allez dans Email > CSS où vous pouvez ajouter le code. Si, par exemple, l'en-tête 1 doit être de 18px sur les appareils mobiles, ajoutez le code suivant :
@media screen and (max-device-width: 480px), screen and (max-width: 480px) {
.H1 {font-size: 18px !important;}
}
Si vous souhaitez que le texte principal ait une autre taille et une autre couleur, vous pouvez ajouter le code suivant :
@media screen and (max-device-width: 480px), screen and (max-width: 480px) {
.H1 {font-size: 18px !important;}
.P1 {font-size: 14px !important; color: #333333;}
}
Vous pouvez copier et coller les exemples de code ci-dessus, en changeant simplement le nom de la classe par celui dont vous avez besoin et la valeur que vous voulez avoir.
Enregistrez les modifications que vous avez apportées, rechargez votre projet d'e-mail ou votre modèle, allez à Test (ou Summary), choisissez le Smartphone comme appareil pour la prévisualisation et vous verrez les changements.
Vous pouvez également ajouter un style de texte qu'il n'est pas possible de définir dans Skins > Style, dans Scripts > Email > CSS. Si vous souhaitez modifier le style pour tous les appareils, la requête média n'est pas nécessaire et vous ajoutez par exemple juste
.H1 {text-shadow: 2px 2px #FF0000;}
si vous souhaitez donner une ombre rouge à l'Heading1.
N'oubliez pas que toutes les propriétés CSS ne fonctionnent pas dans le courriel et que tous les clients couriel ne prennent pas en charge les CSS (comme Outlook sous Windows - dans ce cas, le Heading 1 s'afficherait sans l'ombre).