- Open your experience in Passport Builder and navigate to the Landing Page section.
- Review the existing layout and plan the sections to add.
- Add a Carousel block for product media at the top of the page.
- Configure the carousel with product images from Brand Cloud.
- Set carousel display options (auto-play, navigation arrows, dots).
- Add a Product Title dynamic text element and connect it to
product.title. - Add a Description text block connected to
product.description. - Style the description text with appropriate font size and line height.
- Add a Brand logo image element.
- Add a divider element to separate sections visually.
- Create a Materials section using a text block and dynamic material fields.
- Add a Traceability section with origin and process information.
- Add certification badge elements linked to certificate data.
- Configure a DPP button to open the Digital Product Passport overlay.
- Add interactive hotspots to highlight product features.
- Set hotspot tooltips with descriptive text.
- Add a QR code block linked to the product's digital ID.
- Style the QR code section with a background and label.
- Add a footer section with brand information.
- Style the footer background and text colors.
- Add social links or contact information to the footer.
- Set up language switching controls for multilingual content.
- Preview the full landing page at desktop size.
- Review each section for visual consistency.
- Adjust spacing and margins between sections.
- Switch to mobile view and verify all sections stack correctly.
- Adjust any sections that break on mobile.
- Test all interactive elements in preview mode.
- Select different products in preview to verify dynamic content updates.
- Check all dynamic variables resolve correctly.
- Verify the DPP button opens the correct passport sections.
- Review typography hierarchy across all sections.
- Make final adjustments and click Save.
How to Design Your Landing Page
Was this page helpful?
Thanks for your feedback!
