A propos de la conception du contenu d'un email

Utilisez l'interface de type glisser-déposer du Concepteur d'email pour créer et modifier le contenu de vos emails dans Adobe Campaign.

Cette section décrit les caractéristiques du Concepteur d'email :

Pour en savoir plus sur les actions qui sont communes à une ou plusieurs activités marketing, reportez-vous aux sections suivantes :

A propos du Concepteur d'email

Le Concepteur d'email permet de créer du contenu d'email et des modèles de contenu d'email. Il est compatible avec les emails simples, les emails transactionnels, les emails de test A/B, les emails multilingues et les emails récurrents.

Pour commencer à utiliser le Concepteur d'email, regardez cet ensemble de vidéos qui expliquent la fonctionnalité générale de l'outil et qui décrivent comment créer entièrement un email ou le concevoir à l'aide de modèles.

Page d'accueil du Concepteur d'email

Lors de la création d'un email, la page d'accueil du Concepteur d'email s'affiche automatiquement lors de la sélection du contenu de l'email.

email_designer_home_page

L'onglet Propriétés permet de modifier les détails d'un email, tels que le libellé, l'adresse et le nom de l'expéditeur ou l'objet. Vous pouvez également accéder à cet onglet en cliquant sur le libellé de l'email en haut de l'écran.

email_designer_home_properties

L'onglet Modèles permet d'effectuer une sélection parmi les contenus HTML d'usine ou les modèles que vous avez déjà créés pour commencer rapidement à concevoir votre email. Voir Modèles de contenu.

email_designer_home_templates

L'onglet Formation et support permet d'accéder facilement à la documentation et aux tutoriels connexes.

email_designer_home_support

Si vous ne sélectionnez pas de modèle, la page d'accueil du Concepteur d'email vous permet également de choisir le mode de conception de votre contenu :

Interface du Concepteur d'email

Le Concepteur d'email propose de nombreuses options qui permettent de créer, éditer et personnaliser tous les aspects de votre contenu.

L'interface est composée de plusieurs zones offrant des fonctionnalités différentes :

email_designer_overview

A partir des éléments disponibles dans la palette (1), déposez des composants de structure et des fragments de contenu dans l'espace de travail principal (2). Sélectionnez un composant ou un élément dans l'espace de travail (2) et personnalisez ses principales caractéristiques de style et d'affichage dans le volet Paramètres (3).

Accédez à des options et des paramètres plus généraux à partir de la barre d'outils principale (4).

Remarque :

Le volet Paramètres peut être déplacé vers la gauche selon la résolution et l'affichage de votre écran.

email_designer_toolbar

La barre d'outils contextuelle de l'interface de l'éditeur présente des fonctionnalités différentes selon la zone sélectionnée. Elle regroupe des boutons d'action et des boutons permettant de modifier le style du texte. Les modifications effectuées s'appliquent toujours sur la zone sélectionnée.

Recommandations générales pour utiliser le Concepteur d'email

Pour utiliser correctement le Concepteur d'email et créer des emails optimaux aussi simplement que possible, il est recommandé d'appliquer les principes suivants :

  • Utilisez les styles intégrés plutôt qu'une feuille CSS distincte et une feuille CSS dans la section <head> du code HTML. En utilisant les styles intégrés, vous pourrez optimiser l'enregistrement et la réutilisation des fragments de contenu.

  • Etablissez facilement votre marque en créant et en réutilisant des fragments de contenu pour assurer la cohérence de vos campagnes marketing.

Mode de compatibilité du Concepteur d'email

Lorsque vous téléchargez un contenu, il doit contenir des balises spécifiques pour être entièrement compatible et éditable à l'aide de l'éditeur WYSIWYG du Concepteur d'email. Pour plus d'informations sur ce balisage spécifique, consultez cette section.

Si tout ou partie du code HTML téléchargé n'est pas conforme avec le balisage attendu, le contenu est alors chargé en "mode de compatibilité", ce qui limite les possibilités d'édition via l'interface utilisateur.

Lorsqu'un contenu est chargé en mode de compatibilité, vous pouvez toujours effectuer les modifications suivantes via l'interface utilisateur (les actions indisponibles sont masquées) :

  • changer le texte ou changer une image,

  • insérer des liens et des champs de personnalisation,

  • éditer quelques options de style dans le bloc HTML sélectionné

  • définir du contenu conditionnel

