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 modify elements, add components, add events, and more.
The document
In the center of the Web Designer interface, you see the current document.
Two different document views are available:
- Design view shows the images, text, and other elements of your document visually, just as they would display in a browser. The white stage represents the visible area of the ad or webpage.
- Code view shows the document code with appropriate color coding and formatting.
You can customize Design view and Code view by setting your preferences.
1. Toolbar 2. Tool options bar 3. Timeline 4. Panels 5. View bar
View bar
The view bar lets you choose between Design view and Code view, preview your document in a browser, and publish your ad. The view bar is available for HTML5 documents, video documents, and image ad documents.
Tools
The toolbar contains tools for creating and manipulating elements on the stage. This includes tools for creating text and simple page elements, color selection tools, and 3D tools.
| Tool | Description |
|---|---|
| 👁 Image Selection tool |
Select and move objects on the stage. |
| 👁 Image Motion path tool |
Draw curved motion paths for animated elements. Unavailable for AMPHTML or image ads. |
| 👁 Image 3D object rotate tool |
Rotate objects in three dimensions. |
| 👁 Image 3D object translate tool |
Move objects in three dimensions. |
| 👁 Image Element tool |
Create HTML tags of any type by clicking and dragging on the stage. |
| 👁 Image 👁 Image 👁 Image 👁 Image Pen, Oval, Rectangle, and Line tools |
Create SVG drawings, including elementary shapes with the shape tools, and bezier curves with the Pen tool. |
| 👁 Image Text tool |
Add or edit text. |
| 👁 Image 👁 Image 👁 Image Rectangle, Oval, and Polygon masks |
Add a clip path mask to an element. |
| 👁 Image 👁 Image 👁 Image Rectangle, Oval, and Polygon backdrop tools |
Add a div with a backdrop filter. Available only for image ads and video ads. |
| 👁 Image 👁 Image 👁 Image Fill, Stroke, and Gradient tools |
Modify the color of elements in your project, including the element's fill, stroke and gradient fills. |
| 👁 Image Eyedropper tool |
Select a color from an element on the stage. |
| 👁 Image 3D stage rotate tool |
Change your 3D view of the project. |
| 👁 Image Hand tool |
Change your view of the stage. |
| 👁 Image Zoom tool |
Zoom in and out on your creative. |
| 👁 Image Fill color and stroke color |
Change the active fill and stroke (border) color. |
Tool options
The tool options bar at the top 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.
Timeline
The timeline lets you create animations using keyframes. In Quick mode, the animation is created scene-by-scene; in Advanced mode you animate each element separately.
Panels
Panels include the Color, Properties, Text, Components, CSS, CSS Effects, Responsive,Events, Dynamic, Library, Ad Validator, and Outliner panels. The panels can be resized, rearranged, combined, and closed. Learn more about organizing panels.
Document tabs
When multiple documents are open, their filenames 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 👁 Image
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.