Arrange panels and the timeline

You can resize, rearrange, combine, and close panels in Google Web Designer, streamlining access to what you need by hiding unused panels. View all available panels in the Window menu, with checkmarks next to the open panels. Once you're happy with your panel layout, you can save it as a workspace.

The Window menu is only available in Design view.

Hide and show panels

You can hide all panels to quickly maximize the document space in the window.

To hide all panels: Use the Window > Hide panels menu command, or press F4.

To make hidden panels visible: Use the Window > Show panels command, or press F4.

Hiding affects all panels. To stop specific panels from displaying, close and open individual panels.

Note: Unlike with other panel changes described on this page, Web Designer won't save or remember that you've hidden panels.

Close and open panels

To close or open a panel: Select the panel from the Window menu. Panels open in their previous location.

To close a panel or panel group: Click the More icon  at the end of the top bar of any panel and select Close tab, or select Close all to close a panel group. Closed panels are hidden from view except for their listing in the Window menu.

Collapse and expand panels

To collapse or expand a panel, click the panel's top bar. The panel collapses to show only the bar, or expands to the initial or last used size. Alternatively, click the More icon  at the end of the top bar and select Collapse or Expand.

Resize panels

To adjust the height of a panel: Make sure that the panel is expanded, then click and drag the bottom of the panel up or down. (To resize the timeline while it's docked on the bottom of the window, drag the top of the panel.) The panel remembers its size when collapsed and then re-expanded, and when closed and then reopened.

Note: The height of the Color panel is fixed.

To maximize or restore the height of an expanded panel: Double-click the bottom edge of the panel (or the top edge of the timeline when it's docked at the bottom of the window). A docked panel extends to use any available space at the bottom of the stack, or returns to its previous height if there's no more space. Floating panels switch to their previous height.

To adjust the width of a panel: Click and drag the side edge of the panel. (For docked panels, use the inner edge.) All the panels in the stack change to that width.

Note: The width of the docked timeline is controlled by the width of the Web Designer window.

Move panels

Panels are arranged in stacks. You can reposition panels within the same stack, move them into a different stack, or start a new stack.

Note: You cannot stack the timeline with other panels.

Move a single panel: Click and drag the panel's name in the top bar. If the new location is within a stack of panels or will dock the panel, the yellow line or bar shows where the panel will go when you release it.

Move combined panels: To move a set of combined panels, click and drag any spot on the top bar that isn't over any panel names.

Move stacked panels: You can move all the panels in a stack by clicking and dragging the handle  that's above the topmost panel.

Dock and float panels

By default, panels are docked (attached to the edge of the Google Web Designer window). You can dock panels on the left or right side, or both, although only one stack of panels can be docked on each side.

Note: The timeline only docks at the top or bottom of the window.

When you undock a panel by dragging it away from the edge of the window, it becomes a floating panel that you can move anywhere within the Web Designer window, although it may cover the interface. You can position floating panels separately, or stack them together and combine them just like docked panels.

Dock floating panels by dragging them near the edge of the window until a yellow bar indicates where they will dock.

Combine panels into one panel group

To combine several panels into one panel group, drag and drop the top bar of a panel over the name of another panel. A vertical yellow line shows in the destination top bar where the panel will go when you release it. Combined panels become grouped as tabs that you can click between in a single panel's space, so that only one panel of the group can be fully visible at a time.

To uncombine panels, move the individual panels out of the group.

Note: The timeline cannot be combined with other panels.

Was this article helpful?
How can we improve it?