[Beta]{class="badge informative"}
Utiliser des thèmes de marque pour le contenu des e-mails email-brand-themes
Grâce aux thèmes, les concepteurs non techniques ont la possibilité de créer des directives de conception de contenu d’e-mail réutilisables qui s’alignent sur une marque et un style spécifiques. Les thèmes permettent aux spécialistes du marketing d’utiliser plus rapidement et à moindre effort des e-mails visuellement attrayants et cohérents avec la marque, et fournissent des options de personnalisation avancées pour des besoins de conception uniques.
Directives et limites du thème themes-guidelines
Lorsque vous utilisez des thèmes, gardez à l’esprit les instructions et limites suivantes :
-
Lorsque vous créez un e-mail ou un modèle d’e-mail à partir d’une zone de travail vierge (conception en partant de zéro), vous pouvez choisir le mode Thème pour commencer à créer votre contenu à l’aide d’un thème afin d’appliquer un style spécifique adapté à votre marque et à votre conception. Si vous choisissez mode manuel, vous ne pouvez pas appliquer un thème, sauf si vous réinitialisez la conception de l’e-mail ou du modèle d’e-mail.
-
Les fragments ne sont pas compatibles entre le mode Thème et le mode Manuel dans le contenu de l’e-mail. Pour utiliser un fragment dans le contenu d’e-mail auquel un thème est appliqué, le fragment doit également être créé en mode Thème.
-
Les modifications apportées à un thème personnalisé ne sont pas automatiquement répercutées en cascade sur tous les e-mails ou modèles d’e-mail qui l’utilisent déjà. Modifiez le contenu de chaque pour actualiser le thème.
-
Si vous supprimez un thème, cela n’a aucune incidence sur les e-mails ou les modèles d’e-mail auxquels il a déjà été appliqué.
Créer un thème de marque create-theme
Définissez votre propre thème de marque que vous pouvez appliquer à votre contenu d’e-mail et de modèle d’e-mail dans le contenu de votre futur e-mail.
-
Accédez aux outils de thème à l’aide de l’une des méthodes suivantes :
-
Créez un modèle d’e-mail puis cliquez sur Modifier le modèle d’e-mail pour lancer la page Concevoir votre modèle.
-
Cliquez sur … Plus en haut à droite de l’espace de conception du contenu d’e-mail et choisissez Modifier votre conception.
Dans la boîte de dialogue de confirmation, cliquez sur Modifier le modèle pour ouvrir la page de conception.
-
-
Dans la page de conception, choisissez Créer ou modifier des thèmes.
-
Sélectionnez le thème par défaut ou utilisez l’un des thèmes Adobe à utiliser comme point de départ.
note note NOTE Si vous souhaitez utiliser l’un de vos thèmes personnalisés (Mes thèmes) comme point de départ, vous pouvez le dupliquer et modifier le nom du thème lorsque vous modifiez le thème. -
Cliquez sur Créer.
La page Créer un thème fournit une zone de travail avec les éléments existants de tous les types de texte, boutons et conteneurs à partir du thème de départ.
-
Utilisez le volet de navigation de droite pour accéder aux différents onglets de style de thème et modifier les paramètres de thème :
Les éléments visuels changent sur la zone de travail lorsque vous définissez les nouveaux paramètres de thème. Si le résultat ne vous convient pas, vous pouvez cliquer sur l’icône Annuler (
-
Une fois la définition du thème terminée, cliquez sur Enregistrer.
-
Cliquez sur Fermer pour revenir à la page Créer un thème, puis sur Annuler pour revenir à la page de conception.
Vous pouvez ensuite choisir Créer en partant de zéro pour ouvrir l’espace de conception visuelle et utiliser le thème pour l’e-mail ou le modèle.
Paramètres généraux
Dans l’onglet Paramètres généraux définissez les paramètres de base de votre thème :
-
Saisissez un Nom du thème unique.
-
Ajustez la largeur de la fenêtre d’affichage pour le contenu (corps) de l’e-mail. Utilisez les flèches vers le haut et vers le bas pour augmenter ou réduire la largeur, ou saisissez la valeur (en pixels).
Couleurs
Sélectionnez l’onglet Couleurs et utilisez les paramètres pour définir la palette de couleurs du thème.
-
Cliquez sur Modifier pour afficher la palette de couleurs qui comprend les couleurs de votre thème.
Choisissez un Paramètre prédéfini pour utiliser un jeu de couleurs pour le thème ou ajustez chaque couleur de la visionneuse. Vous pouvez également utiliser une combinaison des deux.
Pour le carré de couleur sélectionné en haut, vous pouvez définir la couleur en entrant une valeur RGB, HSL, HSB ou hexadécimale connue. Vous pouvez également utiliser le curseur de couleur et le champ de couleur pour sélectionner la couleur.
Cliquez sur la flèche Précédent pour fermer les outils de palette de couleurs.
-
Cliquez sur Ajouter une variante pour créer plusieurs variantes de couleurs, telles qu’un mode clair et sombre, où chaque variante a sa propre palette de couleurs et ses propres commandes de nuance. Vous pouvez avoir jusqu’à six variantes.
Pour chaque variante, cliquez sur l’icône Modifier (
Pour chaque couleur à modifier pour la variante, déplacez le bouton (bascule) vers la gauche ou la droite pour le désactiver ou l’activer. Pour un paramètre de couleur activé, cliquez sur le carré de couleur pour choisir la couleur.
accordion Paramètres des variantes de couleurs Les paramètres sont regroupés en fonction de leur type :
table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 Type Paramètres Description Général 
Ces paramètres vous permettent de définir des couleurs pour le corps, les structures, les conteneurs, les arrière-plans, les liens, les grilles et les bordures. En-têtes 
Ces paramètres s’appliquent aux éléments de Heading, où vous pouvez définir le texte et les couleurs de bordure pour chacun des six niveaux d’en-tête. Développez chaque niveau d’en-tête pour lequel vous souhaitez définir la couleur de la variante.Paragraphes 
Ces paramètres s’appliquent aux éléments de Paragraph, où vous pouvez définir le texte et les couleurs de bordure pour chacun des trois types de paragraphe. Développez chaque type de paragraphe dont vous souhaitez définir la couleur pour la variante. Boutons 
Les paramètres s’appliquent aux éléments de bouton, où vous pouvez définir la couleur de remplissage, la couleur de bordure et la couleur de texte pour chacun des trois paramètres prédéfinis de bouton : Principal, Secondaire et Tertiaire.
Paramètres de texte
Dans l’onglet Paramètres de texte, vous pouvez définir les types, styles et tailles de polices globaux que vous souhaitez utiliser pour votre thème. Pour un contrôle plus granulaire, vous pouvez également modifier ces paramètres pour les types d’en-tête et de paragraphe.
| table 0-row-3 1-row-3 2-row-3 3-row-3 | ||
|---|---|---|
| Type | Paramètres | Description |
| Global |
|
Définissez la Bibliothèque de polices sur Standard ou Polices Google. Choisissez ensuite la famille de polices à utiliser. Ces paramètres de texte globaux s’appliquent à l’ensemble du texte, sauf si vous définissez différents styles de texte pour les niveaux d’en-tête et les types de paragraphe. |
| En-têtes |
|
Pour le niveau d’en-tête que vous souhaitez définir, sélectionnez H1, H2, etc. Définissez la Bibliothèque de polices sur Standard ou Polices Google. Choisissez ensuite la famille, la taille et le style de la police. Choisissez le Alignement du texte : Gauche, Centré, Droite ou Justifié. |
| Paragraphes |
|
Pour le niveau d’en-tête que vous souhaitez définir, sélectionnez P1, HP, etc. Définissez la Bibliothèque de polices sur Standard ou Polices Google. Choisissez ensuite la famille, la taille et le style de la police. Ajustez la Hauteur de la ligne selon vos besoins. Choisissez le Alignement du texte : Gauche, Centré, Droite ou Justifié. |
Espacement et bordure
Dans l'onglet Espacement, vous pouvez définir la marge intérieure et la marge des différents types d'éléments. Pour Sélectionner un type, choisissez le type de contenu. Définissez ensuite la marge intérieure, les marges, les coins et les bordures applicables à ce type d’élément.
| table 0-row-3 1-row-3 2-row-3 3-row-3 | ||
|---|---|---|
| Type | Paramètres | Description |
| Marges |
|
Sélectionnez l’icône Marge pour afficher les paramètres qui répliquent le paramètre de margin CSS, qui contrôle l’espace en dehors d’une bordure de composant et le sépare des autres composants/éléments. Cela crée un espace autour du composant afin d’influencer son positionnement et la mise en page du contenu environnant. Définissez les valeurs de marge en pixels en fonction de vos besoins de conception. Vous pouvez définir la marge pour tous les côtés, le coin supérieur inférieur, le coin gauche droit ou chaque côté du composant indépendamment. Cliquez sur les icônes Verrouiller et Déverrouiller pour synchroniser ou désynchroniser les valeurs des marges supérieure inférieure et gauche-droite. |
| Marges Intérieures |
|
Sélectionnez l’icône Marge intérieure pour afficher les paramètres qui répliquent le paramètre de padding CSS, à savoir l’espace entre le contenu d’un composant/élément et sa bordure. La marge intérieure fournit un espacement interne que vous pouvez utiliser pour contrôler la distance entre le contenu et la bordure du composant. Définissez les valeurs de marge intérieure en pixels en fonction de vos besoins de conception. Vous pouvez définir la marge intérieure pour tous les côtés, le haut-bas, la gauche-droite ou chaque côté du composant indépendamment. Cliquez sur les icônes Verrouiller et Déverrouiller pour synchroniser ou désynchroniser les valeurs de marge intérieure supérieure inférieure et gauche-droite. |
| Coins |
|
Sélectionnez l’icône Coins pour afficher les paramètres qui répliquent le paramètre de border-radius CSS, qui définit le rayon des coins du composant/de l’élément. Définissez la valeur numérique en fonction de la courbe que vous souhaitez pour les coins. Une valeur de 0 (par défaut) génère un coin carré. |
Déplacez le bouton bascule Bordure vers la droite pour activer les options d’affichage des bordures et les définir en fonction de vos critères de conception :
-
Pour définir la Taille de la bordure (largeur de ligne), cliquez sur les icônes de flèche vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels.
-
Pour définir le Style de bordure, choisissez une valeur dans la liste des valeurs de
border-styleCSS standard, telles que Continu, Pointillé et Tiret. -
Pour déterminer l’emplacement d’affichage de la bordure, cochez chaque case Position de la bordure.
Boutons
Dans l’onglet Boutons, vous pouvez définir différents attributs (autres que la couleur) pour les éléments de bouton, tels que le rayon de la bordure (forme), le texte et la taille. Vous pouvez modifier les paramètres de chacun des trois paramètres prédéfinis de bouton : Principal, Secondaire et Tertiaire.
| table 0-row-3 1-row-3 2-row-3 3-row-3 | ||
|---|---|---|
| Type | Paramètres | Description |
| Texte |
|
Définissez la Bibliothèque de polices sur Standard ou Polices Google. Choisissez ensuite la famille, la taille et le style de la police. Choisissez le Alignement du texte : Gauche, Centré, Droite ou Justifié. |
| Bordure |
|
Déplacez le bouton bascule Bordure vers la droite pour activer les options d’affichage des bordures des boutons et les définir en fonction de vos critères de conception. Définissez la Taille de la bordure (largeur de ligne) en augmentant ou en réduisant le nombre de pixels. Définissez le Style de bordure en choisissant une valeur dans la liste des valeurs de border-style CSS standard, telles que Continu, Pointillé et Tiret. |
| Taille |
|
Pour l’option Hauteur, cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels. Une valeur vide (Auto) est la valeur par défaut et mesure la hauteur du bouton en fonction de son contenu. Pour l’option Largeur, utilisez le bouton (bascule) pour définir la largeur en pixels ou en pourcentage. Pour un pourcentage de largeur, utilisez le curseur pour définir la valeur de pourcentage. Le pourcentage détermine la taille du bouton en fonction de la zone de contenu du bloc conteneur, ce qui exclut la marge intérieure et les bordures. Par exemple, une valeur de 50 définit la largeur du bouton sur 50 % de celle du contenu du bloc qui le contient. Pour une largeur en pixels, cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels. Une valeur vide (Auto) est la valeur par défaut et mesure la largeur du bouton en fonction de son contenu. |
Diviseur
Dans l’onglet Diviseur, vous pouvez définir le style de ligne et les paramètres de conteneur d’un composant de division.
| table 0-row-3 1-row-3 2-row-3 3-row-3 | ||
|---|---|---|
| Type | Paramètres | Description |
| Ligne |
|
Définissez le Style de bordure en choisissant une valeur dans la liste des valeurs de border-style CSS standard, telles que Continu, Pointillé et Tiret. |
| Taille du conteneur |
|
Pour l’option Hauteur, cliquez sur les icônes fléchées haut et bas pour augmenter ou réduire le nombre de pixels pour le composant/l’élément. Une valeur vide (Auto) est la valeur par défaut et dimensionne la hauteur en fonction de son contenu (style de ligne). Pour l’option Largeur, utilisez le bouton (bascule) pour définir la largeur en pixels ou en pourcentage. Pour un pourcentage de largeur, utilisez le curseur pour définir la valeur de pourcentage. Le pourcentage détermine la largeur de l’élément en fonction de la zone de contenu du bloc conteneur. Par exemple, une valeur de 50 définit la largeur du séparateur sur 50 % de la largeur du contenu du bloc qui le contient. Pour une largeur en pixels, cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels. Une valeur vide (Auto) est la valeur par défaut et mesure la largeur du séparateur en fonction de son contenu. |
| Alignement |
|
Sélectionnez l’alignement horizontal dans le bloc conteneur : Gauche, Centré ou Droite. |
Tableau
Dans l’onglet Grille, vous pouvez contrôler les espaces entre les colonnes et les lignes pour un élément de grille :
-
Écart entre les colonnes - Cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels de l’écart entre les colonnes de la grille. Vous pouvez également saisir un nombre dans le champ .
-
Écart entre les lignes - Cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels de l’écart entre les lignes de la grille. Vous pouvez également saisir un nombre dans le champ .
Modification d’un thème
Vous pouvez modifier un thème à l’aide du même workflow et des mêmes outils que ceux que vous utilisez lors de la création d’un thème. La différence est que vous sélectionnez l’onglet Mes thèmes et sélectionnez le thème personnalisé que vous souhaitez modifier.
Utilisez le rail à droite pour parcourir les différents onglets et modifier les paramètres de thème :
Les éléments visuels affichés changent lorsque vous modifiez les paramètres. Si le résultat affiché sur la zone de travail n’est pas celui que vous souhaitez, vous pouvez cliquer sur l’icône Annuler (
Une fois les modifications du thème effectuées, cliquez sur Enregistrer.
Gestion des thèmes personnalisés
Vous pouvez gérer vos thèmes personnalisés à l’aide du même workflow et des mêmes outils que ceux utilisés lors de la création d’un thème. La différence est que vous sélectionnez l’onglet Mes thèmes et gérez vos thèmes dans la liste affichée.
Si vous disposez d’une liste volumineuse de thèmes personnalisés, utilisez le champ Rechercher et d’autres filtres pour réduire la liste affichée. À mesure que vous gérez votre liste de thèmes disponibles, vous pouvez modifier, supprimer ou dupliquer un thème personnalisé à tout moment.
Modification d’un thème
-
Sélectionnez le thème à modifier, puis cliquez sur Modifier en haut à droite.
-
Utilisez la navigation à droite pour utiliser les différents onglets de style et modifier les paramètres de thème :
Les éléments visuels affichés changent lorsque vous modifiez les paramètres. Si le résultat sur la zone de travail n’est pas celui que vous souhaitez, vous pouvez cliquer sur l’icône Annuler dans la partie inférieure du rail de droite. Cliquez sur l’icône Rétablir pour appliquer à nouveau la modification.
-
Une fois les modifications du thème effectuées, cliquez sur Enregistrer.
Supprimer ou dupliquer un thème
Lorsque vous localisez le thème, cliquez sur l’icône Plus de menu (…) en bas à droite de la carte du thème et sélectionnez l’action à entreprendre :
-
Dupliquer - Sélectionnez cette action pour dupliquer le thème. Le nouveau thème est identique à la Copie de ajoutée au nom de l’original. Vous pouvez modifier le nom lorsque vous modifiez le thème.
-
Supprimer - Sélectionnez cette action pour supprimer le thème personnalisé. Dans la boîte de dialogue de confirmation, cliquez sur Supprimer.
note note NOTE La suppression du thème n’a aucune incidence sur les e-mails ou les modèles d’e-mail déjà appliqués.
Utiliser un thème pour la création de contenu d’e-mail use-email-theme
Lorsque vous créez un e-mail ou un modèle d’e-mail, vous pouvez choisir d’utiliser un thème de marque qui simplifie le processus de création de contenu et s’assure que la conception s’aligne sur les normes définies. Pour un nouveau fragment, vous pouvez également appliquer un thème avant d’enregistrer le fragment. Le fragment reste en mode Thème à partir de ce point et est compatible avec les e-mails et les modèles d’e-mail qui sont également en mode Thème.
-
Sélectionnez l’une des actions suivantes :
-
Sélectionnez un modèle d’e-mail qui incorpore un thème (créé dans mode Thème). Le thème spécifique à chaque modèle est automatiquement appliqué.
-
Utilisez l’option Créer en partant de zéro et sélectionnez Utiliser les thèmes pour commencer avec un thème de style prédéfini.
note important IMPORTANT Si vous choisissez le mode Style manuel, vous devez réinitialiser la conception de l’e-mail pour appliquer un thème. Si vous choisissez le mode Thèmes, seuls les fragments également créés en mode Thèmes peuvent être ajoutés au contenu de l’e-mail.
-
-
Dans l’espace de conception d’e-mail, cliquez sur l’icône Thèmes (
Le thème par défaut ou le thème appliqué au modèle s’affiche. Vous pouvez basculer entre les variantes de couleur pour ce thème.
-
Cliquez sur la flèche en regard du thème affiché pour afficher la liste des thèmes personnalisés et Adobe disponibles.
-
Cliquez sur Mes thèmes et sélectionnez votre thème personnalisé.
-
Cliquez en dehors de la liste.
Le thème personnalisé nouvellement sélectionné applique les styles à tous les composants d’e-mail dans la zone de travail. Vous pouvez basculer entre les variantes de couleur.
-
Si vous devez remplacer les styles de thème d’un composant sélectionné, cliquez sur l’icône Déverrouiller les styles de composant (
Dans la boîte de dialogue de confirmation, cliquez sur Déverrouiller.
Sélectionnez l’onglet Styles dans le panneau de droite pour modifier les paramètres du composant.
Modifier le thème du contenu de votre e-mail
Pour un e-mail ou un modèle d’e-mail créé en mode Thème, vous pouvez modifier le thème à tout moment. Le contenu de l’e-mail reste inchangé, mais les styles sont mis à jour pour refléter le nouveau thème.
-
Ouvrez l’e-mail ou le modèle d’e-mail dans l’espace de conception.
-
Cliquez sur l’icône Thèmes (
Le thème appliqué s’affiche dans le panneau de droite.
-
Cliquez sur la flèche en regard du thème affiché pour afficher la liste des thèmes personnalisés et Adobe disponibles.
-
Sélectionnez un autre thème.
-
Cliquez en dehors de la liste.
Le thème sélectionné applique les styles à tous les composants d’e-mail dans la zone de travail. Vous pouvez basculer entre les variantes de couleur.