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.

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.

Icons for each element type

Pages

	Primary page
	Page

Elements

	Group
	Div
	Image
	amp-img (image in an AMP document)
	Video element
	Text container
	Numbered list
	Bulleted list
	Link

Shapes

	Path (drawn by the Pen tool)
	Rectangle
	Oval
	Line

Components

	Gesture component
	Image Button component
	Parallax component
	Tap Area component
	Tap to Call / Text component
	360° Gallery component
	Carousel Gallery component
	Gallery Navigation component
	Swipeable Gallery component
	Transition Gallery component
	amp-carousel component
	Audio component
	Video component
	YouTube component
	3D Model Viewer component
	Image Effect component
	Particle Effects component
	Sprite Sheet component
	Swirl component
	Button component
	Checkbox component
	Dropdown component
	Label component
	Number Input component
	Radio Button component
	Slider component
	Text Field component
	Add to Calendar component
	Date Swap component
	Map component
	Street View component
	iFrame component
	Star Ratings component

 Backdrop elements

	Rectangle backdrop shape
	Oval backdrop shape
	Polygon backdrop shape

Clips

	Audio clip
	Video clip or image clip

Status icons

	Has a dynamic or variant binding
	Guide layer
/	Hidden/Shown (displayed upon hover)
/	Locked/Unlocked (displayed upon hover)

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 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.

Element type filter icons

	Show images and videos
	Show components
	Show text
	Show shapes