How to use the Visual Sitemap tool

This guide covers how to use the Visual Sitemap tool to add a page or recipe (pre-made blueprints that you can add to your site, such as a blog), or to delete pages or recipes, and how to restructure your site. It is a great tool for adding pages to your site, as well as managing its Information Architecture.

Please be forewarned that this is an extremely powerful tool that should be used intentionally and with great caution. Depending on how your site was set up, new pages or recipes that are added through this tool may not inherit the styling that you have already set up for your site. Furthermore, removing pages could affect other areas of your site if they had overlapping content or the same template.

Accessing the Visual Sitemap

The Visual Sitemap is accessible throughout the Zesty.io Site Manger via the navbar at the bottom right which has several options including Visual Sitemap.

how to access the Visual Sitemap tool in the Zesty.io Site Manager

Once you click this button a new screen will open up showing you a visual representation of the sitemap.

the visual sitemap tool opens a screen that has a visual representation of the sitemap

Adding pages

You can add a new page or recipe by dragging and dropping the "+ add a new page" button in the upper right-hand corner onto the visual sitemap. The node that you drop the button on indicates the new page's parent. For example, if you want a new page parented to "Home", then you'll drag and drop the "+ add a new page" button on the "Home" node. You can add a page or recipe to any node in the Visual Sitemap; this is evinced by the way the nodes pop and turn gray in as the "+ add a new page" button hovers over them. Once you drop the button on a node you'll be given choices for which page or recipe you want to add to your site.

each bubble in the visual sitemap is a node

Below you'll see the options for the different types of pages or recipes that can added to your site.

options for which recipe you want to add to your site

Once you decide on the page or recipe that you want to add to your site, click the green "+ Add to Site" button in the right-hand corner of that option.

green add to site button shows on hover

The below gif shows the whole process for adding a page or recipe in action.

animated gif of how to add a page or recipe to your site

Deleting pages

In order to delete a page click and drag your selected page(s) to the trashcan icon in the lower left-hand corner. After you delete a page, click the green 'Save' button in the lower right-hand corner and you'll be returned to the screen that you were previously on.

how to delete a page from your site using the visual sitemap

When deleting a page with subpages you'll be prompted to confirm since you're deleting more than 1 page.

how to delete multiple nested pages from your site using the visual sitemap

Restructuring your site

To restructure your site, simply drag and drop nodes onto other nodes. When you do this the node that is dragged and dropped will be nested underneath the node that you dropped it on. You can move everything but the gray "Home" node. In the example below first you'll see the green node "Page" dragged and dropped on the pink node "Promotions". Note that the green "Page" node turn becomes pink once it's nested under the pink "Promotions" node.

how to restructure your site with the visual sitemap