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.

Outliner - Google Web Designer

Organization

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

Outliner panel

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 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 also have status icons that you can click to unhide or unlock 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

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

Status icons

Icon for a hidden element Hidden
Icon for a locked element Locked

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.

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?