Carousel-banners

Met carrouselbanners kunnen marketers de conversie stimuleren door eenvoudig interactieve, draaiende promotionele inhoud te maken en deze op elk scherm te leveren.

Het maken en wijzigen van inhoud in promotiebanners kan tijdrovend zijn, waardoor u minder snel nieuwe inhoud kunt publiceren of deze doelgerichter kunt maken. Met carrouselbanners kunt u snel roterende banners maken of wijzigen, interactiviteit toevoegen, zoals hotspots die aan productdetails of verwante bronnen zijn gekoppeld, en deze op elk scherm aanbieden - zodat u nieuwe promotionele inhoud sneller op de markt kunt brengen.

Carrouselbanners worden aangeduid door een banner met het woord CAROUSELSET:

chlimage_1-438

Op uw website kan een carrouselbanner er als volgt uitzien:

chlimage_1-439

Hier kunt u door de afbeeldingen navigeren (door op de getallen te klikken). Bovendien worden de dia's automatisch geroteerd op basis van een tijdsinterval dat u kunt aanpassen. Afbeeldingen die u in de carrouselbanner toevoegt, ondersteunen zowel hotspots als afbeeldingen met hyperlinks, waar gebruikers op een hyperlink kunnen tikken of naar een hyperlink kunnen gaan of een Quickview-venster kunnen openen.

In dit voorbeeld heeft een gebruiker op een afbeelding met hyperlinks getikt of erop geklikt en heeft hij het venster QuickView voor handschoenen geopend:

chlimage_1-440

Bekijk een 10 minuten en 33 seconden analyse op hoe de carrouselbanners worden gecreeerd. U leert ook hoe u carrouselbanners kunt voorvertonen, bewerken en afleveren.

OPMERKING

Niet-administratieve gebruikers moeten aan dam-users groep worden toegevoegd om carrouselbanners te kunnen tot stand brengen of uitgeven. Als u problemen ondervindt bij het maken of bewerken van bestanden, raadpleegt u uw systeembeheerder die u kan toevoegen aan de dam-users-groep.

Zo kunt u snel aan de slag:

  1. Identificeer hotspot en beeldkaartvariabelen (slechts voor klanten die AEM Assets + Dynamic Media gebruiken)

    Begin door dynamische variabelen te identificeren die door de bestaande implementatie van QuickView worden gebruikt zodat u hotspots en beeldkaartgegevens behoorlijk tijdens het proces van de de bannerverwezenlijking van de carrousel in AEM Assets kunt ingaan.

    OPMERKING

    Als u een AEM Sites- of e-commerceklanten bent, kunt u de ingebouwde functie gebruiken om naar productpagina's te navigeren en de bestaande skus in de productcatalogus op te zoeken. U hoeft niet handmatig hotspot- of afbeeldingskaartvariabelen in te voeren. Zie informatie over eCommerce instellen.

    Als u een AEM Assets- en Dynamic Media-klant bent, voert u handmatig gegevens in voor hotspots en afbeeldingen met hyperlinks. Vervolgens integreert u de gepubliceerde URL of de Embed-code met uw externe contentbeheersysteem.

  2. Optioneel: Maak zo nodig een viewervoorinstelling voor een carrouselset.

    Als beheerder kunt u het gedrag en de weergave van de carrousel aanpassen door uw eigen voorinstelling voor de Carousel-viewer te maken. Het belangrijkste voordeel is dat u deze aangepaste viewer-voorinstelling kunt hergebruiken voor meerdere carrousels. Gebruikers kunnen echter ook het gedrag en de weergave van de carrousel rechtstreeks aanpassen tijdens het ontwerpen van de carrousel. Dit is de voorkeursaanpak wanneer u een specifiek ontwerp voor een bepaalde carrousel wilt.

  3. Upload een afbeeldingsbanner.

    Upload afbeeldingsbanners die u interactief wilt maken.

  4. Maak een Carousel-set.

    In Carousels Sets navigeert de gebruiker door bannerafbeeldingen en tikt hij op hotspots of afbeeldingen met hyperlinks om toegang te krijgen tot relevante inhoud.

    Tik op Create en selecteer vervolgens Carousel Sets om een carrouselset te maken in Assets. Voeg assets toe aan dia's en tik op Save. U kunt de weergave en het gedrag van de carrousel ook rechtstreeks in de editor bewerken.

  5. Voeg hotspots of afbeeldingen met hyperlinks toe aan een afbeeldingsbanner.

    Voeg een of meer hotspots of afbeeldingen met hyperlinks toe aan een afbeeldingsbanner en koppel deze aan een actie zoals een koppeling, een Snelle weergave of een Experience-fragment. Nadat u hotspots of afbeeldingen met hyperlinks hebt toegevoegd, kunt u deze taak voltooien door de carrouselset te publiceren. Met Publiceren maakt u de insluitcode die u kunt gebruiken om de bestemmingspagina van uw website te kopiëren en toe te passen.

    Zie (Optioneel) Een voorvertoning weergeven van carrouselbanners - Optioneel. U kunt desgewenst een voorstelling van de carrouselset weergeven en de interactiviteit ervan testen.

  6. Carrouselbanners publiceren.

    U publiceert een Carousel-set op dezelfde manier als elk ander element. Navigeer in Elementen naar de Carousel-set en selecteer deze en tik op Publish. Wanneer u een Carousel-set publiceert, worden de URL en de insluitreeks geactiveerd.

  7. Voer een van de volgende handelingen uit:

