Concevoir du contenu à partir de zéro avec le concepteur d’e-mail content-from-scratch

Sur cette page : découvrez comment créer entièrement du contenu d’e-mail dans le Concepteur d’e-mail Adobe Journey Optimizer en ajoutant des structures et des composants de contenu, puis en personnalisant et en prévisualisant votre e-mail.

Utilisez le concepteur d’e-mail d’Adobe Journey Optimizer pour définir facilement la structure de vos contenus. En ajoutant et en déplaçant des éléments structurels à l’aide de simples actions de glisser-déposer, vous pouvez concevoir la forme de vos contenus en quelques secondes.

NOTE
La loi européenne sur l’accessibilité stipule que toutes les communications numériques doivent être accessibles. Veillez à suivre les instructions spécifiques répertoriées sur cette page lors de la conception de contenu dans Journey Optimizer.

Pour commencer à créer votre contenu , procédez comme suit :

  1. Sur la page d’accueil du Concepteur, cliquez sur l’option Créer en partant de zéro.

    Créez votre écran d’e-mail avec l’option Créer en partant de zéro mise en surbrillance, ainsi que les options Coder le vôtre et Importer HTML et les exemples de modèles ci-dessous

  2. Pour commencer rapidement, utilisez Modules, des blocs de contenu préconçus et prêts à l’emploi tels que les en-têtes, les sections principales et les pieds de page, afin d’accélérer la création d’e-mails et de garantir la cohérence visuelle de vos campagnes. En savoir plus sur les modules

    Envoyer un e-mail au Designer en sélectionnant l’onglet Modules dans le panneau de gauche, et en répertoriant les catégories de module, telles que En-têtes, Héros, Témoignage, Cartes, Équipes et Pieds de page

  3. Sinon, concevez votre contenu en faisant glisser et en déposant Structures dans la zone de travail pour définir la disposition de votre e-mail.

    note tip
    TIP
    Vous pouvez également accélérer la création de votre e-mail avec Générer le contenu pour générer un contenu d’e-mail complet, y compris du texte et des images, à l’aide de Générer le contenu complet avec l’IA. Vous pouvez ensuite passer à la prévisualisation et à la validation de votre contenu.
  4. Ajoutez autant de structures que nécessaire et modifiez leurs paramètres dans le volet dédié de droite.

    Designer d’e-mail avec le panneau Structures affichant les mises en page de colonne disponibles et les onglets Paramètres et Styles mis en surbrillance dans le panneau Structure de droite 🔗

    note
    NOTE
    Sur les écrans étroits (mobiles, par exemple), les colonnes s’empilent verticalement par défaut pour plus de lisibilité. Certains clients de messagerie ne prennent pas en charge ce comportement, auquel cas les colonnes restent côte à côte. Vous pouvez également désactiver cette option à l’aide du bouton bascule Ne pas empiler de colonnes sur le mobile de l’onglet Paramètres.
  5. La plupart des structures (colonne 1:1, colonne 2:2, colonne 1:2 gauche, etc.) sont des paramètres prédéfinis fixes. Sélectionnez plutôt le composant n:n colonne pour définir le nombre de colonnes de votre choix (entre 3 et 10).

    Designer d’e-mail affichant l’onglet Paramètres d’un composant de structure sélectionné, avec le champ Numéro de colonne en surbrillance 🔗

    Vous pouvez augmenter à tout moment le nombre de colonnes d’une structure existante à partir de l’onglet Paramètres, même après y avoir ajouté du contenu ; votre contenu existant est conservé au lieu d’être perdu.

    Vous pouvez également ajuster la largeur de chaque colonne directement sur la zone de travail ou en modifiant les pourcentages dans l’onglet Paramètres.

    note
    NOTE
    La taille de chaque colonne ne peut pas être inférieure à 10 % de la largeur totale du composant de structure. Vous ne pouvez pas supprimer une colonne qui n’est pas vide.
  6. Dans la section Contenu, ajoutez autant d’éléments que nécessaire dans un ou plusieurs composants de structure. En savoir plus sur les composants de contenu

  7. Chaque composant peut être personnalisé à l’aide des onglets Paramètres ou Styles dans le menu de 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

    Email Designer avec le panneau Contenu en surbrillance à gauche et l’onglet Paramètres pour un composant Image sélectionné en surbrillance à droite, affichant la source de l’image, le texte de remplacement et les champs de lien

  8. Dans le Sélecteur de ressources, vous pouvez sélectionner directement les ressources stockées dans la Bibliothèque de ressources. En savoir plus sur la gestion des ressources

    Double-cliquez sur le dossier contenant vos ressources. Glissez et déposez-les dans un composant de structure.

    Panneau Designer Assets d’e-mail affichant les fichiers de bibliothèque de ressources, avec une image glissée dans la zone de travail

  9. Insérez des champs de personnalisation pour personnaliser votre contenu à partir des attributs de profil, des appartenances à des audiences, des attributs contextuels, etc. En savoir plus sur la personnalisation de contenu

    Barre d’outils de texte d’Email Designer avec le bouton Ajouter un Personalization en surbrillance au-dessus d’un bloc de texte sélectionné

  10. Cliquez sur Activer le contenu conditionnel pour ajouter du contenu dynamique et adapter le contenu aux profils ciblés selon des règles conditionnelles. Prise en main du contenu dynamique

    Barre d’outils Designer des e-mails affichant l’option Activer le contenu conditionnel au-dessus d’un bloc de texte contenant un jeton de personnalisation de profil

  11. Cliquez sur l’onglet Liens du volet de gauche pour afficher toutes les URL de votre contenu qui feront l’objet d’un tracking. Vous pouvez modifier leur Type de tracking ou Libellé et ajouter des Balises si nécessaire. En savoir plus sur les liens et le tracking

    Panneau Liens de Designer des e-mails répertoriant les URL suivies avec leur libellé et leur type de suivi, et les détails d’un lien sélectionné développés

  12. Au besoin, vous pouvez personnaliser davantage votre e-mail en cliquant sur Basculer vers l’éditeur de code dans le menu avancé. Vous pouvez ainsi modifier le code source de l’e-mail, par exemple pour ajouter des balises HTML de suivi ou personnalisées. En savoir plus sur l’éditeur de code.

    note caution
    CAUTION
    Vous ne pouvez pas revenir au concepteur visuel de cet e-mail après avoir basculé vers l’éditeur de code.
  13. Une fois que votre contenu est prêt, utilisez l’une des méthodes de simulation pour vérifier le rendu. Vous pouvez choisir la vue bureau ou la vue mobile. Vous trouverez des informations détaillées dans la section Gestion de contenu.

    Zone de travail de Designer d’e-mail avec le bouton Simuler du contenu en surbrillance dans la barre d’outils supérieure

  14. Vous pouvez également valider la qualité de votre contenu pour évaluer la lisibilité, l’efficacité et la cohérence du contenu. En savoir plus sur la validation de la qualité du contenu

  15. Lorsque votre contenu est prêt, cliquez sur Enregistrer.

