Visual Sitemap Overview

The Visual Sitemap is one of Evergreen’s standout features – it provides a dynamic, visual representation of your website’s structure. In this section, you can build, view, and modify a sitemap (a hierarchical diagram of all pages) by simply dragging and dropping. It’s an intuitive way to design or analyze site architecture without having to sift through lists or spreadsheets.

Overview of the Visual Sitemap Interface: When you open the Visual Sitemap, you’ll see your home page at the top (root node), with branches for each section or child page beneath it. Each page is represented as a node (often a box or circle with the page title inside). Lines or arrows connect parent pages to their subpages, forming a tree that represents your site’s navigation structure.

Key elements you might encounter on the Visual Sitemap:

• Nodes (Page Cards): Each node typically shows the page title. It may also use icons or color codes to convey additional info (for example, a special icon for pages that are not yet created or a color indicating the page’s status like draft or published). Hovering over or clicking a node might show more details, like the page URL or status.
• Expandable Sections: If a page has many children (subpages), these might be collapsed for clarity. You could click a small arrow or plus sign on the parent node to expand or collapse its children. This helps manage large sitemaps without getting overwhelmed by details all at once.
• Canvas Controls: For large sites, you may be able to zoom in/out or drag the canvas to navigate different parts of the sitemap. Look for zoom buttons or simply use your mouse/touchpad scroll. Panning around the diagram is usually done by click-dragging an empty part of the canvas.

Building and Editing the Sitemap:

• Adding Pages Visually: To add a new page via the sitemap, you have a couple of options:
  
• Toolbar “Add Page”: There might be a global “Add Page” button. If you use it while a specific node is selected, it could add a child under that node. Or, it may prompt you to choose where the new page belongs (e.g., select parent page from a list).

• Inline Add: Some visual sitemap tools let you add directly by clicking a small + button that appears when you hover near a node’s outline. For example, hovering near a page might show a “+ Add Subpage” control – clicking it creates a new child node.
  After adding, you’ll typically name the new page right on the spot. A textbox will appear for you to type the page title. Once added, you can later fill in more details in the Pages section or by editing the node (if supported).
• 
  
• Reordering and Restructuring: Drag and drop nodes to rearrange the structure. Want to move a page to a different section? Simply click and drag its node to the new parent node. Evergreen will update the hierarchy accordingly. You might see a highlight or guide indicating where the node will be placed (e.g., dropping “Team” page under “About Us” section). If a page has subpages, dragging the parent will usually move all its children with it as a block.
• Editing Page Info: Double-click a node (or use a right-click/context menu) to edit that page’s info. This might open a small form or side panel where you can change the page title, URL, or status without leaving the sitemap view. For quick tweaks like renaming a page, in-place editing on the node might be allowed (e.g., double-click the title on the node to rename).
• Deleting a Page: If you need to remove a page, you can usually click a node and press a delete option (trash can icon or right-click > delete). Evergreen will likely ask for confirmation, especially if the page has subpages (since deleting a parent could remove its whole branch). Alternatively, if you remove it from the Pages list, it will disappear from the sitemap too on the next refresh.
• Real-Time Sync: The visual sitemap is synced with your Pages list. If you add or remove pages via one interface, the other reflects it. This real-time sync ensures you can switch between list view and visual view as needed without inconsistencies.

Exporting and Sharing the Sitemap:

Evergreen makes it easy to share your site plans with others who might not be in the app. You have a few options to export or share the sitemap:

• Export as Image/PDF: Click the Export button on the sitemap page (it might let you choose format, such as PNG image or PDF document). This will generate a snapshot of the entire sitemap diagram. You can then download it and include it in presentations, or send it via email to stakeholders. This is great for client presentations or team meetings, as everyone can visualize the site structure.
• Share Link (Live View): If supported, Evergreen can create a shareable link to a live read-only version of the sitemap. This could be a unique URL that you send to colleagues or clients. When they open it, they’ll see the same visual sitemap in a web page, but they won’t need an Evergreen login and can’t edit it. This is useful for gathering feedback or for stakeholders to keep track of structure changes in real time.
• Sitemap XML Download: Note that the visual sitemap is for planning and design. It’s not the same as an XML sitemap for search engines, but if relevant, Evergreen might provide a way to export an XML sitemap of your current pages. That would be found likely under SEO settings rather than here, but it’s worth mentioning if you’re thinking in terms of Google crawling. For most content strategists, the focus here is the visual planning aspect.

Using the Visual Sitemap for Planning:

• Site Redesigns: If you are overhauling an existing site or creating a new one, start by mapping out the desired structure here. It’s much easier to rearrange nodes on a screen than to rebuild a site navigation after pages are made. Try different hierarchies, get feedback using the share link or exported image, and refine the structure until it’s solid. Then proceed to content creation.
• Content Audits & Gap Analysis: A quick glance at the visual sitemap can reveal gaps. For example, you might notice that under your “Blog” section you haven’t covered topics for a certain category – which prompts you to add those pages. Or you might see a section with too many nested levels (which could be a user experience concern) and decide to simplify.
• Client/Stakeholder Communication: Many people find a picture easier to digest than a spreadsheet of pages. Use the visual sitemap when discussing with clients or non-technical stakeholders. It helps them understand the plan. They can point to sections they want changed or see how everything connects.
• Ensure Alignment with Navigation: Ideally, your site’s main navigation menu will mirror the visual sitemap (at least the top tiers). Use the sitemap to verify that your menu makes sense. If something is in the sitemap but not in navigation (or vice versa), you might need to adjust to avoid orphan pages or hidden content.

Evergreen’s Visual Sitemap is a powerful way to make site architecture tangible and editable. With it, you’ll have confidence that your website structure is well-planned, clear, and optimized for both users and search engines.