Bannières de carrousel carousel-banners
Les bannières de carrousel permettent aux spécialistes du marketing de générer des interactions en créant facilement du contenu promotionnel interactif et rotatif et en le diffusant sur n'importe quel écran.
La création et la modification du contenu présenté dans les bannières promotionnelles peuvent prendre beaucoup de temps, limitant votre capacité à publier rapidement du nouveau contenu ou à le rendre plus ciblé. Les bannières de carrousel vous permettent de créer ou de modifier rapidement des bannières rotatives et d’ajouter des éléments interactifs, tels que des liens de zones réactives vers les détails du produit ou les ressources connexes. Vous pouvez les diffuser sur n’importe quel écran, ce qui vous permet de diffuser plus rapidement du contenu promotionnel sur le marché.
Les bannières de carrousel sont signalées par une bannière contenant le mot CAROUSELSET :
Sur votre site web, la bannière de carrousel peut se présenter comme suit :
Vous pouvez parcourir les images cliquant sur les numéros. De plus, les diapositives alternent automatiquement selon un intervalle personnalisable. Les images d’une bannière de carrousel prennent en charge les zones réactives et les zones cliquables. Les utilisateurs peuvent sélectionner un lien hypertexte ou accéder à une fenêtre Aperçu rapide.
Dans cet exemple, un utilisateur a sélectionné une zone cliquable et a accédé à la fenêtre d’aperçu rapide pour les gants :
Vidéo sur la création de bannières de carrousel watch-how-carousel-banners-are-created
Regardez une présentation sur la manière dont les bannières de carrousel sont créées (Durée : 10 minutes et 33 secondes). Vous apprendrez également à prévisualiser, modifier et diffuser des bannières de carrousel.
Démarrage rapide : bannières de carrousel quick-start-carousel-banners
Pour démarrer rapidement :
-
Identifiez les variables de zone réactive et de zone cliquable (seulement pour les clients qui utilisent Adobe Experience Manager Assets et Dynamic Media).
Commencez en identifiant les variables dynamiques utilisées par l’implémentation de l’aperçu rapide existant. Cela vous permet de saisir correctement les zones réactives et les données de zone cliquable pendant le processus de création de bannières de carrousel dans 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. Cette approche est recommandée lorsque vous souhaitez une conception très spécifique pour un carrousel donné.
-
Chargez les bannières d’images que vous souhaitez rendre interactives.
-
Créez un ensemble 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 zones cliquables sur une bannière d’images. Ensuite, associez chacun d’entre eux à une action telle qu’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.
Voir (Facultatif) Aperçu des bannières de carrousel. 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 à votre page webVous pouvez ajouter l’URL de bannière de carrousel ou le code intégré que vous avez copié sur la page 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.
-
Ajoutez une bannière de carrousel à votre site web dans Experience Manager. Si vous êtes client Experience Manager Sites, vous pouvez ajouter l’ensemble de carrousel directement dans la page à l’aide du composant Interactive Media.
-
Si vous devez modifier des ensembles de carrousels, consultez Modification d’ensembles de carrousels. De plus, vous pouvez afficher et modifier les propriétés d’un ensemble de carrousel.
Identification des variables de zone réactive et de zone cliquable identifying-hotspot-and-image-map-variables
Commencez en identifiant les variables dynamiques utilisées par l’implémentation de l’aperçu rapide existant. Cette méthode vous permet de saisir correctement les zones réactives ou les données de zone cliquable pendant le processus de création de l’ensemble de carrousel dans Experience Manager Assets.
Lorsque vous ajoutez des zones réactives ou des zones cliquables à une image de bannière, vous affectez un SKU (Stock Keeping Unit). Vous pouvez également affecter des variables supplémentaires facultatives à chaque zone réactive ou zone cliquable. Ces variables sont utilisées, par la suite, pour faire correspondre les zones réactives ou les zones cliquables au contenu de l’aperçu rapide.
Il est important d’identifier correctement le nombre et le type des variables à associer aux données des zones réactives ou des zones cliquables. Chaque zone réactive ou zone cliquable ajoutée à une image de bannière doit comporter suffisamment d’informations pour identifier clairement le produit sur le système back-end existant. En même temps, assurez-vous que chaque zone réactive ou zone cliquable ne comporte pas plus de données que nécessaire. La raison en est que cela rendrait le processus de saisie des données trop complexe et la gestion continue des zones réactives ou des zones cliquables plus sujette aux erreurs.
Il existe différentes manières d’identifier un jeu de variables à utiliser pour les données des zones réactives ou des zones cliquables.
Il suffit parfois de consulter les spécialistes informatiques chargés de la mise en œuvre de l’aperçu rapide existant. Ils sont susceptibles de connaître l’ensemble minimal de données permettant d’identifier l’aperçu rapide dans le système. Cependant, il est possible d’analyser le comportement existant du code en front-end.
La plupart des implémentations d’aperçu rapide utilisent le modèle suivant :
- L’utilisateur active un élément d’interface utilisateur sur le site web. Par exemple, en sélectionnant un bouton Aperçu rapide.
- Le site web envoie une demande Ajax au serveur back-end afin de charger les données ou le contenu de l’aperçu rapide, le cas échéant.
- Les données de l’aperçu rapide sont traduites en contenu en préparation du rendu sur la page Web.
- Enfin, le code en front-end effectue le rendu visuel de ce contenu à l’écran.
L’approche consiste ensuite à visiter différentes zones du site web existant dans lequel la fonction Aperçu rapide est implémentée. Ensuite, déclenchez l’aperçu rapide et capturez l’URL Ajax envoyée par la page web pour charger les données ou le contenu de cet aperçu.
Normalement, il n’est pas nécessaire d’utiliser des outils de débogage spécialisés. Les navigateurs web modernes incluent des inspecteurs web qui font un travail correct. Vous trouverez ci-dessous quelques exemples de navigateurs web qui incluent des inspecteurs web :
- Pour afficher toutes les requêtes HTTP sortantes dans Google Chrome, appuyez sur la touche F12 (Windows®) ou Commande-Option-I (Mac) pour ouvrir le panneau de l’outil de développement. Sélectionnez l’onglet Réseau.
- Dans Firefox, vous pouvez activer le module externe Firebug en appuyant sur F12 (Windows®) ou sur Commande-Option-I (Mac). Utilisez l’onglet Réseau ou encore l’outil Inspecteur intégré et son onglet Réseau.
Lorsque la surveillance de réseau est activée dans le navigateur, déclenchez l’aperçu rapide sur la page.
Vous trouvez maintenant l’URL Ajax d’aperçu rapide dans le journal réseau. Copiez l’URL enregistrée pour l’analyse ultérieure. Généralement, lorsque vous déclenchez l’aperçu rapide, plusieurs requêtes sont envoyées au serveur. En règle générale, l’URL Ajax d’aperçu rapide est l’une des premières dans la liste. Elle possède une partie de chaîne de requête complexe ou un chemin d’accès, et son type de réponse MIME est text/html
, text/xml
ou text/javascript
.
Au cours de ce processus, il est important de parcourir différentes zones de votre site web, avec différentes catégories et types de produits. C’est pourquoi les URL d’aperçu rapide peuvent avoir des parties communes pour une catégorie de site web donnée, mais ne changent que si vous visitez une autre zone du site web.
Dans le cas le plus simple, la seule partie variable dans l’URL de l’aperçu rapide est le SKU du produit. Dans ce cas, la valeur de la SKU est la seule donnée dont vous avez besoin pour ajouter des zones réactives ou des zones cliquables à l’image de bannière.
Toutefois, dans des cas complexes, l’URL d’aperçu rapide comporte différents éléments variables en plus du SKU. Certains de ces éléments incluent l’ID de la catégorie, le code couleur, le code de taille, etc. Dans ce cas, chaque élément est une variable distincte dans la définition des données de zone réactive ou cliquable dans la fonction de bannière de carrousel.
Consultez les exemples d’URL d’aperçu rapide ci-dessous et les variables de zone réactive et de zone cliquable obtenues :
Chargement des bannières d’image uploading-image-banners
Si vous avez déjà chargé les images à utiliser, passez à l’étape suivante, Création d’ensembles de carrousels. Les images utilisées dans le carrousel doivent être chargées une fois que Dynamic Media a été activé.
Pour charger des bannières d’image, voir Chargement de ressources.
Création d’ensembles de carrousels creating-carousel-sets
Pour créer des ensembles de carrousels :
-
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 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 sélectionnant Retour. 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 sélectionnant 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 préréglage, à 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. Dans la barre d’outils, sélectionnez Supprimer la diapositive. Pour déplacer une diapositive, sélectionnez l’icône Réorganiser et déplacez 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 si vous souhaitez ajuster l’affichage de la bannière de 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.
note note NOTE Pour les bannières de carrousel, vous pouvez ajuster les éléments suivants : - 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 peuvent faire alterner les bannières en sélectionnant 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 laquelle vous souhaitez fonder ce paramètre. Sans cela, lorsque vous commencerez à modifier le paramètre prédéfini de visionneuse, vous perdrez toutes les modifications si vous changez de paramètre prédéfini…
Vous pouvez également prévisualiser l’aspect de la bannière de carrousel. Voir (Facultatif) Aperçu des bannières de carrousel.
-
Lorsque vous avez terminé, sélectionnez Enregistrer.
Ajout de zones réactives ou cliquables dans une bannière d’image adding-hotspots-or-image-maps-to-an-image-banner
Vous pouvez ajouter des zones réactives ou des zones cliquables à une bannière à l’aide de l’éditeur d’ensemble de carrousel.
Lorsque vous ajoutez des zones réactives ou cliquables, vous pouvez les définir comme un écran pop-up d’aperçu rapide, un lien hypertexte ou un fragment d’expérience.
Voir Fragment d’expérience.
À mesure que vous ajoutez des zones réactives ou des zones cliquables à une image, pensez à enregistrer votre travail. Les options Annuler et Rétablir, proches du coin supérieur droit de la page, sont prises en charge au cours de la session de création/modification actuelle.
Lorsque vous avez fini de créer votre bannière de carrousel, vous pouvez utiliser l’aperçu pour afficher une représentation de votre bannière de carrousel telle qu’elle s’affiche pour les clients.
Voir (Facultatif) Aperçu des bannières de carrousel.
Pour ajouter des zones réactives ou cliquables à une bannière d’image :
-
À 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, faites glisser 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. Vous pouvez également utiliser les touches fléchées du clavier pour contrôler la position d’une zone réactive sélectionnée. Ajoutez plus de zones réactives ou cliquables si nécessaire.
Pour supprimer une zone réactive ou une zone cliquable, sélectionnez l’onglet Actions. Sous l’en-tête Cartes et zone réactives, dans la liste déroulante 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 un client Experience Manager Sites , sélectionnez l’icône de sélecteur de produit (loupe) afin d’afficher la page Sélectionner un produit. Pour revenir à l’éditeur de bannières de carrousel, sélectionnez le produit que vous souhaitez utiliser, puis sélectionnez la case à cocher située dans l’angle supérieur droit de la page.
-
Si vous n’êtes pas un client Experience Manager Sites :
-
Définissez des variables. Voir Identification des variables des zones réactives.
-
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 SKU saisie renseigne automatiquement la partie variable du modèle d’aperçu rapide. Le système sait désormais associer la zone réactive sélectionnée avec l’aperçu rapide d’un SKU en particulier.
-
(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 autonome, dans la zone 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. Pour revenir à la page de gestion des zones réactives, sélectionnez le fragment d’expérience à utiliser, puis sélectionnez Sélectionner dans le coin supérieur droit de la page.
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, vous pouvez utiliser ou créer 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’aspect de la bannière de carrousel. Voir (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 Sites Experience Manager, ajoutez l’ensemble de carrousel directement à votre page web.
Voir Publication de ressources.
Voir Ajout d’un ensemble de carrousel à la page de destination de votre site web.
Modification d‘ensembles de carrousels editing-carousel-sets
Vous pouvez effectuer diverses tâches de modification sur les visionneuses de carrousel, telles que :
- Ajouter des diapositives à l’ensemble de carrousel. Voir également Utilisation de sélecteurs.
- Réorganiser les diapositives dans l’ensemble de carrousel.
- Supprimer des ressources de l’ensemble de carrousel.
- Appliquer des paramètres prédéfinis de visionneuse.
- Supprimer l’ensemble de carrousel.
- Ajouter ou modifier des zones réactives et des zones cliquables. Voir également Utilisation de sélecteurs.
Pour modifier des ensembles de carrousels :
-
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 représentant une coche), puis, sur la barre d’outils, sélectionnez Modifier.
-
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. Accédez à la ressource que vous souhaitez ajouter à cette diapositive, puis sélectionnez la case à cocher.
- 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 des zones réactives ou des zones cliquables, sélectionnez une zone réactive ou une zone cliquable dans la diapositive concernée. Sous l’onglet Actions, apportez vos modifications.
- 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.
note note NOTE Si vous modifiez des images interactives avec des zones réactives et que vous recadrez l’image, les zones réactives sont supprimées.
(Facultatif) Aperçu des bannières de carrousel optional-previewing-carousel-banners
Vous pouvez utiliser l’aperçu pour afficher la bannière de carrousel à l’intention des clients. L’utilisation de la Prévisualisation vous permet également de tester les zones réactives et cliquables de la bannière du carrousel afin de vous assurer qu’elles se comportent comme prévu.
Lorsque vous êtes satisfait de la bannière de carrousel, vous pouvez la publier.
Voir Incorporation de la visionneuse de vidéos ou d’images dans une page web.
Consultez Liaison d’URL à une application web. 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.
Voir Ajout de ressources Dynamic Media aux pages.
Vous pouvez afficher un aperçu des bannières de carrousel dans l’éditeur de carrousel (méthode recommandée) ou dans la liste Visionneuses.
Pour prévisualiser de façon facultative les bannières de carrousel :
-
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.
-
Pour tester les actions associées, sélectionnez les zones réactives ou cliquables de l’image.
Pour afficher un aperçu des bannières de carrousel à partir de la liste Visionneuses :
- Dans Ressources, accédez à une bannière de carrousel que vous avez créée et sélectionnez pour l’afficher.
- Dans le coin supérieur gauche de la page Aperçu, sélectionnez l’icône Contenu.
- Dans la liste Visionneuses du panneau situé du côté gauche de la page, sélectionnez le nom du paramètre prédéfini de visionneuse de bannière de carrousel que vous souhaitez utiliser.
- Pour tester les actions associées, sélectionnez les zones réactives ou cliquables de l’image.
Publiez les bannières de carrousel publishing-carousel-banners
Pour utiliser le carrousel, vous devez le publier. La publication d’un ensemble de carrousel active l’URL et le code intégré. Elle publie également le carrousel sur le cloud Dynamic Media intégré au CDN pour un débit évolutif et performant.
Voir Publication de ressources Dynamic Media pour savoir comment publier des bannières de carrousel.
Ajoutez une bannière de carrousel à votre page web. adding-a-carousel-banner-to-your-website-page
Après avoir téléchargé des images de bannière pour créer un carrousel, ajouté des zones réactives ou des zones cliquables, ou les deux, à la bannière. Publié l’ensemble de carrousel. Vous êtes maintenant prêt à l’ajouter à votre page de site web existante.
Cependant, si vous êtes un client Experience Manager Assets autonome, vous pouvez ajouter manuellement la bannière du carrousel à la page de destination de votre site web.
-
Copiez le code intégré de l’ensemble de carrousel.
Voir 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 s’adapte donc automatiquement à la zone d’incorporation de la page.
Intégration de la bannière de carrousel à un aperçu rapide existant integrating-the-carousel-banner-with-an-existing-quickview
Remarque : Cette étape ne vous concerne que si vous êtes un client Experience Manager Assets autonome.
La dernière étape de cette procédure consiste à intégrer la bannière de carrousel à la mise en œuvre d’un aperçu rapide existant à votre site web. Chaque mise en œuvre de l’aperçu rapide est unique, et une approche spécifique est nécessaire, ce qui implique généralement l’assistance d’une personne spécialisée en systèmes front-end.
L’implémentation d’aperçus rapides existante représente normalement une chaîne d’actions interdépendantes qui se produisent sur la page web dans l’ordre suivant :
- Un utilisateur déclenche un élément dans l’interface utilisateur de votre site web.
- Le code en front-end obtient une URL d’aperçu rapide basée sur l’élément d’interface utilisateur qui a été déclenché à l’étape 1.
- Le code en front-end envoie une demande Ajax en utilisant l’URL obtenue à l’étape 2.
- La logique du serveur principal renvoie les données ou le contenu de l’aperçu rapide correspondant au code en front-end.
- Le code en front-end charge les données ou le contenu de l’aperçu rapide.
- Facultativement, le code en front-end convertit les données chargées de l’aperçu rapide en une représentation HTML.
- Le code frontal affiche une boîte de dialogue ou un panneau modal et affiche le contenu de l’HTML à l’écran pour l’utilisateur.
Ces appels ne représentent pas des appels d’API publics indépendants qui peuvent être appelés par la logique de page web à partir d’une étape arbitraire. Il s’agit plutôt d’un appel chaîné où chaque étape suivante est masquée dans la dernière phase (rappel) de l’étape précédente.
Alors que la bannière de carrousel remplace l’étape 1, et partiellement l’étape 2, lorsqu’un utilisateur sélectionne une zone réactive ou une zone cliquable, cette interaction est gérée par la visionneuse. La visionneuse renvoie un événement à la page web qui contient toutes les données des zones réactives ou des zones cliquables ajoutées précédemment.
Dans ce type de gestionnaire d’événements, le code en front-end effectue les opérations suivantes :
- Écoute un événement émis par la bannière de carrousel.
- Crée une URL d’aperçu rapide d’après les données des zones réactives ou des zones cliquables.
- Déclenche le processus de chargement de l’aperçu rapide depuis le serveur principal et en effectue le rendu à l’écran.
Un gestionnaire d’événements prêt à l’emploi et commenté est déjà en place pour le code intégré renvoyé par Experience Manager Assets.
Il suffit donc de supprimer les commentaires du code et de remplacer le corps factice du gestionnaire par le code spécifique à la page web.
La création de l’URL d’aperçu rapide est l’inverse de l’identification des variables de zone réactive et de zone cliquable décrite précédemment.
Voir Identification des variables de zone réactive et de zone cliquable.
La dernière étape permettant de déclencher l’URL d’aperçu rapide et d’activer le panneau d’aperçu rapide requiert très probablement l’assistance d’une personne spécialisée en systèmes front-end issue de votre équipe informatique. Ce type d’expert sait comment déclencher avec précision l’implémentation d’aperçus rapides à partir de l’étape appropriée, en disposant d’une URL d’aperçu rapide prête à l’emploi.
Création de fenêtres pop-up personnalisées à l’aide de l’aperçu rapide using-quickviews-to-create-custom-pop-ups
Voir Création de fenêtres pop-up personnalisées à l’aide de l’aperçu rapide.