Zie Carrouselsets bewerken als u carrouselsets moet bewerken. Daarnaast kunt u Carousel-seteigenschappen weergeven en bewerken.

Variabelen hotspot en afbeelding met hyperlinks identificeren

Begin door dynamische variabelen te identificeren die door de bestaande implementatie van QuickView worden gebruikt zodat u hotspots of beeldkaartgegevens behoorlijk tijdens het proces van de carrouselreeks creatie in AEM Assets kunt ingaan.

Wanneer u hotspots of afbeeldingen met hyperlinks toevoegt aan een bannerafbeelding in AEM Assets, moet u een SKU en optionele aanvullende variabelen toewijzen aan elke hotspot of afbeelding met hyperlinks. Dergelijke variabelen worden later gebruikt om hotspots of afbeeldingen met hyperlinks te laten overeenkomen met Quickview-inhoud.

OPMERKING

Als u een AEM Sites en/of AEM ecommerce klant bent, sla deze stap over. U hoeft de variabelen van hotspot of afbeeldingen met hyperlinks niet handmatig te identificeren; u kunt de integratie met Ecommerce voor productintegratie gebruiken. Zie informatie over eCommerce instellen. Daarnaast kunt u de component Interactive gebruiken en toevoegen aan uw webpagina.

Als u een AEM Assets- of Media-klant bent, publiceert u de URL- of insluitcode en integreert u deze vervolgens met het contentbeheersysteem van derden en identificeert u handmatig hotspots en afbeeldingen met hyperlinks.

Het is belangrijk om het aantal en het type variabelen correct te identificeren om met hotspot of beeldkaartgegevens te associëren. Op elke hotspot of afbeeldingskaart die aan een bannerafbeelding wordt toegevoegd, moet voldoende informatie staan om het product ondubbelzinnig te identificeren in het bestaande back-endsysteem. Tegelijkertijd mag elke hotspot of afbeelding met hyperlinks niet meer gegevens bevatten dan nodig is. De reden hiervoor is dat het gegevensinvoerproces hierdoor te complex en voortdurend hotspot- of imagekaartbeheer wordt.

Er zijn verschillende manieren om een set variabelen te identificeren die moet worden gebruikt voor hotspot- of afbeeldingskaartgegevens.

Soms is het voldoende om IT-specialisten te raadplegen die verantwoordelijk zijn voor de bestaande QuickView-implementatie, omdat ze waarschijnlijk zullen weten wat de minimale gegevensset is die nodig is om QuickView in het systeem te identificeren. In de meeste gevallen is het echter ook mogelijk om eenvoudig het bestaande gedrag van de front-end code te analyseren.

De meeste implementaties van de Snelle mening gebruiken het volgende paradigma:

  • De gebruiker activeert een gebruikersinterface-element op de website. Als u bijvoorbeeld op een knop Quick View klikt.
  • De website verzendt een Ajax-aanvraag naar de achterkant om de Quickview-gegevens of -inhoud te laden, indien nodig.
  • De Quickview-gegevens worden omgezet in de inhoud ter voorbereiding op de weergave op de webpagina.
  • Tot slot geeft de front-end code dergelijke inhoud visueel op het scherm terug.

Vervolgens kunt u verschillende delen van de bestaande website bezoeken waar de functie QuickView is geïmplementeerd, de QuickView activeren en de Ajax-URL vastleggen die via een webpagina is verzonden om de gegevens of inhoud van de QuickView-weergave te laden.

