Concevoir une landing page designing-a-landing-page

À propos de la conception du contenu d'une landing page about-content-design

Les landing pages sont créées de la même façon que toute autre activité marketing.

Lors de la conception d'une landing page, vous devez définir le contenu de la page, de la page de confirmation et de la page d'erreur. Utilisez le sélecteur situé sous la barre d'actions pour afficher et configurer chacune de ces pages.

Le contenu des landing pages est conçu dans l'éditeur de contenu de Campaign.

NOTE
En ce qui concerne la conception d'e-mail, si votre instance a été installée avant la version 19.0 d'Adobe Campaign Standard, vous avez toujours accès à l'ancien éditeur de contenu d'e-mail. L'interface, les principes d'utilisation et la configuration sont pratiquement les mêmes que ceux décrits ci-dessous pour les landing pages. Cependant, toutes les fonctionnalités peuvent ne pas être disponibles ou gérées dans l'ancien éditeur de contenu d'e-mail qui est obsolète à compter de la version 19.0. Pour éditer rapidement le contenu de votre e-mail par le biais de l'interface de type glisser-déposer avec des fonctionnalités étendues, utilisez le concepteur d'e-mail.

Cette page décrit les spécificités de l'éditeur de contenu de landing page. Pour plus d'informations sur les actions communes à une ou plusieurs activités marketing, reportez-vous aux sections suivantes du guide Concevoir un contenu d'e-mail  :

NOTE
Si vous disposez d'une landing page déjà prédéfinie au format HTML, vous pouvez l'importer directement via le bouton Changer de contenu.
Avant d'importer une page HTML dans Adobe Campaign, assurez-vous qu'elle s'ouvre et s'affiche correctement dans les différents navigateurs. Si la page HTML contient des scripts en langage JavaScript, ils doivent s'exécuter sans erreur hors de l'éditeur. Evitez en général d'utiliser des scripts dans le contenu des messages pour qu'il soit correctement traité par les clients de messagerie.

Interface de l'éditeur de contenu de landing page landing-page-content-editor-interface

L'éditeur de contenu de landing page permet de définir, modifier et personnaliser facilement du contenu dans Adobe Campaign. Pour y accéder, cliquez sur le bloc Contenu dans le tableau de bord des landing pages.

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

  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 d’arrière-plan, 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 sélectionner un modèle et changer le mode d'affichage.
  3. La zone d'édition principale 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.

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

Icône
Nom du bouton
Channel
Description
Charger du contenu
Landing page et e-mail
Permet de sélectionner un contenu d'usine ou d'importer votre propre contenu HTML. Reportez-vous à Charger un contenu existant.
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 e-mail
Permet d'afficher des cadres autour des blocs de contenu (correspond à la balise HTML <div>).
Voir la source
Landing page et e-mail
Permet d'afficher le code source HTML de la page.

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.

IMPORTANT
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 (link)
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.

Gérer la structure et le style d'une landing page managing-landing-page-structure-and-style

Gérer les blocs dans l'éditeur de contenu managing-blocks-in-the-content-editor

Les différents éléments du contenu HTML sont affichés dans la landing page sous forme de blocs, correspondant à la balise <div> </div>. Pour agir sur un bloc, sélectionnez-le. Celui-ci est alors entouré d'un cadre de couleur bleue.

Quand un bloc est sélectionné, les objets parents de l'élément HTML correspondant s'affichent dans un fil d'Ariane situé au bas de la zone d'édition.

Au survol de la souris sur un élément de ce fil d'Ariane, l'élément est mis en surbrillance. Vous pouvez ainsi facilement naviguer entre les divers blocs et sélectionner précisément l'élément HTML que vous souhaitez modifier.

Utilisez les options disponibles dans la palette et la barre d'outils contextuelle pour modifier le bloc, le supprimer ou le dupliquer.

Pour les blocs contenant du texte, cliquez une seconde fois dans le bloc pour activer le mode d'édition du texte. Le contour du bloc devient vert. Vous pouvez alors sélectionner ou saisir du texte. Utilisez les options disponibles dans la palette et la barre d'outils contextuelle pour ajouter un lien ou modifier le formatage du texte.

Les paramètres définis pour un élément d'un bloc (liens, champs de personnalisation, blocs de contenu, etc.) peuvent être modifiés à tout moment à partir de la palette.

Ajouter une bordure et un arrière-plan dans l'éditeur de contenu adding-a-border-and-a-background-in-the-content-editor

Vous pouvez définir une couleur de fond en sélectionnant une couleur dans le nuancier. Cette couleur sera appliquée au bloc sélectionné.

Vous pouvez ajouter une bordure au bloc sélectionné.

Changer le style du texte dans l'éditeur de contenu changing-the-text-style-in-the-content-editor

Pour modifier le style du texte, vous devez vous placer à l'intérieur d'un bloc de texte.

Pour modifier l'alignement du texte, sélectionnez l'une des trois icônes suivantes dans la palette de gauche :

  • Aligner à gauche : aligne le texte à gauche du bloc sélectionné (ajoute style="text-align: left;").
  • Centrer : centre le texte du bloc sélectionné (ajoute style="text-align: center;").
  • Aligner à droite  : aligne le texte à droite du bloc sélectionné (ajoute style="text-align: right;").

Vous pouvez également utiliser la barre d'outils pour modifier les attributs de la police : changer la taille de la police, mettre le texte en gras ou en italique, le souligner ou changer la couleur du texte. Consultez cette section.

Insérer des images dans une landing page inserting-images-in-a-landing-page

  1. Dans le contenu d'une landing page, sélectionnez un bloc contenant une image.

  2. Sélectionnez le bouton Insérer.

  3. Sélectionnez Image locale dans la barre d'outils contextuelle.

  4. Sélectionnez un fichier.

  5. Ajustez les propriétés de l'image selon les besoins.

Définir le contenu dynamique dans une landing page defining-dynamic-content-in-a-landing-page

Pour définir du contenu dynamique dans une landing page, sélectionnez un bloc à l'aide du fil d'Ariane ou en cliquant directement sur un élément.

Certains blocs, comme les images, ne peuvent pas être sélectionnés directement. Dans ce cas, sélectionnez le bloc parent à l'aide du fil d'Ariane. Vous pourrez alors modifier tous les éléments compris dans cet élément parent, y compris les images. La condition s'appliquera à tous les éléments enfants du bloc parent.

Le fil d'Ariane est présenté dans la section Gestion des blocs.

Les étapes suivantes pour définir le contenu dynamique dans une landing page sont similaires à celles que vous devez suivre pour un e-mail. Consultez cette section.

NOTE
Les éléments de variante encadrés en rouge sont ceux pour lesquels une expression n'a pas encore été définie.

Vous pouvez naviguer parmi les différents contenus dynamiques d'un bloc. Pour cela :

  1. Sélectionnez le bloc.

    Des flèches apparaissent sur les bords gauche et droit de l'image.

  2. Cliquez sur la flèche de droite pour naviguer.

    Le rendu des flèches est estompé lorsque vous avez navigué jusqu'au dernier contenu dynamique (ou jusqu'au premier pour la flèche de gauche).

  3. Pour supprimer toutes les conditions appliquées à un bloc, sélectionnez celui-ci et cliquez de nouveau sur l'icône Désactiver le contenu dynamique.

  4. Sélectionnez le contenu dynamique que vous souhaitez conserver.

Dans la palette :

  • Les contenus pour lesquels une expression a été renseignée ne sont plus encadrés en rouge ; ils s'affichent en gris.
  • Le contenu actuellement sélectionné s'affiche en bleu.

recommendation-more-help
3ef63344-7f3d-48f9-85ed-02bf569c4fff