Comment utiliser l’option CSS personnalisé dans l’éditeur d’e-mails?
How to use the Custom CSS option in the email editor?
L’option CSS personnalisé dans l’éditeur d’e-mails GetResponse vous permet d’ajouter votre propre code CSS afin de personnaliser l’apparence et l’expérience visuelle de vos messages au-delà des outils de conception standard. Elle offre une plus grande flexibilité pour affiner les styles, les espacements et les effets visuels qui reflètent l’identité de votre marque.
L’option CSS personnalisé est disponible dans les plans Marketer, Creator et MAX (Enterprise). Si vous ne voyez pas cette option dans votre compte, envisagez une mise à niveau pour accéder aux fonctionnalités avancées de personnalisation.
Qu’est-ce que le CSS personnalisé et comment fonctionne-t-il
Le CSS personnalisé vous permet de définir vos propres règles de style qui s’appliquent à l’ensemble du message ou à n’importe quel élément du message. Lorsque vous ajoutez votre code dans l’élément CSS personnalisé, les styles ajoutés sont chargés après (c’est-à-dire qu’ils prennent le pas sur) les styles par défaut fournis par l’éditeur.
Vous pouvez l’utiliser pour :
- Ajuster les couleurs, les polices et les marges.
- Remplacer les styles par défaut des blocs ou des boutons.
- Ajouter de simples effets visuels, tels que des états hover pour les liens ou des coins arrondis sur les images.
Les clients de messagerie (par exemple Gmail, Outlook ou Apple Mail) interprètent le CSS différemment. Certaines propriétés CSS peuvent ne pas s’afficher comme prévu.
Les styles générés par le CSS personnalisé ne sont pas visibles dans l’aperçu du message.
Comment ajouter du CSS personnalisé à l’ensemble du message
Pour ajouter du CSS personnalisé à l’ensemble du message :
- Ouvrez votre e-mail dans l’éditeur de message.
- Cliquez sur Style du message dans le panneau de droite.
- Développez CSS personnalisé.
- Dans la fenêtre de l’éditeur qui s’affiche, collez ou saisissez votre code CSS.
- Cliquez sur l’icône en forme d’œil à côté du code pour prévisualiser vos styles CSS personnalisés.
Comment ajouter du CSS personnalisé aux éléments du message
Vous pouvez sélectionner n’importe quel élément dans l’éditeur de message, comme une section, un bouton, un bloc de texte ou une image, et ajouter du CSS personnalisé uniquement à cet élément. Pour ce faire :
- Ouvrez votre e-mail dans l’éditeur de message.
- Cliquez sur l’élément souhaité dans votre message.
- Utilisez le curseur pour Ajouter du CSS personnalisé dans le panneau de droite.
- Dans la fenêtre de l’éditeur qui s’affiche, collez ou saisissez votre code CSS.
- Cliquez sur l’icône en forme d’œil à côté du code pour prévisualiser vos styles CSS personnalisés.
Lorsque vous cliquez dans l’éditeur et tapez un point (.), vous verrez l’identifiant unique de l’élément : par exemple : .elem-image-abcdef1234 { }.
Vous pouvez utiliser cet ID pour appliquer vos styles personnalisés.
Gardez à l’esprit que différents éléments peuvent nécessiter des sélecteurs différents. Par exemple, si vous stylisez un bouton et souhaitez modifier le texte à l’intérieur, il est préférable de cibler spécifiquement le texte, comme ceci :
.elem-text-216196qwerty span { }
Conseils
- Utilisez des propriétés compatibles en ligne (telles que les couleurs, les bordures et le padding) pour une meilleure compatibilité.
- N’incluez pas de JavaScript ni de fichiers externes — ils ne sont pas pris en charge dans les e-mails.
Support et limitations
L’option CSS personnalisé s’adresse aux utilisateurs familiers avec le HTML et le CSS. Veuillez noter que l’équipe Customer Success de GetResponse ne peut pas aider à la rédaction ou au débogage de votre code personnalisé.
Nous recommandons de tester votre message sur plusieurs appareils et clients de messagerie afin de vous assurer que vos styles s’affichent correctement.
En quoi le CSS personnalisé diffère-t-il du bloc de code personnalisé
| Fonctionnalité | CSS personnalisé | Bloc de code personnalisé |
|---|---|---|
| Objectif | Ajoute des styles CSS à l’ensemble du message ou à un élément | Insère du HTML personnalisé directement dans la mise en page du message |
| Portée | Impacte l’ensemble du message ou les éléments sélectionnés | N’affecte que le bloc sélectionné |
| Contenu autorisé | Uniquement du CSS | HTML et CSS en ligne |
| Cas d’utilisation | Ajustements de style et de design | Insertion d’éléments personnalisés (ex. : compteurs, pixels de suivi) |