Google Web Designer 有一個大型的中心區域，您可以在這裡建立專案及編輯程式碼。中心區域周圍有工具列、工具選項列、時間軸以及一組面板，您可以利用這些面板修改元素、新增元件、新增事件及執行各種操作。
文件
Web Designer 介面中央會顯示目前的文件。
有兩種不同的文件檢視模式：
- 設計檢視會以視覺化方式呈現文件的圖片、文字和其他元素，所有內容都比照瀏覽器中實際顯示的情況。白色的「中心區域」代表廣告或網頁的可見區域。
- 程式碼檢視會顯示列出相應色彩編碼和格式設定的文件程式碼。
您可以調整偏好設定，藉此自訂設計檢視和程式碼檢視。
1. 工具列 2. 工具選項列 3. 時間軸 4. 面板 5. 檢視列
檢視列
檢視列可讓您切換設計檢視和程式碼檢視、在瀏覽器中預覽文件，以及發布廣告。
工具
工具列中提供了可在中心區域建立和操作元素的工具，包括建立文字和簡單網頁元素所需的工具、色彩選擇工具和 3D 工具。
| 工具 | 說明 |
|---|---|
選取範圍工具 |
在中心區域選取並移動物件。 |
動態路徑工具 |
繪製動畫元素的曲線動態路徑。不適用於 AMP HTML 或圖像廣告。 |
3D 物件旋轉工具 |
在三度空間中旋轉物件。 |
3D 物件平移工具 |
在三度空間中移動物件。 |
元素工具 |
在中心區域以點選及拖曳方式建立任何類型的 HTML 標記。 |
| 畫筆、橢圓形、矩形和線條工具 |
建立可擴充向量圖形繪圖，包括使用圖形工具建立的基本圖形，以及使用畫筆工具建立的貝茲曲線。 |
文字工具 |
新增或編輯文字。 |
矩形、橢圓和多邊形遮罩 |
在元素中新增裁剪路徑遮罩。 |
矩形、橢圓形和多邊形背景工具 |
使用背景濾鏡新增 div。僅適用於圖片和影片文件。 |
填滿、筆觸和漸層工具 |
修改專案中元素的色彩，包括元素填滿色彩、筆觸和漸層填充色彩。 |
滴管工具 |
從中心區域的元素中選取顏色。 |
3D 中心區域旋轉工具 |
變更專案的 3D 檢視畫面。 |
瀏覽工具 |
變更中心區域的檢視模式。 |
縮放工具 |
縮放您的廣告素材。 |
 填滿色彩和筆觸色彩 |
變更使用中的填滿色彩和筆觸 (框線) 色彩。 |
工具選項
頂端的工具選項列會顯示目前所選工具的選項。舉例來說，如果您選取了文字工具，工具選項列就會顯示字型和文字版面配置的選項。
時間軸
時間軸可讓您使用主要畫面格建立動畫。在快速模式中是以場景為單位建立動畫，在進階模式中則可分別製作每個元素的動畫。
面板
面板有許多種類，包括色彩、屬性、文字、元件、CSS、CSS 效果、回應式、事件、動態、資源庫、廣告驗證工具和大綱工具。您可以調整這些面板的大小，也可以合併、關閉及重新排列面板。進一步瞭解如何整理面板。
文件分頁
當您開啟多份文件時，檔案名稱會顯示在個別分頁上。您可以點選分頁標籤切換到不同文件，也可以按下 Ctrl + Tab 鍵跳到下一個文件，或按下 Shift + Ctrl + Tab 鍵跳到上一個文件。
如果視窗內無法容納全部的文件分頁，您只要按一下分頁右側的「更多」圖示 