CSS en Email HTML
Cet article donne quelques conseils de base sur l'utilisation de CSS en HTML email.
Faites le boulot avec un pro
De la formation aux services marketing complets, notre communauté de partenaires peut vous aider à faire avancer les choses.
Utiliser le CSS Inliner
Copier l'URL de l'article
Il a été copié
Pour obtenir les meilleurs résultats possibles lorsque vous travaillez avec des feuilles de style CSS dans un e-mail HTML, veillez à choisir un code simple et intégré à votre feuille de style. L'outil CSS Inliner automatique de Mailchimp convertit les styles de votre code collé en styles intégrés et vous évite de devoir le coder à la main.
Dans cet article, vous apprendrez à activer l'outil CSS Inliner automatique dans un modèle à codage personnalisé, et vous découvrirez les sélecteurs pris en charge.
Activer l'Inliner
Pour activer le CSS Inliner dans un modèle à code personnalisé, procédez comme suit.
- Dans la section Contenu de la liste de contrôle, cliquez sur Concevoir un e-mail.
- À l'étape du modèle, cliquez sur l'onglet Code personnalisé et sélectionnez Coller le code. Si vous utilisez le nouveau créateur, cliquez sur Oui, continuer avec le créateur classique dans la fenêtre contextuelle modale.
- À l'étape Code , collez votre code HTML.
- Cliquez sur l'onglet Settings (Paramètres).
- Cochez la case à côté de Automatic CSS Inliner (CSS Inliner automatique).
Sélecteurs pris en charge par le CSS Inliner
Utilisez le CSS Inliner automatique pour inclure des styles CSS sophistiqués dans votre e-mail en HTML, y compris les attributs, les pseudo-classes, les descendants, et plus encore. Voici les sélecteurs pris en charge par l'Inliner :
- nom de balise
- classe
- a l'attribut
- valeur d'attribut égale à
- valeur d'attribut est l'une de
- valeur d'attribut contient
- valeur d'attribut tiret
- valeur d'attribut commence par
- valeur d'attribut se termine par
- premier enfant de pseudo-classes
- dernier enfant
- enfant unique
- vide
- pas
- énième enfant
- enfant
- descendant
- frère/sœur
Une fois que vous aurez activé l'Inliner et que le reste de votre code sera prêt, continuez à configurer votre e-mail.
Remarque
- Une fois que vous aurez activé l'option Inliner, vous ne verrez pas de changement immédiat dans votre code. Une fois votre message envoyé dans la file d'attente, nous convertirons les styles avant de le distribuer à votre audience. Cependant, avant d'effectuer l'envoi, vous pouvez générer un aperçu de l'e-mail dans une visionneuse côte à côte afin de vérifier que les modifications sont correctes.
- L'Inliner ne "répare" pas tous les problèmes d'assistance liés à la feuille de style CSS. Vous devez donc utiliser uniquement les styles qui peuvent être employés en toute sécurité lors de l'envoi d'e-mails groupés. Par exemple, il est toujours déconseillé d'utiliser des balises DIV pour positionner votre contenu.
Assistance technique
Vous avez une question?
Les utilisateurs payants peuvent se connecter pour accéder à l'assistance par e-mail et chat.
Connexes
À propos des e-mails HTML
Découvrez ce qu'il y a à savoir sur les e-mails HTML et obtenez des conseils sur la façon de les mettre en forme.