Je product landing page ontwerpen

Bouw een complete product landing page met carousel, dynamische titel en beschrijving, materials, traceability, DPP-knop, hotspots, QR-code en footer, en controleer hoe het er op mobiel uitziet.

Klik op het plus-icoon om een nieuwe laag toe te voegen.
Klik op het Carousel-component om een carousel toe te voegen.
Schakel Use product media in om dynamische productafbeeldingen te tonen.
Selecteer de gewenste carousel-layout.
Selecteer de gewenste image fit.
Klik op het Rich text-icoon om tekst toe te voegen.
Klik op het bewerk-icoon om de tekst aan te passen.
Klik op Add variable om dynamische content in te voegen.
Selecteer een dynamische variabele in het dropdownmenu.
Gebruik de rich text-opties om de tekst op te maken.
Klik op het Button-component om een knop toe te voegen.
Hernoem de knop om zijn functie weer te geven.
Selecteer een actie voor de knop.
Pas de knopruimte aan met de opties rechts.
Pas de knopgrootte aan.
Pas de knopranden aan.
Om Product Passport in te schakelen, ga je naar het Settings-icoon om het experience-configuratiepaneel te openen.
Vink Product Passport aan om extra product- en traceability-functies te ontgrendelen.
Schakel opties in om in de DPP-weergave zichtbaar te zijn.
Selecteer Product Passport Type.
Voeg extra pagina's toe die onder de View Passport-knop kunnen worden geopend.
Sla op om de wijzigingen toe te passen.
Dubbelklik op de Passport-knop om de productdetails te bekijken.
Material-details tonen dynamische data uit Brand Cloud.
Traceability-informatie toont dynamische data uit Brand Cloud.
Klik op het Register CTA-component om het aan het ontwerp toe te voegen.
Klik op het Register CTA info-veld om de tekst te wijzigen.
Gebruik dynamische variabelen en statische tekst om instructies te geven.
Hernoem de knop om zijn functie weer te geven.
Pas spacing, grootte en randen aan met de opties rechts.
Klik op het Image-component om media toe te voegen.
Upload een afbeelding of kies er een uit de mediabibliotheek.
Klik op het Button group-component om gegroepeerde knoppen toe te voegen.
Klik op het Button-component om extra knoppen aan de button group toe te voegen.
Hernoem de knop om zijn functie weer te geven.
Kies Link om de bestemming van de knop te bepalen.
Voer de URL in het veld in.
Pas spacing, grootte en randen aan met de opties rechts.
Klik op de volgende knop in de groep en hernoem deze om zijn functie weer te geven.
Kies Page om de knop aan een pagina te koppelen.
Selecteer een pagina in het dropdownmenu. Pagina's moeten eerst worden aangemaakt om in het dropdownmenu te verschijnen.
De knopnaam wordt automatisch bijgewerkt op basis van de geselecteerde pagina. Klik op de knop en hernoem deze naar wens.
Pas spacing, grootte en randen aan met de opties rechts.
Selecteer de laatste knop en hernoem deze om zijn functie weer te geven.
Kies Certificates in het Action-dropdownmenu om certificaten uit Brand Cloud te tonen.
Pas spacing, grootte en randen aan met de opties rechts.
Klik op het Box-component om groepselementen aan het ontwerp toe te voegen.
Voeg rich text toe aan de box.
Voeg de knop toe aan de box.
Open de lagenboom.
Klap het Box-component uit.
De elementen zijn binnen de box gegroepeerd.
Klik op het bewerk-icoon om de tekst aan te passen.
Voer de gewenste tekst in.
Gebruik de rich text-opties om de tekst op te maken.
Hernoem de knop om bij de geselecteerde actie te passen.
Kies Lost and Found om gebruikers verloren items te laten melden.
Pas spacing, grootte en randen aan met de opties rechts.
Klik op de +-icoonknop om een nieuwe laag aan te maken.
Klik op het Image-component om media toe te voegen.
Upload een afbeelding of kies er een uit de mediabibliotheek.
Componenten kunnen via de lagenboom worden verwijderd, klik met de rechtermuisknop op het component.
Klik vanaf hier op het plus-icoon om een nieuwe laag aan je interactieve demo toe te voegen.
Klik vervolgens op het Video-element om multimedia aan je demopagina toe te voegen.
Klik nu op het upload-icoon om een videobestand aan je interactieve demo toe te voegen.
Klik vanaf hier om een videobestand voor de interactieve demo te uploaden.
Klik daarna op het zijbalk-menu-icoon om extra bewerkingsopties en tools uit te klappen.
Klik vanaf hier op het Video-element in de lagenboom om het te selecteren en te beheren.
Klik vervolgens op de Delete-optie om het video-element uit je lagenboom te verwijderen.
Klik nu op de Share-knop om je interactieve demo met anderen te delen.
Klik vervolgens op de Copy link-knop om de deelbare link te kopiëren.
Klik vanaf hier op de Passport Builder-map om de interactieve productdemo's te verkennen.
Klik vervolgens op het Links-tabblad om bij de opties voor delen en linkbeheer te komen.
Klik daarna op de Step 2-screenshot-thumbnail om naar de volgende demostap te navigeren.
Klik daarna op Add Step om een nieuwe interactieve demonstratiestap aan te maken.
Klik vervolgens op Record More Steps om extra stappen voor je demo op te nemen.
Klik daarna op de Delete-knop om het geselecteerde component te verwijderen.
Je kunt elementen ook slepen en neerzetten om je layout te herschikken.