Bannières de carrousel carousel-banners

Identifiez les variables de zone réactive et de zone cliquable (seulement pour les clients qui utilisent Experience Manager Assets et Dynamic Media).

Commencez par identifier les variables dynamiques utilisées par la mise en œuvre de l’aperçu rapide existant afin de pouvoir entrer correctement les données des zones réactives et des zones cliquables lors de la création de la bannière de carrousel dans Adobe Experience Manager Assets.

Facultatif : créez un paramètre prédéfini d’ensemble de carrousel, au besoin.

Si vous êtes administrateur, vous pouvez personnaliser le comportement et l’apparence du carrousel en créant votre propre paramètre prédéfini de visionneuse de carrousel. L’avantage principal est que vous pouvez réutiliser ce paramètre prédéfini de visionneuse personnalisé pour plusieurs carrousels. Cependant, les utilisateurs ont également la possibilité de personnaliser le comportement et l’apparence du carrousel directement lors de sa création. Il s’agit de l’approche recommandée lorsque vous souhaitez une conception spécifique pour un carrousel donné.

Chargez une bannière d’image.

Chargez les bannières d’images que vous souhaitez rendre interactives.

Créez des ensembles de carrousels.

Dans les ensembles de carrousels, les utilisateurs parcourent les images de bannière et sélectionnent les zones réactives ou cliquables pour accéder au contenu approprié.

Pour créer un ensemble de carrousel dans Assets, sélectionnez Créer, puis sélectionnez Ensembles de carrousels. Ajoutez des ressources aux diapositives et sélectionnez Enregistrer. Vous pouvez également modifier l’apparence et le comportement du carrousel directement dans l’éditeur.

Ajoutez des zones réactives ou cliquables dans une bannière d’image.

Ajoutez une ou plusieurs zones réactives ou cliquables à une bannière d’image et associez chacune d’elles à une action, comme un lien, un aperçu rapide ou un fragment d’expérience. Après avoir ajouté des zones réactives ou cliquables, terminez cette tâche en publiant l'ensemble de carrousel. La publication crée le code intégré que vous pouvez copier et appliquer à la fin dans la page de destination de votre site web.

Consultez Aperçu des bannières de carrousel (Facultatif). Si vous le souhaitez, vous pouvez afficher une représentation de l’ensemble de carrousel et tester son interactivité.

Publiez les bannières de carrousel.

Vous publiez un ensemble de carrousel comme vous le feriez pour d’autres ressources. Dans Ressources, accédez à l’ensemble de carrousel, sélectionnez-le et sélectionnez Publier. La publication d’un ensemble de carrousel active l’URL et la chaîne intégrée.

Utilisez l’une des méthodes suivantes :

• Ajoutez une bannière de carrousel à la page de votre site web. Vous pouvez ajouter l’URL de la bannière de carrousel ou le code intégré que vous avez copié sur la page du site web.

  • Intégrez la bannière de carrousel à un aperçu rapide existant. Si vous utilisez un système de gestion de contenu web externe, vous devez intégrer la nouvelle bannière de carrousel à la mise en œuvre de l’aperçu rapide existant sur votre site web.

• Ajout d’une bannière de carrousel à votre site web dans Experience Manager Si vous êtes un client Experience Manager Sites, vous pouvez ajouter l’ensemble de carrousel directement sur la page dans Experience Manager à l’aide du composant Interactive Media.

Dans Ressources, cherchez le dossier dans lequel vous souhaitez créer l’ensemble de carrousel, puis accédez à Créer  > Ensemble de carrousel.

Dans la page de l’éditeur de bannière de carrousel, sélectionnez Appuyer pour ouvrir le sélecteur de ressources pour sélectionner l’image de votre première diapositive.

Dans la page de l’éditeur de bannières de carrousel, effectuez l’une des actions suivantes :

• Dans le coin supérieur gauche de la page, sélectionnez l’icône Ajouter une diapositive.

