Set up your workspace
Organizing panels and the timeline
The panels in Google Web Designer can be resized, rearranged, combined, and closed, 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.
Close and open panels
To close or open a panel, select it from the Window menu. Panels open in their previous location.
To close a panel, you can also click the More icon at the end of the top bar of any panel and select Close tab, or select Close all to close all combined panels under that bar. 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.
To adjust the height of a panel: Make sure that it's 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.
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: The timeline cannot be stacked 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 will cover the interface. Floating panels can be positioned separately, or stacked together and combined 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 in one panel
To combine several panels into one panel, drag and drop the top bar of a panel over the name of another panel. A vertical yellow line will show 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.