Navigate your document structure in the Outliner
The Outliner provides a tree view of the elements in your document. Toggle the Outliner panel in the Window menu.
By default, the Outliner lists elements in the same order as the layers in the Advanced mode timeline. You can switch to DOM order in your Design view preferences.
Expand or collapse an element: Click the arrow next to an element in the Outliner to show or hide nested elements.
Expand or collapse all nested elements: Double-click the arrow next to an element to expand or collapse all elements listed under that element.
Selection is mirrored on the stage, in the Advanced mode timeline, and in the Outliner, which means that selecting an element in one place also selects it in the others. Google Web Designer switches to different levels within nested elements or to different pages as necessary. The label of the current parent element displays in yellow.
Select an element: Click an element to select it.
Select multiple elements: You can select multiple elements if they share the same parent element.
- Hold Control (Windows) or Command (Mac) while clicking the elements you want to add to the selection.
- To select a range of elements, click the first element, then hold Shift while clicking the last element.
Deselect an element: Hold Control (Windows) or Command (Mac) while clicking the element you want to remove from the selection.
Navigate inside an element: Double-click an element to navigate into it so it becomes the current parent element. You can edit existing child elements or nest new elements under the parent element.
Element type and status
For each element, the Outliner displays an icon indicating the element type, along with the element ID, name, or text content if available.
Hidden and locked elements have status icons that you can click to unhide or unlock the element. Guide layers also have an icon that you can click to convert the guide layer back to a regular element. The Outliner only displays one status icon for a given element, in the priority order shown below.
Icons for each element type
|amp-img (image in an AMP document)|
|Path (drawn by the Pen tool)|
|360° Gallery component|
|Carousel Gallery component|
|Gallery Navigation component|
|Swipeable Gallery component|
|Transition Gallery component|
|Add to Calendar component|
|Image Button component|
|Tap Area component|
|Tap to Call / Text component|
|Street View component|
|Date Swap component|
|Particle Effects component|
|Sprite Sheet component|
|Star Ratings component|
|Number Input component|
|Radio Button component|
|Text Field component|
You can filter the list of elements that you see in the Outliner. If an element matches a filter, the parent element and other ancestor elements are also displayed so you can see where the matching element lies in the document structure.
Filter elements by clicking the space next to the magnifying glass at the top of the Outliner panel and typing part of an element ID, name property value, tag name, or group name. Text elements also match based on their text content.
You can also use element type filters.
Element type filters
The Outliner includes filters to show only certain element types, such as text or shapes. At the top of the panel, click the icons for the element types you want to see in the Outliner. When multiple element type filters are active, you see elements that match any of the active filters.
Element type filter icons
|Show images and videos|