Normaal is er geen behoefte aan u om het even welke gespecialiseerde het zuiveren hulpmiddelen te gebruiken. Moderne webbrowsers beschikken over webinspecteurs die hun werk naar behoren doen. Hieronder volgen enkele voorbeelden van webbrowsers met webcontroles:

  • Om alle uitgaande HTTP- verzoeken in Google Chrome te zien, druk F12 (Vensters) of Command-Option-I (MAC) om het paneel van de Hulpmiddelen van de Ontwikkelaar te openen, en dan Network tabel te tikken.
  • In Firefox kunt u de Firebug-plug-in activeren door op F12 (Windows) of Command-Option-I (Mac) te drukken en het tabblad Net te gebruiken. U kunt ook het ingebouwde paneel en het bijbehorende tabblad Netwerk gebruiken.

Wanneer netwerkcontrole in browser wordt aangezet, teweeg de Snelle mening op de pagina.

Zoek nu de URL van Quickview Ajax in het netwerklogboek en kopieer de geregistreerde URL voor toekomstige analyse. In de meeste gevallen wanneer u de Quickview teweegbrengt zijn er talrijke verzoeken die naar de server worden verzonden. De URL van Quickview Ajax is doorgaans een van de eerste in de lijst. Het heeft of een complex gedeelte van het vraagkoord of weg, en zijn reactieMIME type of text/html, text/xml, of text/javascript is.

Tijdens dit proces is het belangrijk om verschillende delen van uw website te bezoeken, met verschillende productcategorieën en typen. De reden hiervoor is dat URL's in de Snelle weergave onderdelen kunnen bevatten die algemeen gelden voor een bepaalde categorie websites, maar deze alleen wijzigen als u een ander gedeelte van de website bezoekt.

In het eenvoudigste geval, is het enige veranderlijke deel in Quickview URL productSKU. In dit geval is de SKU-waarde het enige gegevensstuk dat u nodig hebt om hotspots of afbeeldingen met hyperlinks toe te voegen aan de bannerafbeelding.

In complexe gevallen heeft de URL van de Snelle weergave echter naast de SKU ook verschillende elementen, zoals categorie-id, kleurcode, code voor grootte enzovoort. In dergelijke gevallen is elk element een afzonderlijke variabele in de definitie van hotspot- of afbeeldingskaart in de bannerfunctie carrousel.

Bekijk de volgende voorbeelden van URL's in QuickView en de resulterende hotspot- of afbeeldingskaartvariabelen:

Enige SKU, die in het vraagkoord wordt gevonden.

De opgenomen URL's van de Snelle weergave bevatten het volgende:

  • https://server/json?productId=866558&source=100

  • https://server/json?productId=1196184&source=100

  • https://server/json?productId=1081492&source=100

  • https://server/json?productId=1898294&source=100

Het enige variabele deel in URL is de waarde van productId= de parameter van het vraagkoord, en het is duidelijk een waarde SKU. Daarom hebben onze hotspots of afbeeldingen met hyperlinks alleen SKU-velden nodig die zijn gevuld met waarden zoals 866558, 1196184, 1081492, 1898294.

Eén SKU, gevonden in het URL-pad.

De opgenomen URL's van de Snelle weergave bevatten het volgende:

  • https://server/product/6422350843

  • https://server/product/1607745002

  • https://server/product/0086724882

Het variabele gedeelte bevindt zich in het laatste gedeelte van het pad en wordt de SKU-waarde van de hotspots/afbeeldingstoewijzingen:6422350843, 1607745002, 0086724882.

SKU en categorie-id in de queryreeks.

De opgenomen URL's van de Snelle weergave bevatten het volgende:

  • https://server/quickView/product/?category=1100004&prodId=305466

  • https://server/quickView/product/?category=1100004&prodId=310181

  • https://server/quickView/product/?category=1740148&prodId=308706

In dit geval bevat de URL twee verschillende onderdelen. De SKU wordt opgeslagen in de prodId parameter en categorie ID wordt opgeslagen in category=parameter.

De definities van hotspot/afbeelding met hyperlinks zijn dus paren. Dat wil zeggen, een SKU-waarde en een extra variabele met de naam categoryId. De resulterende paren zijn:

  • SKU is 305466 en categoryId is 1100004.

  • SKU is 310181 en categoryId is 1100004.

  • SKU is 308706 en categoryId is 1740148.

Beeldbanners uploaden

Als u de afbeeldingen die u wilt gebruiken al hebt geüpload, gaat u naar de volgende stap Carousel-sets maken. Houd er rekening mee dat de afbeeldingen die in de carrousel worden gebruikt, moeten worden geüpload nadat Dynamic Media is ingeschakeld.

