A propos de la conception du contenu d'un email

Adobe Campaign propose deux éditeurs qui permettent de concevoir du contenu pour vos emails.

  • Le nouvel éditeur Creative Designer permet d'éditer facilement le contenu de vos emails de différentes manières.

  • Vous pouvez toujours utiliser l'éditeur de contenu pour modifier vos emails. Il permet également de personnaliser les landing pages, les SMS et les notifications push.

Remarque :

Pour modifier le contenu d'un email, Adobe recommande d'utiliser les fonctionnalités étendues du nouvel éditeur Creative Designer, qui est convivial, puissant et plus rapide.

Creative Designer propose des fonctionnalités étendues par rapport à l'éditeur de contenu par défaut. Toutefois, il ne prend pas encore en charge les fonctionnalités suivantes :

  • Utilisation des images dynamiques d'Adobe Target. Voir Utilisation de Campaign et Target.

  • Possibilité de récupérer automatiquement du contenu depuis une URL au moment de la préparation. Voir cette section.

  • Modèles de contenu d'usine entièrement compatibles. Pour créer des modèles compatibles, consultez cette section.

Utiliser Creative Designer

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

Lorsque vous créez un email, sélectionnez l'option Utiliser le Creative Designer. Lorsque vous éditez le contenu d'un email, cliquez sur Contenu dans le tableau de bord de l'email. Creative Designer s'ouvre par défaut.

Si vous souhaitez utiliser l'éditeur de contenu simple, cliquez sur Utiliser l'éditeur par défaut. Pour plus d'informations sur l'éditeur de contenu, consultez cette section.

Remarque :

Creative Designer est actuellement en version bêta. Pour utiliser cet éditeur, vous devez accepter les conditions d'utilisation qui s'affichent lorsque vous le sélectionnez dans l'interface. Pour nous aider à l'améliorer, vous pouvez donner votre avis dans le forum Adobe dédié.

Regardez cette vidéo d'introduction.

A propos de l'interface de Creative Designer

Creative Designer 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 (3), déposez des composants de structure et des fragments de contenu dans l'espace de travail principal (1). Sélectionnez un composant ou un élément dans l'espace de travail (1) et personnalisez ses principales caractéristiques de style et d'affichage dans le volet Paramètres (2).

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.

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

Pour utiliser correctement Creative Designer 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.

Exemple : concevoir entièrement un contenu d'email

Pour concevoir entièrement un email, suivez les instructions de cette vidéo.

Pour résumer, voici les principales étapes pour créer entièrement un contenu d'email à l'aide de Creative Designer :

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

  2. Ajoutez des composants de structure pour former l'email. Voir Editer la structure d'un email à l'aide de Creative Designer.

  3. Insérez des composants de contenu et des fragments dans les composants de structure. Voir Ajouter des fragments et des composants de contenu à l'aide de Creative Designer.

  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 effectuez votre diffusion après avoir vérifié que vous avez défini une audience et correctement planifié l'envoi.

Rubriques connexes :

A propos du mode de compatibilité de Creative Designer

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

Remarque :

Les modèles de contenu par défaut ne sont pas entièrement compatibles avec Creative Designer. Vous pouvez toujours les utiliser en mode de compatibilité ou créer vos propres modèles de contenu à partir de Creative Designer.

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.

Si vous souhaitez réutiliser un modèle Adobe Campaign ou un contenu externe existant et le rendre entièrement compatible avec Creative Designer, reportez-vous à cette section.

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

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

Utiliser l'éditeur de contenu d'email

L'éditeur de contenu permet de définir, modifier et personnaliser facilement du contenu dans Adobe Campaign. Il est proposé lorsque vous cliquez dans le bloc Contenu du tableau de bord d'un email.

Remarque :

Adobe recommande d'utiliser Creative Designer, ce qui permet de créer rapidement des emails personnalisés attrayants. Voir Utiliser Creative Designer. L'éditeur de contenu permet également de personnaliser les landing pages, les SMS et les notifications push.

Rubriques connexes :

Interface de l'éditeur de contenu d'email

L'éditeur de contenu est organisé en trois sections distinctes. Elles permettent de visualiser le contenu et de le modifier.

delivery_content_1
  1. La palette située à gauche de l'écran permet de modifier les paramètres du bloc sélectionné. Les options pouvant être modifiées sont les suivantes : couleur de fond, bordure, alignement du texte, condition de visibilité, etc. Voir Insertion d'un champ de personnalisation.

  2. La barre d'actions regroupe les options générales de la page. Vous pouvez choisir un modèle, changer le mode d'affichage ou encore prévisualiser l'email. Voir Barre d'actions de l'éditeur de contenu d'email.

  3. La zone d'édition située à droite de l'écran permet d'interagir directement avec le contenu, grâce à la barre d'outils contextuelle : insérer un lien sur une image, modifier la police de caractères, supprimer un champ, etc. Voir Barre d'outils de l'éditeur de contenu d'email.

Barre d'actions de l'éditeur de contenu d'email

La barre d'actions contient différents boutons permettant d'agir sur le contenu en cours de création.

delivery_content_2
Icône
Nom du bouton
Canal
Description

Changer de contenu
Landing page et email
Permet de sélectionner un contenu d'usine ou d'importer votre propre contenu HTML. Reportez-vous à Charger un contenu existant.

URL trackées
Email
Affiche la liste de chaque URL. Il est possible d'activer ou désactiver unitairement le tracking pour chaque URL du message.

