Search
Clear search
Close search
Google apps
Main menu

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.

Resize panels

To change the height of a panel, make sure that it's expanded, then click and drag the bottom of the panel up or down. The panel will remember its size when collapsed and then re-expanded, and when closed then reopened.

To change the width of a panel, click and drag the inner edge of any panel.

Move panels

You can only move the timeline between the top and bottom of the Google Web Designer interface. You can move other panels to the left or right side, as well as reposition them among any panels already present.

Move an individual panel: To change the location of a panel, click and drag the panel's name in the top bar to where you want. The highlight line shows where the panel will go when you release it.

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

Move all panels on a side: You can move all the panels on the left or right side to the other side by clicking and dragging the handle  that's above the topmost panel.

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

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

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.

View rulers

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.

Was this article helpful?
How can we improve it?