Zie Elementen uploaden om afbeeldingsbanners te uploaden.

OPMERKING

Gebruikers zonder beheerdersrechten moeten worden toegevoegd aan de groep dam-users om carrouselbanners te kunnen maken of bewerken. Als u problemen ondervindt bij het maken of bewerken van bestanden, raadpleegt u uw systeembeheerder die u kan toevoegen aan de dam-users-groep.

Een Carousel-set maken:

  1. Navigeer in Elementen naar de map waar u de Carousel-set wilt maken en tik Create > Carousel Set.

  2. Tik op de pagina Carousel Banner Editor op Tap to open Asset Selector om de afbeelding voor de eerste dia te selecteren.

    Voer op de pagina Carousel Banner Editor een van de volgende handelingen uit:

    • Tik in de linkerbovenhoek van de pagina op Add Slide pictogram.
    • Tik in het midden van de pagina op Tap to open Asset Selector.

    Tik om assets te selecteren die u in de carrouselset wilt opnemen. Geselecteerde assets hebben een vinkje. Tik op Select in de rechterbovenhoek van de pagina als u klaar bent.

    Met de assetkiezer kunt u naar assets zoeken door een trefwoord te typen en op Return te tikken. U kunt ook filters toepassen om de zoekresultaten te verfijnen. U kunt filteren op pad, verzameling, bestandstype en tag. Selecteer het filter en tik op het pictogram Filter op de werkbalk. Wijzig de weergave door op het pictogram View te tikken en Column View, Card View of List View te selecteren.

    Zie Werken met kiezers voor meer informatie.

  3. Ga door met het toevoegen van dia's totdat u alle afbeeldingen hebt toegevoegd die u wilt roteren in de Carousel-set.

  4. (Optioneel) Voer een van de volgende handelingen uit:

    • Sleep indien nodig dia's om de volgorde van de afbeeldingen in de lijst met sets te wijzigen.
    • Als u een afbeelding wilt verwijderen, selecteert u de afbeelding en tikt u op Delete Slide op de werkbalk.
    • Als u een voorinstelling wilt toepassen, klikt u in de rechterbovenhoek van de pagina op de vervolgkeuzelijst met voorinstellingen en selecteert u vervolgens een voorinstelling die u tegelijk op de set wilt toepassen.

    Tik op de dia en tik Delete Slide in de werkbalk om een dia te verwijderen. Als u een dia wilt verplaatsen, tikt u op het invoegpictogram en houdt u de muisknop ingedrukt en verplaatst u de gewenste locatie.

  5. Nadat u de afbeeldingen in dia's hebt toegevoegd, kunt u een hotspot, afbeelding met hyperlinks of beide toevoegen aan uw afbeelding. Zie hotspots of afbeeldingen met hyperlinks toevoegen.

  6. U kunt het visuele ontwerp en het gedrag van carrouselsets wijzigen door op de tabbladen Gedrag en Weergave te tikken of door aanpassingen aan te brengen in de vormgeving van de carrouselbanner of in de manier waarop bepaalde componenten zich gedragen. Zie Voorinstellingen voor viewers beheren voor meer informatie over het gebruik van de viewer-editor.

    OPMERKING

    Voor carrouselbanners kunt u het volgende aanpassen:

    • Duur waarin een afbeelding wordt weergegeven. Standaard wordt elke afbeelding 9 seconden weergegeven.
    • Animatie. Elke dia-overgang is standaard vervagen. U kunt dat wijzigen in een dia-overgang.
    • Stijl van de knoppen. Gebruikers kunnen door de banners roteren door op elke punt of elk getal te tikken. U kunt wijzigen waar de knoppen van de ingestelde indicator worden weergegeven (en of ze numeriek of gestippeld zijn) en hoe groot ze zijn.
    • Wijzig de markeerstijl van een afbeeldingskaart of het pictogram dat voor hotspots wordt gebruikt.
    • Voordat u een viewervoorinstelling bewerkt, kiest u de stijl waarvan u de voorinstelling wilt baseren. Als u dit niet doet en u de voorinstelling van de viewer gaat bewerken, gaan alle wijzigingen verloren als u een andere voorinstelling kiest.

    U kunt ook een voorvertoning weergeven van hoe de carrouselbanner eruitziet. Zie (Optioneel) Een voorvertoning weergeven van carrouselbanners.

  7. Tik Save als u klaar bent.

Hotspots of afbeeldingen met hyperlinks toevoegen aan een afbeeldingsbanner