Aperçu
Email et SMS
Permet de visualiser le rendu de l'email pour un destinataire. Voir Prévisualiser le message.

Agrandir l'éditeur de contenu
Email
Permet de masquer la palette et d'agrandir l'éditeur de contenu.

Annuler
Tous
Annule la dernière action effectuée.

Rétablir
Tous
Rétablit la dernière action que vous avez annulée.

Afficher les blocs
Landing page et email
Permet d'afficher des cadres autour des blocs de contenu (correspond à la balise HTML <div>).

Voir la source
Landing page et email
Permet d'afficher le code source HTML de la page.

Dreamweaver
Email
Permet d'éditer le contenu d'un email dans l'interface de Dreamweaver.

Barre d'outils de l'éditeur de contenu d'email

La barre d'outils est un élément contextuel de l'interface de l'éditeur qui 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. Lorsque vous sélectionnez un bloc, vous pouvez par exemple le supprimer ou le dupliquer. Lorsque vous sélectionnez du texte à l'intérieur d'un bloc, vous pouvez le transformer en lien ou le mettre en gras.

delivery_content_17

Attention :

Certaines fonctionnalités de la barre d'outils permettent de mettre en forme le contenu HTML. Cependant, si la page contient une feuille de style CSS, les instructions provenant de la feuille de style peuvent s'avérer prioritaires par rapport aux instructions spécifiées avec la barre d'outils.

Icône
Nom du bouton
Contexte
Description

Lien vers une URL externe
Tout élément
Permet d'ajouter un lien vers une URL. Le paramétrage d'un lien est présenté dans la section Insérer un lien.

Lien vers une landing page
Tout élément
Permet d'accéder à une landing page Adobe Campaign. Le paramétrage d'un lien est présenté dans la section Insérer un lien.

Lien d'abonnement
Tout élément
Permet d'insérer un lien d'abonnement à un service. Le paramétrage d'un lien est présenté dans la section Insérer un lien.

Lien de désabonnement
Tout élément
Permet d'insérer un lien de désabonnement à un service. Le paramétrage d'un lien est présenté dans la section Insérer un lien.

Supprimer le lien
Lien
Permet de supprimer, après confirmation, le lien ainsi que tous les paramétrages liés.

Insérer un champ de personnalisation
Elément de texte
Permet d'ajouter un champ de la base de données dans le contenu. Voir Insertion d'un champ de personnalisation.

Insérer un bloc de contenu
Elément de texte
Permet d'insérer un bloc de personnalisation dans le contenu. Voir Ajouter un bloc de contenu.

Activer le contenu dynamique
Elément de texte
Permet d'insérer un contenu dynamique dans le contenu. Voir Définir le contenu dynamique.

Désactiver le contenu dynamique
Elément de texte
Permet de supprimer un contenu dynamique.

Agrandir la police
Elément de texte
Augmente la taille du texte sélectionné (ajoute <span style="font-size:">).

Diminuer la police
Elément de texte
Réduit la taille du texte sélectionné (ajoute <span style="font-size:">).

Gras
Elément de texte
Ajoute le style gras au texte sélectionné (entoure le texte de la balise <strong></strong>).

Italique
Elément de texte
Ajoute le style italique au texte sélectionné (entoure le texte de la balise <em></em>).

Souligner
Elément de texte
Ajoute le style souligné au texte sélectionné (entoure le texte de la balise <span style="text-decoration: underline;">).

Changer la couleur de fond
Elément de texte
Permet de changer la couleur de fond du bloc sélectionné (ajoute style="background-color: rgba(170, 86, 255, 0.87)).

Changer la couleur du texte
Elément de texte
Permet de changer la couleur de tout le texte dans le bloc ou seulement celle du texte sélectionné (<span style="color: #56ff56;">).

Image
Bloc contenant une image
Permet d'insérer une image à partir d'un fichier enregistré en local.

Effacer
Tout bloc
Supprime le bloc et tout son contenu.

Doublon
Tout bloc
Duplique le bloc et également tous les styles associés au bloc.

Modes d'édition par défaut

L'éditeur de contenu vous permet de modifier le contenu de votre email dans deux formats différents : le format HTML et texte.

Mode HTML

Le mode HTML est un éditeur WYSIWYG dans lequel vous pouvez facilement voir et modifier l'affichage général de votre message. Il permet également d'interagir avec le contenu, notamment les images.

Ce mode facilite la sélection de blocs de contenu afin de les dupliquer ou de les éditer.

Les fonctionnalités HTML sont les suivantes :

  • définir une condition de visibilité,

  • ajouter une bordure et une trame,

  • modifier les propriétés de l'image,

  • ajouter un lien,

  • ajouter un champ de personnalisation,

  • ajouter un bloc de contenu,

  • modifier le style du texte.

delivery_content_edition3

Mode texte

Le mode texte de l'éditeur propose les fonctionnalités suivantes :

  • Saisir du texte

  • Ajouter un champ de personnalisation Reportez-vous à cette section.

  • Ajouter un bloc de contenu. Reportez-vous à cette section.

  • Ajouter du texte dynamique. Reportez-vous à cette section.

Le principe de fonctionnement de l'éditeur en mode texte est le même que pour le mode HTML.

delivery_content_18

Remarque :

Ce mode d'édition est utilisé pour les champs Objet et De, et pour l'onglet Texte du contenu d'un 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 une ou plusieurs diffusions email dans Adobe Campaign. Reportez-vous à ce document.

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