Studio Editor: Editing the Visual Sitemap

In this article

Adding pages and sections
Moving pages and sections
Setting the page status
Exporting the sitemap
FAQs

This visual sitemap shows a high-level view of your client's site, including all pages and sections. It can help you get a better perspective on the overall structure of the site, allowing you to organize it quicker.

A GIF showing the drag and drop functionality in the Visual Sitemap panel, allowing to move pages and sections around

Did you know?

The Visual Sitemap panel is resizable – drag it to make it as big or small as you need.

Adding pages and sections

You can add more pages and sections as you work on your client's sitemap and move them around with ease.

To add a new page or section:

Click Visual Sitemap on the left side of the editor.
Choose what you want to add:
- Page:
  1. Click + Add New Page.
  2. Select the relevant page type: Blank page or a dynamic page.
  3. (Optional) Drag the new page to the relevant location on the sitemap.
- Section:
  1. Click the More actions icon next to the relevant page name.
  2. Select the section type: General sections, a blank section or one of your global sections.
  3. (Optional) Drag the new section to the relevant location on the sitemap.
(Optional) Start designing the page or section on the canvas:
1. Click the More actions icon next to the new page or section.
2. Select Edit on canvas.

Tip:

If you've used AI to generate this site, you can let it create pages and sections for you, filled with relevant content.

Page: Select Generate when adding the new page. Describe the content it should show.
Section: Enable the Generate wireframes & content toggle when adding the new section.

A cropped view of the visual sitemap, showing the options to add a page and a section.

You can also hover over an existing section and click the Add section icon

A screenshot of a page on the visual sitemap, hovering over the plus icon to add a new section below the header

Moving pages and sections

The visual sitemap allows you to effortlessly rearrange pages and sections, enhancing the flexibility and teamwork involved in defining the site structure. Use drag and drop to move pages and sections freely across the sitemap, or move them 1 spot to the left or right (page) / up or down (section).

To move a page or section:

Click Visual Sitemap on the left side of the editor.
Choose how to move the page or section:
- Drag and drop: Drag and drop pages and sections to wherever you need them to be. You can move sections between pages if needed.
- Move by 1:
  1. Click the More actions icon next to the page or section.
  2. Select Move Right / Left / Up / Down.

A cropped view the visual sitemap, clicking the icon next to a page and highlighting the move right and left options.

Setting the page status

You can set a status for every page to indicate your progress on it. This is especially helpful for teams collaborating on a site, keeping everyone aligned on where things stand.

To set the page status:

Click Visual Sitemap on the left side of the editor.
Click Set status next to the relevant page.
Mark the page as In progress, Done, etc.

A screenshot of the Visual Sitemap panel, selecting a status for the Home page

Exporting the sitemap

Share the sitemap with your client. This is a great way to ensure they approve the structure before proceeding with the design process.

To export the sitemap:

Click Visual Sitemap on the left side of the editor.
Click the More actions icon at the top.
Select Export sitemap.
Tip: This downloads a JPEG file containing the sitemap.