Sur cette page : découvrez comment ajouter et configurer des composants de contenu Designer d’e-mail tels que des boutons, du texte, des images, des séparateurs, HTML, des liens de réseaux sociaux, des décisions d’offre, des grilles et des tableaux pour créer le contenu de votre e-mail.
Lorsque vous créez le contenu de votre e-mail, la section Composants de contenu vous permet de personnaliser davantage votre e-mail à l’aide des composants bruts que vous pouvez modifier une fois placés dans un e-mail.
Vous pouvez ajouter autant de composants de contenu que nécessaire dans un ou plusieurs composants de structure, ce qui permet de définir la disposition de votre e-mail.
Ajouter des composants de contenu add-content-components
Pour ajouter des composants de contenu à votre e-mail et les ajuster selon vos besoins, suivez les étapes ci-dessous.
-
Dans le concepteur d’e-mail, utilisez un contenu existant ou faites glisser et déposez la section Composants de structure dans votre contenu vide pour définir la disposition de votre e-mail. Voici comment procéder
-
Pour accéder à la section Composants de contenu, sélectionnez le bouton correspondant dans le volet gauche du concepteur d’e-mail.
-
Faites glisser et déposez les composants de contenu de votre choix dans les composants de structure appropriés.
note NOTE Vous pouvez ajouter plusieurs composants dans un seul composant de structure et dans chaque colonne d’un composant de structure. -
Sélectionnez le composant nouvellement ajouté.
-
Ajustez les attributs et le style de chaque composant à l’aide des onglets Paramètres et Style sur la droite. Par exemple, vous pouvez changer le style de texte, la marge intérieure ou la marge de chaque composant. En savoir plus sur l’alignement et la marge intérieure
-
Le menu avancé de votre composant de contenu permet de supprimer ou dupliquer facilement n’importe quel composant de contenu selon vos besoins.
Conteneur container
Pour appliquer un style spécifique à un groupe de composants de contenu, ajoutez un composant de conteneur, puis ajoutez-y le ou les composants de contenu de votre choix. Cela vous permet d’appliquer un style distinct au conteneur, qui sera différent du style appliqué aux composants de contenu qui s’y trouvent.
Par exemple, ajoutez un composant Conteneur, puis ajoutez un composant Bouton à l’intérieur de ce conteneur. Vous pouvez utiliser un arrière-plan spécifique pour le conteneur et un autre pour le bouton.
Bouton button
Utilisez le composant Bouton pour insérer un ou plusieurs boutons dans votre e-mail et rediriger votre audience d’e-mail vers une autre page.
-
Cliquez sur le bouton nouvellement ajouté pour personnaliser le texte et accéder aux onglets Paramètres et Styles dans le volet droit du concepteur d’e-mail.
-
Dans le menu Lien, ajoutez l’URL vers laquelle effectuer la redirection en cas de clic sur le bouton.
-
Choisissez comment votre audience sera redirigée avec la liste déroulante Cible :
- Aucune : ouvre le lien dans le même cadre que celui sur lequel l’utilisateur a cliqué (par défaut).
- Vierge : ouvre le lien dans une nouvelle fenêtre ou un nouvel onglet.
- Self : ouvre le lien dans le même cadre que celui sur lequel l’utilisateur a cliqué.
- Parent : ouvre le lien dans le cadre parent.
- Haut : ouvre le lien dans le corps complet de la fenêtre.
-
Vous pouvez personnaliser davantage le bouton en modifiant les attributs de style, tels que la bordure, la taille, la marge, etc. dans le volet Paramètres des composants.
Texte text
Utilisez le composant Texte pour insérer du texte dans votre e-mail et ajuster le style (bordure, taille, marge intérieure, etc.) à l’aide de l’onglet Styles.
-
Cliquez sur le composant nouvellement ajouté pour personnaliser le texte et accéder aux onglets Paramètres et Styles dans le volet droit du concepteur d’e-mail.
-
Modifiez votre texte à l’aide des options suivantes disponibles dans la barre d’outils :
- Modifier le style de texte : appliquez des caractères gras, italiques, soulignés ou barrés à votre texte.
- Modifier l’alignement : choisissez entre l’alignement à gauche, à droite, centré ou justifié pour votre texte.
- Créer une liste : ajoutez une puce ou une liste numérique à votre texte.
- Définir le titre : ajoutez jusqu’à six niveaux d’en-tête à votre texte.
- Taille de police : sélectionnez la taille de police de votre texte en pixels.
- Changer la couleur de la police : choisissez la couleur de votre police.
- Insérer un lien : ajoutez n’importe quel type de lien à votre contenu.
- Modifier l’image : ajoutez une image ou une ressource à votre composant de texte. En savoir plus sur la gestion des ressources
- Modifier la couleur de la police : choisissez la couleur de votre police.
- Ajouter une personnalisation : ajoutez des champs de personnalisation pour personnaliser le contenu à partir des données de vos profils. En savoir plus sur la personnalisation de contenu
- Afficher le code source : affichez le code source de votre texte. Ceci ne peut pas être modifié.
- Activer le contenu conditionnel : ajoutez du contenu conditionnel pour adapter le contenu du composant aux profils ciblés. En savoir plus sur le contenu dynamique
- Dupliquer : ajoutez une copie de votre composant de texte.
- Supprimer : supprimez le composant de texte sélectionné de votre e-mail.
-
Ajustez les autres attributs de style, tels que la couleur du texte, la famille de polices, la bordure, la marge intérieure, la marge, etc. à partir de l’onglet Styles.
Diviseur divider
Utilisez le composant Diviseur pour insérer une ligne de séparation afin d’organiser la disposition et le contenu de votre e-mail.
Vous pouvez ajuster les attributs de style, tels que la couleur, le style et la hauteur des lignes, à partir des onglets Paramètres et Styles.
Html Html
Utilisez le composant Html pour copier-coller les différentes parties de votre HTML existante. Vous pouvez ainsi créer des composants HTML modulaires autonomes afin de réutiliser du contenu externe.
-
Cliquez sur votre nouveau composant ajouté, puis sélectionnez Afficher le code source dans la barre d’outils contextuelle pour ajouter votre code HTML.
-
Copiez-collez le code HTML à ajouter à votre e-mail et cliquez sur Enregistrer.
Modèle Dynamic Media dynamic-media-template
Utilisez le composant Modèle Dynamic Media pour tirer parti des médias dynamiques personnalisés et interactifs dans vos e-mails.
Utilisez ce composant pour insérer un modèle Dynamic Media depuis Adobe Experience Manager dans le contenu de votre e-mail et le modifier directement dans l’éditeur de modèles Dynamic Media, sans quitter le Designer d’e-mail. Vous pouvez également charger un fichier PSD (Photoshop) et le modifier de la même manière qu’un modèle Dynamic Media. En savoir plus
Image image
Utilisez le composant Image pour insérer un fichier image de votre ordinateur dans le corps de votre e-mail.
-
Sélectionnez le composant nouvellement ajouté.
-
Dans l’onglet Paramètres, cliquez sur Parcourir pour choisir un fichier image parmi vos ressources ou sur Importer un média pour charger une ressource vers Adobe Experience Manager Assets.
Pour en savoir plus sur Adobe Experience Manager Assets, consultez la documentation d’Adobe Experience Manager Assets.
note NOTE Pour que vos liens restent actifs et éviter tout problème d’expiration, nous vous recommandons d’utiliser Adobe Assets plutôt que de vous fier à une URL source pour vos images. -
Vous pouvez également effectuer directement des recherches dans Adobe Stock à l’aide de l’option Trouver des photos Adobe Stock.
-
Cliquez sur le composant nouvellement ajouté et configurez les propriétés de l’image :
- Titre d’image vous permet de définir un titre pour votre image.
- Texte secondaire vous permet de définir la légende liée à votre image. Cela correspond à l’attribut HTML alternatif. En savoir plus
-
Vous pouvez également choisir Trouver des photos Stock similaires. En savoir plus
-
Dans l’onglet Styles, ajustez les autres attributs de style tels que la marge, la bordure etc. ou ajoutez un lien pour rediriger votre audience vers un autre contenu à partir du volet Paramètres des composants.
Social social
Utilisez le composant Social pour insérer des liens vers des pages de réseaux sociaux dans le corps de votre e-mail.
-
Sélectionnez le composant nouvellement ajouté. Dans le champ Social de l’onglet Paramètres, sélectionnez les médias sociaux à ajouter ou supprimer.
-
Sélectionnez la taille de vos icônes dans le champ dédié.
-
Cliquez sur chacune des icônes de vos réseaux sociaux pour configurer l’URL vers laquelle votre audience sera redirigée.
-
Vous pouvez également modifier les icônes de chacun de vos médias sociaux à partir de vos ressources, le cas échéant.
-
Dans l’onglet Styles, ajustez les autres attributs de style, tels que la marge, la bordure, etc.
Décision d’offre offer-decision
Utilisez le composant Décision d’offre pour insérer des offres dans vos messages. Le moteur Gestion des décisions choisira la meilleure offre à proposer à votre clientèle.
-
Sélectionnez le composant nouvellement ajouté et cliquez sur Ajouter pour sélectionner votre décision d’offre.
-
Dans la liste déroulante, sélectionnez vos emplacements.
-
Sélectionnez ensuite la décision d’offres à ajouter à votre contenu, puis cliquez sur Ajouter.
-
L’onglet Décision d’offres permet de prévisualiser ou modifier l’offre insérée.
Découvrez comment ajouter des offres personnalisées dans un e-mail dans cette section.
Grille grid
Utilisez le composant Grille pour organiser le contenu dans une grille structurée de lignes et de colonnes, où chaque cellule peut contenir d’autres composants de contenu.
-
Tout comme le composant Conteneur, faites glisser et déposez d’autres composants de contenu dans chaque cellule de la grille.
Par exemple, sélectionnez un composant Texte, un composant Image et deux composants Bouton. Vous pouvez ensuite ajouter une image et modifier le contenu de chaque composant.
-
Pour ajuster la structure de votre grille, sélectionnez-la et accédez à l’onglet Paramètres du volet de droite du Concepteur d’e-mail.
-
Vous pouvez définir le nombre de colonnes et de lignes de la grille, modifier l’espacement entre les colonnes et les lignes et modifier la largeur de chaque colonne en pourcentage.
note NOTE Utilisez l’option Ne pas empiler les colonnes sur un mobile pour conserver la disposition de la grille sur les appareils mobiles au lieu d’empiler les colonnes verticalement. -
Déposez d’autres composants de contenu dans chaque cellule si nécessaire et ajustez le style dans l’onglet Styles pour chaque composant.
Tableau table
Utilisez le composant Tableau pour structurer le contenu en lignes et colonnes directement dans votre e-mail, en créant des dispositions claires et organisées sans recourir à HTML personnalisé.
-
Une fois l’ajout effectué, cliquez sur le composant et sélectionnez l’onglet Paramètres dans le volet de droite Designer d’e-mail.
-
De là, vous pouvez ajuster le nombre de lignes et de colonnes de votre tableau.
-
Utilisez l’option Inclure la ligne d’en-tête (activée par défaut) pour ajouter une ligne d’en-tête à votre tableau, et activez l’option Lignes de Stripe pour appliquer des couleurs de ligne alternées afin d’améliorer la lisibilité.
-
Vous pouvez également cliquer sur les flèches correspondant à une colonne ou à une ligne directement dans le tableau, et utiliser le menu contextuel pour ajouter ou supprimer une ligne ou une colonne.
-
Ajustez d’autres attributs de style, tels que la couleur des cellules, la taille de police, l’alignement du texte ou la couleur de police à partir de l’onglet Styles.