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.

Icons for each element type

Pages

Primary page
Page

Elements

Group
Div
Image
Icon for amp-img element 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 icon 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 icon 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 icon 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
Icon for a hidden element /  Hidden/Shown (displayed upon hover)
Icon for a locked element /  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 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.

Element type filter icons

Show images and videos
icon for a custom element in the Outliner Show components
Show text
Show shapes

Was this helpful?

How can we improve it?
Search
Clear search
Close search
Google apps
Main menu
1949365514080996397
true
Search Help Center
true
true
true
true
true
5050422
false
false