Clear search
Close search
Google apps
Main menu

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, Components, Events, CSS, Responsive, Dynamic, and Asset Library panels

The workspace

In the center of the Google Web Designer interface is the workspace. In Design mode, the workspace shows your images, text, and other elements visually, just as they will be displayed in a browser. In Code view the workspace shows your code with appropriate color coding and formatting.

View bar

The view bar lets you choose between Design and Code modes, lets you preview your HTML and publish your ad, and lets you change the zoom level and which page you're working on.


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

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

Canvas tools
Create canvas based shapes, 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 elements fill, stroke and gradient fills

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

Hand tool
Change your view of the workarea

Zoom tool
Zoom in and out on your creative

Viewport resize tool
Change the size of the viewport that you're desinging for.

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, Components, Events, CSS, Responsive layout and Asset Library panels. The panels can be resized, rearranged, and combined.

Was this article helpful?
How can we improve it?