• Près du milieu de la page, sélectionnez Appuyer pour ouvrir le sélecteur de ressources.

Sélectionnez pour sélectionner les ressources à inclure dans votre ensemble de carrousel. Les ressources sélectionnées sont cochées. Lorsque vous avez terminé, en haut à droite de la page, sélectionnez Sélectionner.

Le sélecteur de ressources vous permet de rechercher des ressources en saisissant un mot-clé, puis en appuyant ou en cliquant sur Entrée. Vous pouvez également appliquer des filtres pour affiner vos résultats de recherche. Vous pouvez filtrer par chemin, collection, type de fichier et balise. Sélectionnez le filtre, puis sélectionnez l’icône Filtre de la barre d’outils. Modifiez l’affichage en appuyant sur l’icône Affichage et en sélectionnant Vue Colonnes, Vue Carte ou Vue Liste.

Pour plus d’informations, voir Utilisation de sélecteurs.

Continuez à ajouter des diapositives jusqu’à ce que vous ayez ajouté toutes les images que vous souhaitez faire pivoter dans l’ensemble du carrousel.

(En option) Effectuez l’une des actions suivantes :

• Si nécessaire, faites glisser les diapositives pour réorganiser la liste des images à insérer.

• Pour supprimer une image, sélectionnez-la, puis sélectionnez Supprimer la diapositive dans la barre d’outils.

• Pour appliquer un paramètre prédéfini, à proximité du coin supérieur droit de la page, sélectionnez la liste déroulante de paramètres prédéfinis, puis sélectionnez un paramètre prédéfini à appliquer à l’ensemble simultanément.

Pour supprimer une diapositive, sélectionnez-la, puis, sur la barre d’outils, sélectionnez Supprimer la diapositive. Pour déplacer une diapositive, sélectionnez l’icône Réorganiser et maintenez le pointeur enfoncé jusqu’à l’emplacement souhaité.

Une fois que vous avez ajouté les images aux diapositives, vous pouvez ajouter à votre image une zone réactive, une zone cliquable, ou les deux. Voir Ajout de zones réactives ou cliquables dans une bannière d’image.

Vous pouvez modifier le design visuel et le comportement des ensembles de carrousels. Sélectionnez les onglets Comportement et Apparence et réglez l’aspect de la bannière du carrousel ou le comportement de composants spécifiques. Pour plus d’informations sur l’utilisation de l’éditeur de visionneuses, reportez-vous à la section Gestion des paramètres prédéfinis de visionneuse.

* Durée d’affichage d’une image. Par défaut, chaque image s’affiche pendant 9 secondes.
* Animation. Par défaut, chaque transition de diapositive est une atténuation. Vous pouvez changer cela en une transition de diapositive.
* Style des boutons. Les utilisateurs et utilisatrices peuvent faire alterner les bannières en appuyant sur chaque point ou numéro. Vous pouvez modifier l’emplacement des boutons indicateurs définis (et s’ils sont numériques ou en forme de points) ainsi que leur taille.
* Modifiez le style de mise en surbrillance d’une zone cliquable ou l’icône utilisée pour les zones réactives.
* Avant de modifier un paramètre prédéfini de visionneuse, choisissez le style sur lequel vous souhaitez le baser. Sans cela, lorsque vous commencerez à modifier le paramètre prédéfini de visionneuse, vous perdrez toutes les modifications si vous décidez de changer de paramètre prédéfini..

Vous pouvez également prévisualiser l’affichage de la bannière de carrousel. Consultez (Facultatif) Aperçu des bannières de carrousel.

Lorsque vous avez terminé, sélectionnez Enregistrer.

À partir de Ressources, accédez à l’ensemble de carrousel auquel vous souhaitez ajouter de l’interactivité.

Sélectionnez l’ensemble de carrousel et sélectionnez Modifier. L’éditeur de visionneuse de carrousel s’ouvre.

Sélectionnez la diapositive que vous souhaitez rendre interactive.

