Edit your code in Code view
When viewing Web Designer source files for ads and HTML pages, you can switch between Code view and Design view. The edits that you make in Code view are reflected in Design view, letting you instantly test how changes in your code affect your designs.
To switch to Code view:
Click the Code view button in the top right corner of the window.
Design view panels and some menu commands are unavailable in Code view.
Code view settings
You can adjust the following Code view options in your preferences:
- Color theme
- Key map
- Remember zoom percentage
- Show trailing spaces
- Highlight selection matches
- Auto close brackets
- Auto close tags
- Auto completion
- Use spaces for tabs
- Show minimap
Working with your code
The following features make it easier to write and edit code. You can also learn how to navigate in Code view within your document or between files.
To change the code text size, use the zoom controls (- and +) on the right side of the footer bar. By default, Google Web Designer remembers the zoom level you set for Code view.
Collapse code blocks
Use the arrows in the left margin to collapse and expand blocks of code.
By default, Google Web Designer automatically indents new lines as you type. If a block of code isn't properly indented (for example, if you copied and pasted in code from another file), you can select the code and press Tab to indent it.
Code auto completion
By default, Google Web Designer displays suggestions as you type. If you've turned off this preference, you can press Ctrl+Space (Windows) or ⌘+Space (Mac) to trigger auto completion.
You can add popular GreenSock animation tools using a menu command if your environment is set to Display & Video 360 or your project is an HTML page.Note: This option isn't available if your ad environment is set to Google Ads or Google AdMob.
To insert a GreenSock library:
- Make sure you're in Code view.
- From the File menu, select Include JS Library > GreenSock.
- Select a library from the list.
You can repeat the process to add multiple libraries.
Differences from the published code
Code view doesn't necessarily reflect how your code will look when you publish your document. The code you see while authoring your document may be compressed to take less space, and some code may not be visible in Code view at all, but will be included within the published file.