Visual Sitemap

This component is part of Framercrafts, a library of supercharged Framer components and overrides.

This component is part of Framercrafts , a library of supercharged Framer components and overrides. Description Pagemap creates a miniature visual representation of a webpage's structure, similar to a document outline or "mini-map" found in code editors. It renders different HTML elements (headers, sections, articles) with distinct colors, providing users with a visual overview of the page content and structure. Use Cases 1. Long-Form Content - Navigation aid for lengthy articles or documentation 2. Complex Layouts - Visual overview of page sections and hierarchy 3. Web Applications - Quick navigation between different functional areas 4. Documentation Sites - Help users understand document structure 5. Blogs and Articles - Allow readers to quickly scan and jump to sections Customizations • Map Background - Background color of the miniature map • Block Color - Color for structural elements like headers, sections, and articles • Secondary Color - Highlighting for H1 headings and links • Tertiary Color - Distinct color for H2, H3, and H4 headings • Dimensions - Adjustable width and height of the map • Position - Can be placed anywhere within a layout