Met de Carousel-set-editor kunt u hotspots of afbeeldingen met hyperlinks toevoegen aan een banner.

Wanneer u hotspots of afbeeldingen met hyperlinks toevoegt, kunt u deze definiëren als een pop-upweergave in QuickView, als een hyperlink of als een Experience-fragment.

Zie Fragmenten ervaren.

OPMERKING

Houd er rekening mee dat de gereedschappen voor het delen van sociale media in Carousel Banner niet worden ondersteund wanneer u de viewer insluit in een Experience Fragment. U kunt dit omzeilen door voorinstellingen voor viewers te gebruiken of te maken die geen gereedschappen voor het delen van sociale media hebben. Met dergelijke voorinstellingen voor viewers kunt u de voorinstelling met succes insluiten in Experience Fragments.

Terwijl u hotspots of afbeeldingen met hyperlinks toevoegt aan een afbeelding, vergeet dan niet uw werk op te slaan. Undo en Redo opties worden in de rechterbovenhoek van de pagina ondersteund tijdens de huidige sessie voor maken en bewerken.

Wanneer u klaar bent met het maken van uw carrouselbanner, kunt u optioneel Preview gebruiken om een voorstelling te zien van hoe uw carrouselbanner eruit zal zien voor klanten.

Zie (Optioneel) Een voorvertoning weergeven van carrouselbanners.

OPMERKING

Wanneer u hotspots toevoegt aan een afbeelding in een Interactieve afbeelding of een carrouselbanner, worden de hotspotgegevens opgeslagen op dezelfde metagegevenslocatie, relatief ten opzichte van de locatie van de afbeelding, ongeacht of het een interactieve afbeelding of een carrouselbanner betreft. Deze functionaliteit houdt in dat u in elke viewer eenvoudig dezelfde afbeelding opnieuw kunt gebruiken, samen met de gedefinieerde hotspotgegevens.

Houd er echter rekening mee dat Carousel Banners afbeeldingen met hyperlinks ondersteunen op afbeeldingen die ook hotspots kunnen bevatten. een interactieve afbeelding niet. Houd hier rekening mee als u een interactieve afbeelding of Carousel Banner wilt maken die dezelfde afbeelding gebruikt. U kunt interactieve afbeeldingen en carrouselbanners maken met afzonderlijke kopieën van dezelfde afbeelding.

OPMERKING

Als u interactieve afbeeldingen met hotspots bewerkt en de afbeelding bijsnijdt, worden de hotspots verwijderd.

