Build a responsive web document, test real viewport widths, add authored or library sections, wire interactions, and publish compiled multi-page HTML.
Where: Designer → Add page → Landing page & website.
Key ideas
- Responsive rather than fixed-stage: A website fills the desktop canvas and reflows at the real 834px Tablet and 390px Mobile widths. The switch changes layout width; it is not a screenshot scale.
- The broadest web tool surface: Landing pages can use document editing, motion, interactions, exposed fields, immersive kit sections, interactive elements, stock and generated media, local image tools, scroll-scrub video, art direction, design-system checks, review, pages, lightweight web research, and Brain.
- Published HTML is compiled output: Motion and interactions are stored as specs and compiled into the shared/downloaded result. Multi-page sites export every non-empty page with a generated index entry rather than only the tab you happen to be viewing.
Steps
- Add a Landing page & website page and name it for its route or purpose.
- Choose an art direction or connected design system before composing the first full page.
- Build the semantic page structure, then use kit sections or interactives only where they improve the narrative.
- Test Desktop, Tablet, and Mobile; fix reflow at the actual width rather than scaling the desktop design.
- Add motion and interactions through the document specs. For scroll-scrub video, place a usable video and enough page travel around its scrub zone.
- Use exposed Fields for intentional reusable content/style inputs and direct Edit/Layers controls for small corrections.
- Preview links, hover/click behavior, scroll motion, media loading, and reduced-motion behavior.
- Review the rendered page, then use Share & export for a compiled live document or HTML download.
Website-only capabilities
- Nine immersive backbone section patterns plus the searchable section library.
- Interactive element insertion for hosted code/canvas experiences.
- Scroll-scrub video attached to page travel; fixed timed stages do not expose this tool.
- Lightweight search_web/read_url and Brain context alongside page/document tools.
Responsive widths
- Desktop — fills the available canvas.
- Tablet — composes at 834px, capped by the available editor width.
- Mobile — composes at 390px, capped by the available editor width.
- Refresh restarts the frame; it does not restore earlier document content.
Tips
- Use the section library for familiar structure and reserve custom composition for brand-defining moments.
- Put meaningful normal content after a pinned scene so its scroll travel can complete.
Limitations and important notes
- Changing device width exposes layout problems but does not automatically repair them.
- Preview is not a substitute for testing the final published URL and its external resources.
- A local or expiring media URL is not made durable by embedding it in HTML.
Troubleshooting
A pinned or scrubbed section ends abruptly.
Move it earlier, add meaningful unpinned flow after it, or reduce the requested travel.
The published page does not move.
Publish/export through Designer so the stored motion and interaction specs are compiled; do not copy raw stored HTML.