Navigate your document structure in the Outliner

The Outliner provides a tree view of the elements and clips in your document. Show or hide the Outliner panel by selecting it in the Window menu.

Outliner Overview - Google Web Designer

The Outliner's listing of elements has some of the same functionality as elements on the stage. For example, you can click elements in the Outliner to select them, right-click elements to see a pop-up menu of commands specific to that element, and double-click components that have an editing dialog to open the dialog.

Organization

For HTML5 ads and HTML documents with pages, the Outliner organizes elements under each page in the document. When you're in group editing mode, you see only the elements in the group.

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. You can also hold the Ctrl (Windows) or ⌘ or Alt (Mac) key while clicking the arrow to the same effect.

👁 Outliner panel

Reorder elements: Drag an element to where you want it within the listing. A yellow line appears where the element will move to. You can also drag a child element to a different parent element.

Nest elements: You can nest an element within another element by dragging it over the new parent element. A yellow box appears around the prospective parent element.

Selection

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 the Ctrl (Windows) or ⌘ (Mac) key 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 the Ctrl (Windows) or ⌘ (Mac) key 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. If the element is a component with an editing dialog, double-clicking opens the dialog instead.

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. The Outliner also displays the following status icons:

• A diamond icon indicates when an element has a dynamic data binding.
• Guide layers display an icon that you can click to convert the guide layer back to a regular element.
• Hidden and locked elements are indicated by status icons that you can click to unhide or unlock the element. Hover over a visible or unlocked element to see icons that let you hide or lock the element.

Filtering

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 👁 Search icon
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. If you enter the name of an asset, components that use that asset will match.

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.