Hotspots toevoegen aan een afbeeldingsbanner:

  1. Navigeer vanuit Middelen naar de carrouselset die u interactief wilt maken.

  2. Selecteer de carrouselset en tik Edit.

  3. Selecteer in de Carousel Viewer Editor de dia die u interactief wilt maken.

  4. Tik in de linkerbovenhoek van de pagina op Hotspot of Image Map.

  5. Voer een van de volgende handelingen uit:

    • Voor hotspots: Tik in de afbeelding op een locatie waar u de hotspot wilt weergeven.
    • Voor afbeeldingen met hyperlinks: Tik op de afbeelding en sleep vervolgens van linksboven naar rechtsonder om het gebied met de afbeeldingskaart te maken. U kunt de grootte van de afbeelding met hyperlinks aanpassen door de hoeken te slepen.

    Sleep indien nodig de hotspot of de afbeelding met hyperlinks naar een nieuwe locatie. Voeg desgewenst extra hotspots of afbeeldingen met hyperlinks toe.

    Tik op het tabblad Actions om een hotspot of afbeelding met hyperlinks te verwijderen. Selecteer onder de kop Maps & Hotspots in het vervolgkeuzemenu Selected Type de naam van de hotspot of de afbeelding met hyperlinks die u wilt verwijderen. Tik op het pictogram Trash naast het menu en tik vervolgens op Delete.

  6. Typ in het tekstveld Naam de naam van de hotspot of de afbeelding met hyperlinks. Deze naam wordt ook weergegeven in de vervolgkeuzelijst Maps & Hotspot. Als u een naam opgeeft, kunt u de hotspot of de afbeelding met hyperlinks gemakkelijk herkennen als u er later wijzigingen in wilt aanbrengen.

  7. Voer op het tabblad Actions een van de volgende handelingen uit:

    • Tik op Quickview.

      • Als u een AEM Sites- en Ecommerce-klant bent, tikt u op het Product Picker-pictogram (vergrootglas) om de Select Product-pagina te openen. Tik op het product dat u wilt gebruiken en tik vervolgens op het vinkje in de rechterbovenhoek van de pagina om terug te keren naar Carousel Banner Editor.

      • Als u geen klant van AEM Sites of van de Handel bent

        • Zie Hotspot-variabelen identificeren aangezien u deze variabelen wilt definiëren.
        • Voer vervolgens handmatig de SKU-waarde in. Typ in het tekstveld SKU Value de SKU (Stock Keeping Unit) van het product. Dit is een unieke id voor elk afzonderlijk product of elke service die u aanbiedt. De ingegaan waarde van SKU bevolkt automatisch het veranderlijke gedeelte van het malplaatje van de Snelle mening zodat het systeem weet om geëtteerde hotspot met een bepaalde Snelle mening van SKU te associëren.
        • (Optioneel) Tik op Add Generic Variable als er andere variabelen in de Snelle weergave zijn die u nodig hebt om een product nader te identificeren. Geef in het tekstveld een extra variabele op. category=Mens is bijvoorbeeld een toegevoegde variabele.
        • Zie Werken met kiezers voor meer informatie.
    • Tik op Hyperlink.

      • Als u een AEM Sites-klant bent, tikt u op het pictogram Site Selector (map) om naar een URL te navigeren.

        OPMERKING

        De op URL gebaseerde methode van het verbinden is niet mogelijk als uw interactieve inhoud verbindingen met relatieve URLs, in het bijzonder verbindingen met AEM Sites pagina's heeft.

      • Als u een zelfstandige klant bent, geeft u in het tekstveld HREF het volledige URL-pad naar een gekoppelde webpagina op.

        Zorg ervoor dat u opgeeft of u de koppeling wilt openen in een nieuw browsertabblad (aanbevolen standaard) of op hetzelfde tabblad.

        Zie Werken met kiezers voor meer informatie.

    • Tik op Experience Fragment.

      • Als u een AEM Sites-klant bent, tikt u op het Search-pictogram (vergrootglas) om de pagina Experience Fragment te openen. Tik op het ervaringsfragment dat u wilt gebruiken en tik vervolgens op Select in de rechterbovenhoek van de pagina om terug te keren naar de pagina Hotspot-beheer.

        Zie Fragmenten ervaren.

        Opmerking: Houd er rekening mee dat de gereedschappen voor het delen van sociale media in Carousel Banner niet worden ondersteund wanneer u de viewer insluit in een Experience Fragment. U kunt dit omzeilen door voorinstellingen voor viewers te gebruiken of te maken die geen gereedschappen voor het delen van sociale media hebben. Met dergelijke voorinstellingen voor viewers kunt u de voorinstelling met succes insluiten in Experience Fragments.

      • Geef de breedte en hoogte van het ervaringsfragment op zoals dit wordt weergegeven op de banner.

    experience_fragment-carouselbanner

    U kunt ook een voorvertoning weergeven van hoe de carrouselbanner eruitziet. Zie (Optioneel) Een voorvertoning weergeven van carrouselbanners.

  8. Tik op Save.

  9. Publiceer de carrouselset. Bij het publiceren wordt de insluitcode of URL gemaakt die u op uw websitepagina kunt gebruiken. Als u een AEM Sites-klant bent, kunt u de carrousel rechtstreeks aan uw webpagina toevoegen.

    Zie Elementen publiceren.

    Zie Een carrousel toevoegen die is ingesteld op de bestemmingspagina van uw website

OPMERKING

Gebruikers zonder beheerdersrechten moeten worden toegevoegd aan de groep dam-users om carrouselbanners te kunnen maken of bewerken. Als u problemen ondervindt bij het maken of bewerken van bestanden, raadpleegt u uw systeembeheerder die u kan toevoegen aan de groep dam-users.

U kunt diverse bewerkingstaken uitvoeren op Carousel Sets, zoals:

  • Voeg dia's toe aan een Carousel-set. Zie ook Werken met kiezers.
  • Wijzig de volgorde van de dia's in de carrousel-set.
  • Elementen in de Carousel-set verwijderen.
  • Een viewervoorinstelling toepassen.
  • Verwijder de carrouselset.
  • Voeg hotspots en afbeeldingen met hyperlinks toe of bewerk deze. Zie ook Werken met kiezers.

Houd er rekening mee dat als u interactieve afbeeldingen met hotspots bewerkt en de afbeelding bijsnijdt, de hotspots worden verwijderd.

