Set up your environment
Organizing panels and the timeline
The panels in Google Web Designer can be resized, rearranged, combined, and closed so that you can have the access you need without unused panels getting in the way. You can 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 will open in the same location where they were closed.
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 completely 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 will collapse to show only the bar, or expand 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 will remember its size when collapsed and then re-expanded, and when closed 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 will extend to use any available space at the bottom of the stack, or return to its previous height if there's no more space. Floating panels will switch to their previously set 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 will 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 to where you want. 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, or attached to the edge of the Google Web Designer window. You can dock panels on the left or right side, or even 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.
Changing your view
The View menu in Google Web Designer lets you choose how you want to view the stage, and how you want to view objects.
View outlines and labels
When you have Outline > Outlines only selected in the View menu, every element on stage that's not the selected element will have a dashed border visible. When you have View > Outline > Label selected, each element is also labeled with its type and ID. In complex layouts, it can be helpful to select View > Outline > Off to reduce visual clutter.
Adjusting this setting will change it for all documents.
Snapping lets you position elements along the same horizontal or vertical lines. You can choose to snap to the grid, to the boundaries of other objects, or into alignment with other objects. To enable snapping, from the View menu, select Snap. From the Snap to submenu, select the elements you want to snap to:
- Snap to > Grid snaps to the lines on the 3D grid.
- Snap to > Objects snaps to the edges, corners, and centerpoints of other objects on the stage.
- Snap to > Snap align snaps the selected object into alignment with other objects.
Adjusting this setting will change it for all documents.
View the 3D grid
When you have 3D grid selected in the View menu, the 3D view shows the grid for the plane that's nearest to parallel to your view. The grid color mirrors the color of the 3D compass. Grid lines are 50 pixels apart by default (you can change the grid size in your preferences), and you can snap your work to them.
If you change this setting, Google Web Designer will remember your selection for the document. You can also set your preference for whether the 3D grid is visible by default.
When you have Rulers selected in the View menu, the horizontal and vertical rulers are visible. Rulers can help you precisely position elements in your ads and HTML5 documents.
If you change this setting, Google Web Designer will remember your selection for the document. You can also set your preference for whether the rulers are visible by default.
Front view, Top view, and Side view
Selecting Front view, Top view, or Side view from the View menu lets you view the stage directly down the z, y, or x axes. Double-clicking the 3D stage rotate tool returns you to whichever view you select here.