Dans le coin supérieur gauche de la page, sélectionnez Zone réactive ou Zone cliquable.

Effectuez l’une des opérations suivantes :

• Pour les zones réactives : sur l’image, sélectionnez un emplacement où vous souhaitez que la zone réactive apparaisse.
• Pour les zones cliquables : sur l’image, sélectionnez puis faites glisser le pointeur depuis le coin supérieur gauche vers le coin inférieur droit pour créer la zone cliquable. Vous pouvez ajuster la taille de la zone cliquable en faisant glisser les coins.

Si nécessaire, faites glisser la zone réactive ou la zone cliquable vers un nouvel emplacement. Ajoutez d’autres zones réactives ou cliquables, au besoin.

Pour supprimer une zone réactive ou cliquable, sélectionnez l’onglet Actions. Sous l’en-tête Cartes et zone réactives, dans le menu déroulant Type sélectionné, sélectionnez le nom de la zone réactive ou de l’image cliquable à supprimer. Sélectionnez l’icône Corbeille en regard du menu, puis sélectionnez Supprimer.

Dans le champ de texte Nom, saisissez le nom de la zone réactive ou cliquable. Ce nom apparaît également dans la liste déroulante Zones réactives et cliquables. Le fait de fournir un nom facilite l’identification de la zone réactive ou de la zone cliquable si vous décidez de le modifier ultérieurement.

Effectuez l’une des actions disponibles sur l’onglet Actions  :

• Sélectionnez Aperçu rapide.

  • Si vous êtes client Experience Manager Sites et eCommerce, sélectionnez l’icône de sélecteur de produit (loupe) afin d’afficher la page Sélectionner un produit. Sélectionnez le produit à utiliser, puis la coche dans le coin supérieur droit de la page pour revenir à l’éditeur de bannière de carrousel.

  • Si vous n’êtes pas client Experience Manager Sites ou eCommerce

    • Consultez Identification des variables de zone réactive si vous souhaitez définir ces variables.

    • Ensuite, entrez manuellement la valeur de SKU. Dans le champ de texte Valeur de SKU, entrez la SKU, qui est un identifiant unique pour chaque produit ou service que vous proposez. La valeur de la SKU entrée est renseignée automatiquement dans la partie variable du modèle d’aperçu rapide afin que le système sache associer la zone réactive sur laquelle l’utilisateur appuie et l’aperçu rapide d’une SKU spécifique.

    • (Facultatif) S’il existe d’autres variables dans l’aperçu rapide que vous devez utiliser pour identifier un produit, sélectionnez Ajouter la variable générique. Dans le champ de texte, spécifiez une variable supplémentaire. Par exemple, category=Mens est une variable ajoutée.

    • Pour plus d’informations, voir Utilisation de sélecteurs.

• Sélectionnez Lien hypertexte.

  • Si vous êtes client Experience Manager Sites, sélectionnez l’icône Sélecteur de site (dossier) pour accéder à une URL.

    note note
    NOTE
    La méthode de liaison basée sur une URL n’est pas possible si votre contenu interactif contient des liens avec des URL relatives, en particulier des liens vers des pages Experience Manager Sites.

  • Si vous êtes un client ou une cliente autonome, dans le champ de texte HREF, spécifiez le chemin URL complet vers une page web liée.

Veillez à spécifier si vous souhaitez ouvrir le lien dans un nouvel onglet du navigateur (paramètre par défaut recommandé) ou dans le même onglet.

Pour plus d’informations, voir Utilisation de sélecteurs.

