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.
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.
Once you click this button a new screen will open up showing you a visual representation of the sitemap.
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.
Below you'll see the options for the different types of pages or recipes that can added 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.
The below gif shows the whole process for adding a page or recipe in action.
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.
When deleting a page with subpages you'll be prompted to confirm since you're deleting more than 1 page.
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.