The Page Structure Panel displays all the elements currently on the page, and shows their relative position in the hierarchy.

Because elements can be placed within other elements, it can be important to keep track of this hierarchy while designing your page. Both the Page Structure Panel and the Breadcrumbs UI provide you with easy ways to view an element's place in the hierarchy.

The Page Structure panel displays the hierarchy as a tree, where each parent element can be expanded/collapsed to show/hide its children:

If your page has a complicated structure with a lot of elements, animations, and complex layouts, it can sometimes be difficult to locate a specific element using the stage alone. This panel is extremely useful for hunting down the element you're looking for, and selecting it so that you can edit it or reposition it.

How do I use the Page Structure panel?

Select an element, grid, or anything else on the page and click the Page Structure icon in the right toolbar:

Click on any element in this panel to select it on the stage. You'll automatically scroll to that element's location.

You can expand or collapse any parent element in the panel by clicking the arrow icon at its left-hand side. This will reveal any elements that are nested within it.

You can also drag and drop elements within the panel. Dragging an element to a new location in the hierarchy, or to a new parent element, will reposition it on the page:

You can also rename any element by double-clicking on it and typing a new name. This can be very helpful for keeping track of the location of specific elements on your page:

Did this answer your question?