Editer les styles d'un email

Editer un élément avec Creative Designer

Dans Creative Designer, 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 Creative Designer, 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 cette section.

  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 de Creative Designer 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

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 :

Avant d'ajuster la marge et la marge intérieure, vérifiez que vous sélectionnez l'élément adéquat (composant de structure, composant de contenu ou colonne) sur lequel vous souhaitez effectuer une action. Selon votre sélection, le résultat sera différent.

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

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é dans Creative Designer

Dans l'interface de Creative Designer, 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.

Gérer le style d'un email avec l'éditeur de contenu

La personnalisation du style d'un email dans l'éditeur de contenu est similaire à l'édition de cet élément dans une landing page. Voir Gérer la structure et le style d'une landing page.

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