email_designer_compatibility

D'autres modifications telles que l'ajout de nouvelles sections à votre email ou des styles sophistiqués doivent être effectuées directement dans le code source de l'email via le mode HTML.

Concevoir entièrement un contenu d'email

Voici les principales étapes pour créer entièrement un contenu d'email à l'aide du Concepteur d'email :

  1. Créez un email et ouvrez son contenu.

  2. Ajoutez des composants de structure pour former l'email. Voir Editer la structure de l'email.

  3. Insérez des composants de contenu et des fragments dans les composants de structure. Voir Ajouter des fragments et des composants de contenu.

  4. Ajoutez des images et éditez le texte de l'email. Voir Insérer des images.

  5. Personnalisez votre email en ajoutant des champs de personnalisation, des liens, etc. Voir Insertion d'un champ de personnalisation, Insérer un lien et Définir du contenu dynamique dans un email.

  6. Définissez l'objet de l'email. Voir Personnaliser l'objet d'un email.

  7. Prévisualisez l'email.

  8. Enregistrez votre contenu et traitez votre message après avoir vérifié que vous avez défini une audience et correctement planifié l'envoi.

Vous pouvez également regarder cette vidéo de présentation.

Remarque :

Pour éviter de créer entièrement un contenu d'email, vous pouvez utiliser des modèles de contenu d'usine. Voir à ce propos la section Modèles de contenu.

Rubriques connexes :

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 marges intérieures, utiliser des tailles de police plus petites ou plus grandes ou appliquer différentes couleurs de fond propres à la version mobile de votre email.

Toutes les options de style sont disponibles dans la vue mobile. Les paramètres de style du Concepteur d'email sont présentés dans la section Editer les styles d'un email.

  1. Créez un email et commencez à éditer le contenu. Voir à ce propos la section Concevoir entièrement un contenu d'email.

  2. Pour accéder à la vue mobile dédiée, cliquez sur le bouton Passer en vue Mobile.

    email_designer_mobile_view_switch

    La version mobile de l'email s'affiche. Elle contient tous les composants et styles définis dans la vue de poste de travail.

  3. Editez indépendamment tous les paramètres de style tels que la couleur de fond, l'alignement, la marge intérieure, la marge, la famille de polices, la couleur du texte, etc.

    email_designer_mobile_view
  4. Lorsque vous éditez un paramètre de style dans la vue mobile, les modifications ne s'appliquent qu'à l'affichage mobile.

    Par exemple, réduisez la taille d'une image, ajoutez un fond vert et modifiez la marge intérieure dans la vue mobile.

    email_designer_mobile_view_change
  5. Vous pouvez également masquer un composant. Lorsque vous cochez cette option, le composant correspondant est masqué sur un appareil mobile.

    email_designer_mobile_hide
  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.

    email_designer_mobile_view_desktop_no-change

    Remarque :

    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, passez en vue mobile, modifiez du texte et remplacez une image.

    email_designer_mobile_view_change_content

    Cliquez de nouveau sur le bouton Passer en vue Mobile pour retourner à la vue de poste de travail standard. Les modifications sont prises en compte.

    email_designer_mobile_view_desktop_content-change
  8. La suppression d'un style dans la vue mobile vous ramène au style appliqué en mode de poste de travail.

    Par exemple, dans la vue mobile, appliquez une couleur de fond verte à un bouton.

    email_designer_mobile_view_background_mobile
  9. Passez en vue de poste de travail et appliquez un fond gris au même bouton.

    email_designer_mobile_view_background_desktop
  10. Passez de nouveau en vue mobile, puis désactivez le paramètre Couleur de fond.

    email_designer_mobile_view_background_mobile_disabled

    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.

Texte simple et modes HTML

Générer une version texte de l'email

Par défaut, la version Texte simple de votre email est automatiquement générée et synchronisée avec la version Edition

Vous pouvez désactiver cette synchronisation en cliquant sur le commutateur Synchroniser avec le code HTML dans la vue Texte simple de votre email.

email_designer_textversion

