Editer les styles d'un email

Editer un élément

Dans le Concepteur d'email, 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

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.

des_tree_structure

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.

des_tree_structure_selection

Pour sélectionner une colonne, vous pouvez également procéder comme suit :

  1. Sélectionnez un composant de structure (directement dans l'email ou à l'aide de l'arborescence dans la Palette gauche).

  2. 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

  1. Sélectionnez un élément dans votre email. Voir à ce propos la section Sélectionner un élément.

  2. 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é.

    des_settings_pane
  3. Enregistrez votre contenu.

A propos de la marge et de la marge intérieure

L'interface du Concepteur d'email 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.

des_padding

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.

des_margin

Remarque :

Selon votre sélection (composant de structure, de colonne ou de contenu), le résultat sera différent. Adobe vous recommande de définir les paramètres Marge intérieure et Marge au niveau des colonnes.

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.

des_padding_lock_icon

A propos de l'alignement

  • Alignement du texte : placez le curseur de votre souris sur du texte et servez-vous de la barre d'outils contextuelle pour l'aligner.

    des_text_alignment
  • L'Alignement horizontal peut être appliqué au texte, aux images et aux boutons, mais pas aux composants Diviseur et Social à l'heure actuelle.

    des_horizontal_alignment
  • 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.

    des_set_vertical_alignment

A propos des fonds

Lorsqu'il s'agit de définir des fonds dans le Concepteur d'email, Adobe a les recommandations suivantes :

  1. Appliquez une couleur de fond au corps de votre email si votre design le requiert.

  2. Dans la plupart des cas, définissez les couleurs de fond au niveau des colonnes.

  3. 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 de fond pour l'ensemble de l'email. Assurez-vous de sélectionner les paramètres du corps dans l'arborescence de navigation accessible à partir de la palette gauche.

    des_background_body
  • Définissez la même couleur de fond pour tous les composants de structure en sélectionnant Couleur de fond de la fenêtre. Cette option vous permet de sélectionner un paramètre différent de la couleur de fond.

    des_background_viewport
  • Définissez une couleur de fond 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.

    des_background_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 de fond pour le contenu d'un composant de structure.

    des_background_image

    Remarque :

    Certains programmes de messagerie ne prennent pas en charge les images de fond. 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.

    des_background_column

    Remarque :

    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

Vous souhaitez ajuster la marge intérieure et l'alignement vertical à l'intérieur d'un composant de structure composé de trois colonnes. Pour ce faire, procédez comme suit :

  1. Sélectionnez le composant de structure, directement dans l'email ou à l'aide de l'arborescence dans la Palette gauche.

  2. 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.

    des_selecting_column

    Les paramètres éditables pour cette colonne sont affichés dans le volet Paramètres situé à droite.

  3. Sous Alignement vertical, sélectionnez Monter .

    des_vertical_alignment

    Le composant de contenu s'affiche au-dessus de la colonne.

  4. 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.

    des_adjusting_padding
  5. Procédez de façon similaire pour ajuster l'alignement et la marge intérieure des autres colonnes.

    des_adjusting_columns
  6. Enregistrez vos modifications.

Ajouter des attributs de style intégrés

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.

  1. Sélectionnez un élément de votre contenu.

  2. Sur le panneau latéral, recherchez les paramètres de styles intégrés.

    email_designer_inlineattributes
  3. 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.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne