Options du compositeur d’expérience visuelle

Dernière mise à jour : 5 mai 2025
  • Rubriques :

La version Adobe Target Standard/Premium 25.2.1 (17 février 2015) introduit un Visual Experience Composer mis à jour (VEC). Cet article explique l’interface utilisateur mise à jour et ses options.

IMPORTANT
La Visual Editing Composer mise à jour nécessite l’extension Adobe Experience Cloud Visual Editing Helper disponible sur le Web Store de Chrome.

Le compositeur d’expérience visuelle s’affiche lorsque vous créez ou modifiez une activité existante.

Compositeur d’expérience visuelle

Présentation de l’interface utilisateur du compositeur d’expérience visuelle

Les sections suivantes expliquent les options disponibles dans le VEC mis à jour pour une activité A/B Test. Les options disponibles varient en fonction du type d’activité.

panneau Experiences

Le panneau Experiences s’affiche dans le rail gauche du compositeur d’expérience visuelle.

Panneau Expériences

Vous pouvez afficher, créer, renommer ou supprimer des expériences à l’aide du panneau Experiences.

Les options suivantes sont disponibles dans le panneau Experiences :

  • Afficher une expérience : pour afficher une expérience, cliquez sur l’expérience souhaitée pour l’afficher dans la zone de travail de Design.
  • Ajouter une expérience : cliquez sur l’icône Add ( Ajouter une icône ) pour ajouter une nouvelle expérience. Configurez la nouvelle expérience selon vos besoins.
  • Renommer une expérience : cliquez sur l’icône Rename ( Icône Renommer ) pour afficher la boîte de dialogue Rename Experience. Indiquez le nouveau nom, puis cliquez sur Save.
  • Dupliquer, supprimer ou rediriger une expérience : cliquez sur l’icône More Actions ( icône Plus d’actions ), puis choisissez Duplicate, Delete ou Redirect to URL.

Paramètres/configuration de l’activité

Cliquez sur l’icône Configure ( icône Configurer ) affichée en haut de la zone de travail Design pour afficher le menu des propriétés de l’activité.

Options de configuration des activités

Les options disponibles sont les suivantes :

  • Properties : attribuez des propriétés à l’activité ou supprimez des propriétés de l’activité. Properties est une fonctionnalité (Target Premium). Pour plus d’informations, voir Autorisations des utilisateurs d’Enterprise.
  • Page Delivery : incluez la même expérience sur des pages similaires de votre site. Utilisez un modèle de page pour structurer vos pages, ou si vos pages contiennent des éléments similaires, pour tester des variations dans des éléments de page à structure similaire ou sur l’ensemble de votre domaine. Pour plus d’informations, voir Inclure la même expérience sur des pages similaires.
  • Site Preferences : configurez les préférences de votre site pour spécifier comment Target génère les sélecteurs CSS. Pour plus d’informations, voir Sélecteurs CSS dans Configuration du Visual Experience Composer.
  • Ajouter des pages supplémentaires : ajoutez des pages supplémentaires à l’activité pour créer une activité multipage qui vous permet de créer une histoire sur plusieurs pages, avec une conception spécifique à chaque page. Pour plus d’informations, voir Activité multipage.
  • Audience unique : utilisez une audience unique pour l’activité.
  • Audiences multiples : attribuez plusieurs audiences à l’activité. Cliquez sur l’icône Ajouter des audiences ( icône Ajouter ), puis sélectionnez une ou plusieurs audiences dans la liste. Vous pouvez également combiner des audiences ou créer une audience à partir de la boîte de dialogue Add Audiences.

Modes Design/Browse

Utilisez les boutons (bascule) Design/Browse affichés au-dessus de la zone de travail de conception pour basculer entre le mode de conception et le mode de navigation.

Boutons bascule Conception et navigation

Utilisez le mode Browse pour parcourir votre site et sélectionner la vue ou la page à mettre à jour. Revenez au mode Design pour ajouter ou modifier vos modifications.

Undo/Redo

Vous pouvez annuler les modifications effectuées en cliquant sur l’icône Undo ( Icône Annuler ).

Icône Annuler dans le VEC

Pour rétablir une action, développez le groupe de boutons Annuler/Redo et choisissez Redo.

panneau Components

Vous pouvez ajouter plusieurs composants à votre page web et les modifier selon vos besoins à l’aide du nouveau panneau Components.

Panneau Composants

NOTE
Si le panneau Modifications s’affiche dans cette zone et non dans le panneau Components, cliquez sur l’icône Show Components ( icône Afficher les composants ). L’icône Show Components ( icône Afficher les composants ) et l’icône Show Modifications ( panneau Afficher les modifications ) agissent comme des bascules pour afficher les options appropriées.

Pour ajouter un nouveau composant à une expérience :

  1. Cliquez sur le composant de votre choix à ajouter pour le mettre en surbrillance.

    Les composants disponibles sont regroupés dans des conteneurs logiques :

  2. Faites glisser le composant sur un élément de page existant dans la zone de travail Design.

  3. Choisissez d’insérer le composant avant ou après l’élément sélectionné.

    Par rapport à la version précédente du compositeur d’expérience visuelle, vous ne pouvez pas remplacer un élément sélectionné par un composant.

panneau Modifications

Pour ouvrir le panneau Modifications, cliquez sur l’icône Show Modifications ( Afficher le panneau Modifications ) dans le panneau Components.

Panneau Modifications

NOTE
L’icône Show Components ( icône Afficher les composants ) et l’icône Show Modifications ( panneau Afficher les modifications ) agissent comme des bascules pour afficher les options appropriées.

Le panneau Modifications affiche toutes les modifications apportées à votre page dans le Visual Experience Composer (VEC) et vous permet d’effectuer des modifications supplémentaires (comme le sélecteur CSS, la mbox et le code personnalisé).

Cliquez sur l’icône More Options ( icône Autres actions ) dans l’en-tête du panneau pour ajouter une modification, supprimer toutes les modifications ou supprimer toutes les modifications non valides. Cliquez sur Select pour effectuer des opérations en bloc : Apply to All Pages ou Delete.

Cliquez sur l’icône More Options ( icône Autres actions ) en regard de chaque modification pour afficher ses informations, supprimer la modification ou l’appliquer à d’autres vues.

Zone de travail Design

La zone de travail Design vous permet de sélectionner des fenêtres d’affichage, notamment les options d’ajustement à l’écran, les Desktop, les Tablet, les Mobile Landscape et les Mobile Portrait. Par défaut, la zone de travail s’affiche sur la page à l’écran avec les fenêtres d’affichage définies dans la section Administration.

Options de fenêtre d’affichage

Vous pouvez également effectuer un zoom avant ou arrière en cliquant sur l’icône appropriée ( Icône de zoom avant ou Icône de zoom arrière ).

Lorsque vous cliquez sur un élément de page dans la zone de travail de Design, un menu affiche les options disponibles pour ce type d’élément. En outre, un chemin d’accès DOM s’affiche au bas de la page, ce qui vous permet de naviguer facilement dans la structure de la page.

Les différentes actions Visual Experience Composer (VEC) sont regroupées dans des options de menu appropriées pour rendre votre tâche plus rapide et plus efficace :

Menu Options du VEC

NOTE
Les options disponibles dépendent du type d’activité et de l’élément que vous créez ou modifiez. Pour plus d’informations sur la modification des images et des offres dans une activité A/B Test, consultez la section Modifier les éléments à l’aide de la zone de travail Design ci-dessous.

panneau Properties

Le panneau Properties vous permet de modifier les propriétés des éléments sélectionnés sur la page, qu’il s’agisse d’éléments HTML ou d’objets spécifiques à Target, tels que des recommandations ou des offres.

Panneau Propriétés

Cliquez sur les icônes en haut du panneau pour modifier le code d’HTML ou supprimer, dupliquer ou masquer des éléments. Les modifications s’affichent dans le panneau Modifications.

Le panneau Properties est réductible dans le rail de droite. Cliquez sur l’icône Show/Hide Properties ( icône Propriétés ) à droite du panneau pour réduire ou afficher le panneau Properties.

Modification des éléments à l’aide de la zone de travail Design

Les sections suivantes vous montrent comment modifier des images et du texte dans la zone de travail Design. La zone de travail de conception, ainsi que les panneaux Composants, Modifications et Propriétés vous fournissent des outils puissants pour vous permettre de créer facilement des expériences pour vos activités.

Options d’image

Si vous cliquez sur une image dans une activité A/B Test, le compositeur d’expérience visuelle ressemble à l’illustration suivante :

compositeur d’expérience visuelle avec image sélectionnée

Sélectionnez des composants dans le cadre Components sur le côté gauche pour insérer les éléments suivants :

Le menu en haut de l’image vous permet d’effectuer les opérations suivantes :

  • Insérez un lien ( Icône Insérer un lien ).
  • Modifiez l’image ( Icône Choisir l’image ).
  • Ajoutez une personnalisation ( icône Ajouter un Personalization ).
  • Supprimez l’image ( icône de suppression ).

