Show Menu
SUJETS×

Gestion des styles

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 de Designer de messagerie, vous pouvez effectuer l’une des opérations suivantes :
  • cliquez directement dans le courrier électronique,
  • ou parcourez l'arborescence disponible à partir des options situées dans la palette de gauche.
Parcourir la structure permet d'effectuer une sélection plus précise. Vous pouvez sélectionner l’une des options suivantes :
  • l'ensemble de la structure,
  • l'une des colonnes qui composent le composant de structure,
  • ou uniquement un composant situé dans une colonne.
Pour sélectionner une colonne, vous pouvez également effectuer les opérations suivantes :
  1. Sélectionnez un composant de structure (directement dans le courrier électronique ou à l’aide de l’arborescence de structure disponible dans la palette de 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. Pour plus d’informations, voir Sélection d’un élément .
  2. Ajustez les paramètres selon vos besoins. Chaque élément sélectionné propose un ensemble de paramètres différent.
    Vous pouvez insérer des arrière-plans, modifier la taille, modifier l’alignement horizontal ou vertical, gérer les couleurs, ajouter du remplissage ou des marges , etc.
    Pour cela, utilisez les options affichées dans le volet Paramètres ou ajoutez des attributs de style intégré .
  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.
Par exemple :
  • Utilisez le remplissage pour définir des marges sur les côtés gauche et droit 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.
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.

Alignement du style

  • 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

En ce qui concerne la définition d’arrière-plans avec le concepteur de courrier électronique, Adobe recommande ce qui suit :
  1. Appliquez une couleur d’arrière-plan au corps de votre courrier électronique si nécessaire dans votre conception.
  2. Dans la plupart des cas, définissez les couleurs d’arrière-plan au niveau de la colonne.
  3. Essayez de ne pas utiliser les couleurs d’arrière-plan sur les composants d’image ou de texte, car ils sont difficiles à gérer.
Vous trouverez ci-dessous les paramètres d’arrière-plan disponibles que vous pouvez utiliser.
  • 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.
  • 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 autre paramètre dans 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 accessible à partir de la palette de gauche pour appliquer une couleur d’arrière-plan spécifique uniquement à cette structure.
    Veillez à ne pas définir de couleur d’arrière-plan de la fenêtre d’affichage, car cela peut masquer les couleurs d’arrière-plan de la structure.
  • Définissez une Image de fond pour le contenu d'un composant de structure.
    Certains programmes de messagerie ne prennent pas en charge les images d’arrière-plan. Veillez à sélectionner une couleur d’arrière-plan de secours appropriée au cas où l’image ne serait pas affichée.
  • Définissez une couleur d’arrière-plan au niveau de la colonne.
    Il s’agit du cas d’utilisation le plus courant. Adobe recommande de définir les couleurs d’arrière-plan au niveau de la colonne, ce qui offre une plus grande souplesse lors de la modification de l’ensemble du contenu du courrier électronique.
    Vous pouvez également définir une image d’arrière-plan au niveau de la colonne, mais elle 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 cela, procédez comme suit :
  1. Sélectionnez le composant de structure directement dans le courrier électronique ou à l’aide de l’arborescence disponible dans la palette de 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.
    Les paramètres éditables pour cette colonne sont affichés dans le volet Paramètres situé à droite.
  3. Sous Alignement vertical , sélectionnez Monter .
    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 de verrouillage pour interrompre la synchronisation avec le remplissage inférieur.
    Définissez les marges gauche et droite pour cette colonne.
  5. Procédez de la même manière pour ajuster l’alignement et le remplissage des autres colonnes.
  6. Enregistrez vos modifications.

Ajouter des attributs de style intégrés

Dans l’interface de Designer de messagerie, lorsque vous sélectionnez un élément et affichez ses paramètres dans le panneau latéral, vous pouvez personnaliser les attributs inséré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 .
  3. Modifiez les valeurs des attributs existants ou ajoutez-en de nouveaux à l’aide du bouton + . Vous pouvez ajouter n’importe quel attribut et 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, le style de l’élément parent est hérité.

Passer en vue mobile

Vous pouvez affiner le responsive design d'un email en éditant séparément toutes les options de style pour l'affichage mobile. Par exemple, vous pouvez adapter les marges et le remplissage, utiliser des tailles de police plus petites ou plus grandes, modifier les boutons ou appliquer différentes couleurs d’arrière-plan spécifiques à la version mobile de votre courrier électronique.
Toutes les options de style sont disponibles dans la vue mobile. Les paramètres de style du concepteur de courrier électronique sont présentés précédemment sur cette page.
  1. Créez un email et commencez à éditer le contenu. Pour plus d’informations, voir Conception d’un contenu de courrier électronique à partir de zéro .
  2. Pour accéder à la vue mobile dédiée, cliquez sur le bouton Passer en vue Mobile .
    La version mobile du courrier électronique s’affiche. Il contient tous les composants et styles définis dans la vue Bureau.
  3. Modifiez indépendamment tous les paramètres de style, tels que la couleur d’arrière-plan, l’alignement, le remplissage, la marge, la famille de polices, la couleur du texte, etc.
  4. Lors de la modification d’un paramètre de style dans la vue mobile, les modifications sont appliquées uniquement à l’affichage mobile.
    Par exemple, réduisez la taille d’une image, ajoutez un arrière-plan vert et modifiez le remplissage dans la vue mobile.
  5. Vous pouvez masquer un composant lorsqu'il est affiché sur un appareil mobile. Pour cela, sélectionnez Afficher uniquement sur les postes de travail dans les Options d'affichage . Vous pouvez également choisir de masquer ce composant sur les postes de travail. Il ne s'affichera donc plus que sur les appareils mobiles. Pour cela, sélectionnez Afficher uniquement sur les appareils mobiles . Par exemple, cette option vous permet d'afficher une image spécifique sur les appareils mobiles et une autre image sur les postes de travail. Vous pouvez définir cette option à partir de la vue mobile ou de poste de travail.
  6. Cliquez de nouveau sur le bouton Passer en vue Mobile pour retourner à la vue de poste de travail standard. Les changements de style que vous venez d'effectuer ne sont pas pris en compte.
    La seule exception concerne les paramètres de style intégré . Toute modification des paramètres de style intégré est également appliquée à la vue de poste de travail standard.
  7. Toute autre modification apportée à la structure ou au contenu de l'email, telle que des modifications de texte, le téléchargement d'une nouvelle image, l'ajout d'un nouveau composant, etc. est également appliquée à la vue standard.
    Par exemple, revenez à la vue mobile, modifiez du texte et remplacez une image.
    Cliquez de nouveau sur le bouton Passer en vue Mobile pour retourner à la vue de poste de travail standard. Les modifications sont reflétées.
  8. La suppression d’un style dans la vue mobile vous ramène au style appliqué en mode Bureau.
    Par exemple, dans la vue mobile, appliquez une couleur d’arrière-plan verte à un bouton.
  9. Passez en mode Bureau et appliquez un arrière-plan gris au même bouton.
  10. Passez de nouveau en vue mobile, puis désactivez le paramètre Couleur de fond .
    La couleur de fond définie dans la vue de poste de travail est maintenant appliquée : elle devient grise (non vide).
    La seule exception concerne le paramètre Couleur de bordure . Lorsqu'il est désactivé dans la vue mobile, aucune bordure n'est plus appliquée, même si une couleur de bordure est définie dans la vue de poste de travail.
La vue mobile n'est pas disponible dans les fragments .