Een carrouselset bewerken:

  1. Voer een van de volgende handelingen uit:

    • Houd de cursor boven een Carousel-set element en tik op Edit (potloodpictogram).
    • Houd de cursor boven een Carousel-set-element, tik Select (vinkpictogram) en tik Edit op de werkbalk.
    • Tik op een Carousel-set-element en tik vervolgens in de linkerbovenhoek van de pagina Edit (potloodpictogram).
  2. Voer een van de volgende handelingen uit om de Carousel-set te bewerken:

    • Als u een dia wilt toevoegen, tikt u op het pictogram Add Slide en navigeert u naar het element dat u aan die dia wilt toevoegen. Tik vervolgens op het vinkje.
    • Als u de volgorde van de dia's wilt wijzigen, sleept u een dia naar een nieuwe locatie (selecteer het pictogram voor herschikken om items te verplaatsen).
    • Tik op de pictogrammen voor hotspots of afbeeldingen met hyperlinks en zie hotspots en afbeeldingen met hyperlinks toevoegen om een hotspot of afbeelding met hyperlinks toe te voegen.
    • Tik op het tabblad Appearance of Behavior en stel de gewenste opties in om de weergave of het gedrag van de carrouselset te bewerken.
    • Als u hotspots of afbeeldingen met hyperlinks wilt bewerken, selecteert u op de juiste dia een hotspot of afbeelding met hyperlinks en brengt u de gewenste wijzigingen aan onder het tabblad Actions.
    • Als u een dia wilt verwijderen, selecteert u de dia en tikt u op Delete Slide op de werkbalk.
    • Tik op de vervolgkeuzelijst met voorinstellingen en selecteer een voorinstelling voor de viewer om een voorinstelling toe te passen in de rechterbovenhoek van de pagina.
    • Als u een volledige Carousel-set wilt verwijderen, navigeert u naar de Carousel-set, selecteert u deze en tikt u op Delete.

Met Preview kunt u zien hoe uw carrouselbanner eruit ziet voor klanten en kunt u de hotspots voor carrouselbanners en afbeeldingen met hyperlinks testen om te controleren of deze zich gedragen zoals u had verwacht.

Wanneer u tevreden bent met de carrouselbanner, kunt u deze publiceren.

U kunt carrouselbanners voorvertonen vanuit de Carousel Editor (voorkeursmethode) of de lijst Viewers.

Een voorvertoning weergeven van carrouselbanners:

  1. Navigeer in Assets naar een bestaande carrouselbanner die u hebt gemaakt en tik om deze te openen.

  2. Tik op Edit.

  3. Selecteer in de lijst met voorinstellingen voor viewers in de rechterhoek van de werkbalk een viewer voor een voorvertoning van de carrouselbanner.

    experience_fragment-carouselbanner-viewerdropdown

  4. Tik op Preview.

  5. Tik op de hotspots of afbeeldingen met hyperlinks op de afbeelding om de bijbehorende handelingen te testen.

Een voorvertoning van carrouselbanners weergeven in de lijst Viewers:

  1. Navigeer in Assets naar een bestaande carrouselbanner die u hebt gemaakt en tik om deze te openen.
  2. Tik in de linkerbovenhoek van de pagina Preview op het pictogram Content.
  3. Tik in de lijst Viewers in het deelvenster aan de linkerkant van de pagina op de naam van de voorinstelling voor de carrouselbannerviewer die u wilt gebruiken.
  4. Tik op de hotspots of afbeeldingen met hyperlinks op de afbeelding om de bijbehorende handelingen te testen.

U moet de carrousel publiceren om deze te kunnen gebruiken. Als u een Carousel-set publiceert, worden de URL en de insluitcode geactiveerd. Het publiceert ook de carrousel naar de Dynamic Media-cloud, die is geïntegreerd met een CDN voor schaalbare en krachtige levering.

Als u een bestaande interactieve afbeelding met hotspots voor uw carrouselbanner gebruikt, moet u de interactieve afbeelding afzonderlijk publiceren nadat u de carrouselbanner hebt gepubliceerd.

Als u een reeds gepubliceerde interactieve afbeelding wijzigt die u in een carrouselbanner gebruikt, moet u de interactieve afbeelding publiceren voordat deze wijzigingen worden weerspiegeld in de carrouselbanner.

Zie Dynamic Media Assets publiceren voor informatie over het publiceren van carrouselbanners.

Nadat u bannerafbeeldingen hebt geüpload om een carrousel te maken, hotspots en/of afbeeldingen met hyperlinks naar de banner hebt toegevoegd en de carrouselset hebt gepubliceerd, kunt u deze nu toevoegen aan uw bestaande websitepagina.

