Gestion des styles d'e-mail managing-styles
Dans le concepteur d’e-mail, lorsque vous sélectionnez un élément, plusieurs options spécifiques au type de contenu sélectionné s'affichent dans le volet Paramètres. Vous pouvez utiliser ces options pour changer facilement le style de votre email.
Sélectionner un élément selecting-an-element
Pour sélectionner un élément dans l'interface du Concepteur d'email, vous pouvez :
- cliquer directement dans l'email,
- ou parcourir l'arborescence disponible depuis les options situées dans la Palette gauche.
Parcourir la structure permet d'effectuer une sélection plus précise. Vous pouvez sélectionner :
- l'ensemble du composant de structure,
- une des colonnes qui composent le composant de structure,
- ou un composant situé à l'intérieur d'une colonne.
Pour sélectionner une colonne, vous pouvez également procéder comme suit :
- Sélectionnez un composant de structure (directement dans l'email ou à l'aide de l'arborescence dans la Palette gauche).
- Dans la barre d'outils contextuelle, cliquez sur Sélectionner une colonne pour choisir la colonne désirée.
Consultez un exemple dans cette section.
Ajuster les paramètres de style adjusting-style-settings
-
Sélectionnez un élément dans votre email. Pour plus d'informations, consultez la section Sélectionner un élément.
-
Ajustez les paramètres selon vos besoins. Chaque élément sélectionné offre un ensemble différent de paramètres.
Vous pouvez insérer des arrière-plans, modifier les tailles, changer l'alignement horizontal ou vertical, gérer les couleurs, ajouter une marge ou une marge intérieure, etc.
Pour cela, utilisez les options affichées dans le volet Paramètres ou ajoutez des attributs de style intégré.
-
Enregistrez votre contenu.
Ajustement de la marge et de la marge intérieure about-padding-and-margin
L'interface du concepteur d’e-mail permet d'ajuster rapidement les paramètres de marge et de marge intérieure.
Marge intérieure : ce paramètre permet de gérer l'espace situé à l'intérieur de la bordure d'un élément.
Par exemple :
- Utilisez la marge intérieure pour définir des marges à gauche et à droite d'une image.
- Utilisez la marge intérieure du haut et du bas pour ajouter davantage d'espace à un composant Texte ou Diviseur.
- Pour définir les bordures entre les colonnes au sein d'un élément de structure, définissez la marge intérieure de chaque colonne.
Marge : ce paramètre permet de gérer l'espace entre la bordure de l'élément et l'élément suivant.
Pour la marge et la marge intérieure, cliquez sur l'icône représentant un verrou pour rompre la synchronisation entre les paramètres supérieur et inférieur ou droite et gauche. Vous pouvez ainsi ajuster séparément chaque paramètre.
Alignement du style about-alignment
-
Alignement du texte : placez le curseur de votre souris sur du texte et servez-vous de la barre d'outils contextuelle pour l'aligner.
-
L'Alignement horizontal peut être appliqué au texte, aux images et aux boutons, mais pas aux composants Diviseur et Social à l'heure actuelle.
-
Pour définir l'alignement vertical, sélectionnez une colonne au sein d'un composant de structure et choisissez une option dans le volet Paramètres.
Définition des arrière-plans about-backgrounds
Lorsqu’il s’agit de définir des arrière-plans dans le concepteur d’e-mail, Adobe a les recommandations suivantes :
- Appliquez une couleur de fond au corps de votre email si votre design le requiert.
- Dans la plupart des cas, définissez les couleurs de fond au niveau des colonnes.
- Evitez d'utiliser des couleurs de fond sur des composants d'image ou de texte, car elles sont difficiles à gérer.
Vous trouverez ci-dessous les paramètres de fond disponibles.
-
Définissez une Couleur d’arrière-plan pour l’ensemble de l’e-mail. Assurez-vous de sélectionner les paramètres du corps dans l'arborescence de navigation accessible à partir de la palette gauche.
-
Définissez la même couleur d’arrière-plan pour tous les composants de structure en sélectionnant Couleur d’arrière-plan de la fenêtre. Cette option vous permet de sélectionner un paramètre différent de la couleur d’arrière-plan.
-
Définissez une couleur d’arrière-plan différente pour chaque composant de structure. Sélectionnez une structure dans l'arborescence de navigation accessibles à partir de la palette gauche afin d'appliquer une couleur de fond spécifique uniquement sur cette structure.
Veillez à ne pas définir de couleur de fond de la fenêtre, car celle-ci peut masquer les couleurs de fond de la structure.
-
Définissez une Image d’arrière-plan pour le contenu d’un composant de structure.
note note NOTE Certains programmes de messagerie ne prennent pas en charge les images d’arrière-plan. Si ces images ne sont pas prises en charge, la couleur d’arrière-plan de la ligne est utilisée à la place. Assurez-vous de sélectionner une couleur de fond de secours appropriée dans le cas où l'image ne pourrait s'afficher. -
Définissez une couleur de fond au niveau des colonnes.
note note NOTE Il s'agit du cas pratique le plus courant. Adobe vous recommande de définir les couleur de fond au niveau des colonnes afin de profiter d'une plus grande flexibilité lors de l'édition de l'ensemble du contenu d'email. Vous pouvez également définir une image de fond au niveau des colonnes, mais cette option est rarement utilisée.
Exemple : ajustement de la marge intérieure et de l'alignement vertical example--adjusting-vertical-alignment-and-padding
Vous souhaitez ajuster la marge intérieure et l'alignement vertical à l'intérieur d'un composant de structure composé de trois colonnes. Pour cela, procédez comme suit :
-
Sélectionnez le composant de structure, directement dans l'email ou à l'aide de l'arborescence dans la Palette gauche.
-
Dans la barre d'outils contextuelle, cliquez sur Sélectionner une colonne et choisissez celle à éditer. Vous pouvez également la sélectionner dans l'arborescence.
Les paramètres éditables pour cette colonne sont affichés dans le volet Paramètres situé à droite.
-
Sous Alignement vertical, sélectionnez Monter.
Le composant de contenu s'affiche au-dessus de la colonne.
-
Sous Marge intérieure, définissez la marge intérieure supérieure à l'intérieur de la colonne. Cliquez sur l'icône représentant un verrou pour rompre la synchronisation avec la marge intérieure inférieure.
Définissez la marge intérieure droite et gauche de cette colonne.
-
Procédez de façon similaire pour ajuster l'alignement et la marge intérieure des autres colonnes.
-
Enregistrez vos modifications.
Style des liens about-styling-links
Vous pouvez souligner un lien et sélectionner sa couleur et sa cible dans le concepteur d’e-mail.
-
Dans un composant dans lequel un lien est inséré, sélectionnez le texte du libellé du lien.
-
Dans les paramètres du composant, cochez la case Souligner le lien pour souligner le texte du libellé de votre lien.
-
Pour sélectionner le contexte de navigation dans lequel votre lien sera ouvert, sélectionnez un attribut de Cible.
-
Pour changer la couleur de votre lien, cliquez sur Couleur du lien.
-
Choisissez la couleur dont vous avez besoin.
-
Enregistrez vos modifications.
Ajouter des attributs de style intégrés adding-inline-styling-attributes
Dans l'interface du Concepteur d'email, lorsque vous sélectionnez un élément et affichez ses paramètres dans le volet latéral, vous pouvez personnaliser les attributs intégrés et leur valeur pour cet élément spécifique.
-
Sélectionnez un élément de votre contenu.
-
Sur le panneau latéral, recherchez les paramètres de styles intégrés.
-
Modifiez les valeurs des attributs existants, ou ajoutez-en de nouveaux à l'aide du bouton +. Vous pouvez ajouter tout attribut et toute valeur compatible CSS.
Le style est ensuite appliqué à l'élément sélectionné. Si aucun attribut de style spécifique n’est défini pour les éléments enfants, ils héritent du style de l’élément parent.