AI Knowledge Reference

This section contains structured knowledge intended to support interpretation, retrieval, and question answering related to this topic.

For complete understanding, this information should be combined with the documentation on this page. Neither source is intended to stand alone; the page describes the feature, while this section provides additional context that helps disambiguate terminology, intent, applicability, and constraints.

  • TL;DR: This page explains how to design email content from scratch in the Email Designer by adding structure and content components, defining columns, personalizing, adding dynamic content and links, and previewing before saving.

Intents:

  • Start an email from the Design from scratch option and add structure components
  • Define the number and width of columns in a structure component
  • Add content components, personalization fields, and dynamic (conditional) content
  • Review and configure tracked links from the Links tab
  • Preview rendering with a simulation method and validate content quality
  • Switch to the code editor for advanced source editing

Glossary:

  • Design from scratch: The Designer home page option to start building content by adding structures and components (product-specific)
  • Structure components: Elements that define the layout of the email, added by drag and drop into the canvas (product-specific)
  • n:n column: A structure component whose number of columns can be defined between 3 and 10 (product-specific)
  • Switch to code editor: An advanced-menu option to edit the email source code (for example to add tracking or custom HTML tags) (product-specific)

Guardrails:

  • The n:n column component supports between 3 and 10 columns.
  • Each column size cannot be under 10% of the total width of the structure component.
  • You cannot remove a column that is not empty.
  • After switching to the code editor, you cannot revert back to the visual designer for that email.
  • Stacking columns is not compatible with all email programs; when not supported, columns will not be stacked.

Terminology:

  • Canonical name: Structure components — Acronym: n/a — variants: Structures, structure component
  • Synonyms: “Design from scratch” = starting content with no template
  • Do not confuse: “Structure components” (define layout) ≠ “Content components” (elements placed inside structures)
  • Do not confuse: “Settings tab” ≠ “Style tab” (both used to customize components)

FAQ:

  • Q: How many columns can a structure have? — Between 3 and 10, defined with the n:n column component.
  • Q: Can I make a column narrower than 10%? — No, each column size cannot be under 10% of the total width of the structure component.
  • Q: Can I go back to the visual designer after using the code editor? — No, you cannot revert back to the visual designer for that email after switching to the code editor.
  • Q: How do I check rendering before saving? — Use either simulation method to check rendering, choosing the desktop or mobile view.
  • Q: Where do I manage tracked links? — In the Links tab from the left pane, where you can modify Tracking Type or Label and add Tags.
recommendation-more-help
journey-optimizer-help