The Web Designer interface

Google Web Designer has a large central area for building your projects and editing code. The central area is surrounded by a toolbar, a tool options bar, a timeline, and a set of panels that let you do several things, including modify elements, add components, and add events.

1. Toolbar  2. Tool options bar  3. Timeline  4. Color, Properties, Text, Components, Events, CSS, Responsive, Dynamic, Library, and Ad Validator panels  5. View bar

The workspace

In the center of the Google Web Designer interface is the workspace.

  • When you're in Design view, the workspace shows your images, text, and other elements visually, just as they will be displayed in a browser. The white stage represents the visible area of the ad or webpage.
  • When you're in Code view, the workspace shows your code with appropriate color coding and formatting.

You can customize your default workspace by setting your preferences.

View bar

The view bar lets you choose between Design view and Code view, preview your HTML, and publish your ad.


The toolbar contains tools for creating and manipulating elements on the stage and in the workspace. This includes tools for creating text and simple page elements, color selection tools, and 3D tools.

Tool Description

Selection tool
Select and move objects in the workspace.

Motion path tool
Draw curved motion paths for animated elements. This feature is unavailable for AMPHTML ads.

3D object rotate tool
Rotate objects in three dimensions.

3D object translate tool
Move objects in three dimensions.

Tag tool
Create HTML tags of any type by clicking and dragging on the stage.

Text tool
Add text.

Pen and Shape tools
Create SVG drawings, including elementary shapes with the Shape tools, and bezier curves with the Pen tool.

Color tools
Modify the color of elements in your project, including the element's fill, stroke and gradient fills.

3D stage rotate tool
Change your 3D view of the project.

Hand tool
Change your view of the workspace.

Zoom tool
Zoom in and out on your creative.

Viewport resize tool
Change the size of the viewport that you're designing for. This feature is unavailable for AMPHTML ads.

Tool options

The tool options bar shows options for the currently selected tool. For example, when the text tool is selected, the tool options bar shows font and text layout options.


Quick mode
Advanced mode

The timeline lets you create animations using keyframes. In Quick mode, the animation is created scene-by-scene; in Advanced mode you can animate each element separately.


The panels section of the interface contains the Color, Properties, TextComponents, CSS, Responsive, Events, Dynamic, Library, and Ad Validator panels. The panels can be resized, rearranged, combined, and closed. Learn more about organizing panels.

Document tabs

When multiple documents are open, their filenames will display on separate tabs. You can switch between documents by clicking a tab, or pressing Ctrl+Tab to jump to the next document or Shift+Ctrl+Tab to jump to the previous document.

If the document tabs won't all fit in the window, you can see a list of all open documents in a pop-up menu by clicking the More icon  to the right of the tabs. Select a document to switch to it, or hover over its filename and click the x to close it.

Was this article helpful?
How can we improve it?