Le volet Properties sur le côté droit permet de configurer plus en détail les propriétés de l’image.

Les icônes situées en haut du cadre permettent d’effectuer les opérations suivantes :

  • Modifiez l’HTML ( Icône Insérer une HTML ). Consultez Modifier HTML ci-dessous pour plus d’informations.
  • Dupliquez l’image ( icône Dupliquer ).
  • Supprimez l’image ( icône de suppression ).
  • Masquez l’image ( Icône Masquer ).

Les options du cadre de droite permettent d’effectuer les opérations suivantes :

  • Modifiez la classe CSS.
  • Configurez les propriétés de l’image (source, titre, texte secondaire).
  • Modifiez l’URL du lien.
  • Configurez la taille de l’image (hauteur et largeur). Cliquez sur Show Advanced Options pour configurer la taille minimale et maximale, la largeur, la hauteur, le débordement et l’ajustement de l’objet de l’image.
  • Configurez la position de l’image sur votre page (absolue, fixe, relative, statique ou rémanente).
  • Configurez l’espacement de l’élément, y compris la marge et la marge intérieure.
  • Configurez les effets de l’élément (opacité). Cliquez sur Show Advanced Options pour configurer les valeurs de sépia, niveaux de gris, contraste, luminosité et flou de l’image. Vous pouvez également inverser ou faire pivoter l’image.
  • Configurez les styles intégrés de l’image.

Options de texte

Si vous cliquez sur du texte dans une activité A/B Test, le compositeur d’expérience visuelle ressemble à l’illustration suivante :

compositeur d’expérience visuelle avec texte sélectionné

Sélectionnez des composants dans le cadre Components sur le côté gauche pour insérer les éléments suivants :

Cliquez sur l’icône Show Modifications ( icône Afficher les modifications ) pour afficher les modifications apportées à l’expérience.

Le menu situé en haut de l’élément de texte vous permet d’effectuer les opérations suivantes :

  • Configurer les propriétés du texte (niveau d’en-tête, paragraphe, guillemet ou espace)
  • Sélectionnez la couleur du texte ( icône Couleur du texte )
  • Configurez les attributs du texte (gras, italique, souligné ou barré) ( icône Choisir les attributs de texte ).
  • Configurer l’alignement du texte (gauche, centre, droite, justifier) ( icône Alignement du texte ).
  • Insérez un lien ( Icône Insérer un lien ).
  • Remplacez le contenu par une offre HTML, fragment d’expérience ou recommandation.
  • Modifiez l’HTML ( Icône Insérer une HTML ).
  • Ajoutez une personnalisation ( icône Ajouter un Personalization ).
  • Supprimez l’image ( icône de suppression ).

Le panneau Properties sur le côté droit permet de configurer plus en détail les propriétés du texte.

Les icônes situées en haut du cadre permettent d’effectuer les opérations suivantes :

  • Modifiez l’HTML ( Icône Insérer une HTML ). Consultez Modifier HTML ci-dessous pour plus d’informations.
  • Dupliquez le texte ( icône Dupliquer ).
  • Supprimez le texte ( icône de suppression ).
  • Masquez le texte ( Icône Masquer ).

Les options du cadre de droite permettent d’effectuer les opérations suivantes :

  • Modifiez la classe CSS.
  • Configurez la couleur et l’image d’arrière-plan du texte.
  • Configurer la typographie du texte (style d’en-tête, taille de police, épaisseur de police, hauteur de ligne, alignement, couleur du texte, style de texte (gras, italique, souligné ou barré)).
  • Configurez les listes, y compris les listes à puces, numérotées ou A, B, C.
  • Choisissez la couleur de la bordure.
  • Configurez la taille de la zone de texte (hauteur et largeur). Cliquez sur Show Advanced Options pour configurer la taille minimale et maximale de la zone de texte, sa largeur, sa hauteur, son débordement et l’ajustement de l’objet.
  • Configurez la position de la zone de texte sur la page (absolue, fixe, relative, statique ou rémanente) et définissez le nombre de pixels à partir du haut, de la droite, du bas et de la gauche.
  • Configurez l’espacement de l’élément, y compris la marge et la marge intérieure.
  • Configurez les effets de l’élément (opacité). Cliquez sur Show Advanced Options pour configurer les valeurs de sépia, niveaux de gris, contraste, luminosité et flou de l’image. Vous pouvez également inverser ou faire pivoter le texte.
  • Configurez les styles intégrés.