• Sélectionnez Fragment d’expérience.

  • Si vous êtes client Experience Manager Sites, sélectionnez l’icône Rechercher (loupe) afin d’ouvrir la page Fragment d’expérience. Sélectionnez le fragment d’expérience à utiliser, puis Sélectionner dans le coin supérieur droit de la page, afin que vous puissiez revenir à la page de gestion des zones réactives.
    Voir Fragments d’expérience.

  • Indiquez la largeur et la hauteur du fragment d’expérience tel qu’il apparaît dans la bannière.

    note note
    NOTE
    Les outils de partage sur les médias sociaux ne sont pas pris en charge dans la bannière de carrousel lorsque vous incorporez la visionneuse dans un fragment d’expérience.
    Pour contourner ce problème, créez des paramètres prédéfinis de visionneuse qui ne disposent pas d’outils de partage sur les médias sociaux. Ces paramètres prédéfinis de visionneuse vous permettent de l’incorporer dans des fragments d’expérience.

Vous pouvez également prévisualiser l’affichage de la bannière de carrousel. Consultez (Facultatif) Aperçu des bannières de carrousel.

Sélectionnez Enregistrer.

Publiez l’ensemble de carrousel. La publication crée le code intégré ou l’URL que vous pouvez utiliser sur la page de votre site web. Si vous êtes un client Experience Manager Sites, vous pouvez ajouter l’ensemble de carrousel directement dans votre page web.

Voir Publication de ressources.

Reportez-vous à la section Ajout d’un ensemble de carrousel à la page de destination de votre site web.

Effectuez l’une des opérations suivantes :

• Pointez sur une ressource d’ensemble de carrousel, puis sélectionnez Modifier (icône crayon).

• Pointez sur une ressource d’ensemble de carrousel, sélectionnez Sélectionner (icône de coche), puis Modifier sur la barre d’outils.

• Sélectionnez une ressource de l’ensemble de carrousel, puis, dans le coin supérieur gauche de la page, sélectionnez Modifier (icône en forme de crayon).

Pour modifier l’ensemble de carrousel, effectuez l’une des opérations suivantes :

• Pour ajouter une diapositive, sélectionnez l’icône Ajouter une diapositive, puis accédez à la ressource à ajouter à cette diapositive et sélectionnez la coche.
• Pour réorganiser les diapositives, faites glisser une diapositive vers un nouvel emplacement (sélectionnez l’icône Réorganiser pour déplacer les éléments).
• Pour ajouter une zone réactive ou une zone cliquable, sélectionnez l’icône Zone réactive ou Zone cliquable et reportez-vous à la section Ajout de zones réactives et de zones cliquables.
• Pour modifier l’aspect ou le comportement de l’ensemble de carrousel, sélectionnez l’onglet Apparences ou l’onglet Comportement, puis définissez les options de votre choix.
• Pour modifier les zones réactives ou cliquables, sur la diapositive appropriée, sélectionnez une zone réactive ou cliquable, puis apportez les modifications nécessaires à l’aide de l’onglet Actions.
• Pour supprimer une diapositive, sélectionnez-la, puis sélectionnez Supprimer la diapositive dans la barre d’outils.
• Pour appliquer un paramètre prédéfini, à proximité du coin supérieur droit de la page, sélectionnez la liste déroulante Paramètre prédéfini, puis sélectionnez un paramètre prédéfini de visionneuse.
• Pour supprimer un ensemble de carrousel en entier, accédez-y, sélectionnez-le et sélectionnez Supprimer.

Dans Ressources, accédez à une bannière de carrousel que vous avez créée et sélectionnez pour l’afficher.

Sélectionnez Modifier.

Dans la liste des paramètres prédéfinis de visionneuse dans le coin supérieur droit de la barre d’outils, sélectionnez une visionneuse pour afficher un aperçu de la bannière de carrousel.

Sélectionnez Aperçu.

Sélectionnez les zones réactives ou cliquables de l’image pour tester les actions associées.

Copiez le code intégré de l’ensemble de carrousel.
Consultez Incorporation de la visionneuse de vidéos ou d’images dans une page web.

Ajoutez le code incorporé que vous avez copié à partir d’Experience Manager Assets sur votre page web.
Le code intégré copié est réactif et soit donc s’adapter automatiquement à la zone d’incorporation de la page.