Using the Page Structure Panel to view and navigate your page's hierarchy of elements.

The Page Structure Panel displays all the elements currently on the page, and shows their relative position in the hierarchy. It can also be used to name, lock, and unlock content.

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.

The page structure panel is also very helpful in selecting elements you can't select by clicking on the screen, and you can also add new elements to the page by dragging and dropping them from the left toolbar into 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.

Some elements with multiple pieces of content will also have a “Content” button. Clicking this will reveal the content in the element. This is used to lock or unlock pieces of content to control whether they are able to be updated in Content Editor. More information on locking and unlocking content can be found here.

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.