Les champs de personnalisation ajoutés à la version HTML sont également synchronisés avec la version Texte simple.

Editer la source de contenu en HTML d'un email

Pour les utilisateurs les plus expérimentés et pour des raisons de débogage, vous pouvez afficher et éditer le contenu de l'email directement dans la version HTML.

Vous pouvez éditer la version HTML de l'email de deux façons différentes :

  • Sélectionnez Edition > HTML pour ouvrir la version HTML de l'ensemble de l'email.

    email_designer_html1
  • Dans l'interface WYSIWYG, sélectionnez un élément et cliquez sur l'icône Code source.

    Seule la source de l'élément sélectionné s'affiche. Vous pouvez éditer le code source si l'élément sélectionné est un composant de contenu HTML. D'autres composants sont en lecture seule, mais peuvent toujours être édités dans la version HTML complète de l'email.

    email_designer_html2

Si vous modifiez le code HTML, la réactivité de l'email peut être altérée. Veillez à le tester à l'aide du bouton Prévisualiser. Voir Prévisualiser un message à l'aide du Concepteur d'email.

Conception par le biais des intégrations d'Adobe Campaign

Editer le contenu dans Dreamweaver

L'intégration d'Adobe Campaign Standard à Dreamweaver permet d'éditer le contenu d'un email dans l'interface de Dreamweaver. Vous avez accès à l'interface puissante de Dreamweaver pour concevoir du contenu d'email réactif.

Cette fonctionnalité est présentée dans la documentation de Dreamweaver, accessible ici. Une vidéo de démonstration est également disponible.

Editer le contenu dans Experience Manager

Un contenu d'email peut être édité dans Experience Manager puis utilisé pour un ou plusieurs messages d'email dans Adobe Campaign Standard. Reportez-vous à ce document.

Comparaison des options de conception d'email

Adobe Campaign propose plusieurs options de création d'email. Le tableau ci-après présente les possibilités, avantages et limites de chacune d'elles.

Concepteur d'email
Experience Manager
Dreamweaver
Commencer à partir d'un email vide
Pris en charge
Prise en charge
Pris en charge
Ecrire du code HTML
Pris en charge
Pas pris en charge
Pris en charge
Mettre à jour le code HTML
Uniquement à l'intérieur d'un composant HTML
Pas pris en charge
Pris en charge
Personnalisation de base
Prise en charge
Prise en charge
Prise en charge
Personnalisation avancée
Prise en charge
Pas prise en charge
Pas prise en charge
BAT/Prévisualisation
Pris en charge
Prévisualisation dans AEM
BAT dans Campaign
Prévisualisation et BAT dans Campaign
Listes de produits
Prises en charge dans les emails transactionnels
Pas prises en charge
Pas prises en charge
Avantages
  • Création facile d'emails grâce aux opérations de glisser-déposer
  • Fonctionnalités similaires à celles de l'ancien éditeur de contenu
  • Contenu réutilisable avec des fragments
  • Réutilisation des ressources du site Web dans les emails
  • Utilisation des fonctionnalités d'Experience Manager dans les contenus d'email
  • Possibilité pour un développeur de coder directement un email
  • Synchronisation bidirectionnelle
  • Edition hors connexion dans Dreamweaver et synchronisation ultérieure
  • Chargement d'images dans Adobe Campaign via Dreamweaver
  • Limites
  • Pas de contenu conditionnel dans les fragments
  • Utilisation impossible des fragments Experience Manager
  • Mise en œuvre difficile de la personnalisation avancée
  • Envoi de tests nécessaires dans Adobe Campaign
  • Contenu dynamique non pris en charge
    Public visé
    Les marketeurs qui souhaitent conserver la possibilité d'utiliser des composants HTML avec des fonctionnalités de glisser-déposer. Les marketeurs qui utilisent déjà Experience Manager et qui souhaitent utiliser des modèles d'email standard avec peu de personnalisation. Les développeurs qui souhaitent coder des contenus d'email et s'intégrer directement avec Adobe Campaign.
    Pour en savoir plus
    Voir A propos du Concepteur d'email
    .
    Voir Intégration avec Experience Manager
    Consultez la section Dreamweaver et Campaign et regardez cette vidéo.

    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