Als u een AEM Sites-klant bent, kunt u de carrouselbanner rechtstreeks aan de pagina toevoegen door de component Interactieve media naar de pagina te slepen. Zie Dynamic Media-elementen toevoegen aan pagina's.

Als u echter een zelfstandige AEM bent, kunt u de carrouselbanner handmatig toevoegen aan de bestemmingspagina van uw website, zoals beschreven in deze sectie.

  1. Kopieer de insluitcode van de gepubliceerde carrouselset.

    Zie Video- of afbeeldingsviewer insluiten op een webpagina.

  2. Voeg de insluitcode die u van AEM Assets hebt gekopieerd, toe aan uw webpagina.

    De gekopieerde insluitcode reageert hierop, zodat deze automatisch in het insluitingsgebied van de pagina past.

Deze taak is alleen van toepassing als u een zelfstandige AEM Assets-klant bent.

De laatste stap in dit proces is het integreren van de carrouselbanner met een bestaande implementatie van QuickView op uw website. Elke implementatie van Quickview is uniek en een specifieke benadering is nodig die de hulp van een front-end IT persoon het meest waarschijnlijk impliceert.

De bestaande implementatie van QuickView vertegenwoordigt normaal gesproken een reeks onderling samenhangende acties die op de webpagina in de volgende volgorde plaatsvinden:

  1. Een gebruiker activeert een element in de gebruikersinterface van uw website.
  2. De front-end code verkrijgt een Quickview URL die op het gebruikersinterface element wordt gebaseerd dat in stap 1 werd teweeggebracht.
  3. De front-end code verzendt een Ajax- verzoek gebruikend URL die in stap 2 wordt verkregen.
  4. De achterste logica keert de overeenkomstige gegevens of inhoud van de Snelle mening terug naar de front-end code.
  5. De front-end code laadt de gegevens of de inhoud van de Snelle mening.
  6. Naar keuze, zet de front-end code de geladen gegevens van de Snelle mening in een vertegenwoordiging van HTML om.
  7. De front-end code geeft een modaal dialoogvenster of deelvenster weer en geeft de HTML-inhoud op het scherm weer voor de eindgebruiker.

Deze vraag kan onafhankelijke openbare API vraag niet vertegenwoordigen die door de Webpaginalogica van een willekeurige stap kan worden geroepen. In plaats daarvan, is het een geketende vraag waar elke volgende stap in de laatste fase (callback) van de vorige stap verborgen is.

Wanneer een gebruiker op een hotspot of afbeelding met hyperlinks in de carrouselbanner klikt en tegelijkertijd de carrouselbanner stap 1 en gedeeltelijk stap 2 vervangt, wordt deze gebruikersinteractie door de viewer afgehandeld. De viewer retourneert een gebeurtenis naar de webpagina die alle eerder toegevoegde hotspot- of afbeeldingskaartgegevens bevat.

In een dergelijke gebeurtenishandler doet de front-end code het volgende:

  • Luistert naar een gebeurtenis die door de carrouselbanner wordt uitgegeven.
  • Hiermee maakt u een Quickview-URL op basis van de gegevens van de hotspot of afbeelding met hyperlinks.
  • Triggert het proces om de Snelle mening van het achtereind te laden en het terug te geven op het scherm voor vertoning.

De insluitcode die door AEM Assets wordt geretourneerd, bevat al een gebruiksklare gebeurtenishandler die als commentaar wordt gemarkeerd.

Het is dus alleen nodig de commentaarmarkering van de code ongedaan te maken en de dummy-handlertekst te vervangen door de code die specifiek is voor de specifieke webpagina.

Het proces voor het samenstellen van de URL van de Snelle weergave is in feite tegengesteld aan het proces voor het identificeren van hotspot- en afbeeldingskaartvariabelen die eerder zijn behandeld.

Zie Variabelen van hotspot en afbeeldingen met hyperlinks identificeren.

De laatste stap om de Quickview URL teweeg te brengen en het paneel van de Snelle mening te activeren vereist hoogstwaarschijnlijk de hulp van een front-end persoon van IT van uw afdeling van IT. Zij hebben de kennis om het best te weten hoe te om de implementatie van de Snelle mening van de juiste stap nauwkeurig teweeg te brengen, die een klaar-aan-gebruiksKickview URL hebben.

Quickviews gebruiken om aangepaste pop-ups te maken

Zie Quickviews gebruiken om aangepaste pop-ups te maken.

Op deze pagina