Google Web Designer uses pages to show multiple scenes in one HTML document, with each scene on a separate page. Pages are commonly used in ads, where they represent a single-screen view for the ad. Here are some examples:
- A simple banner ad uses just one page.
- A simple expandable ad uses one page for the banner, and another page for the expanded view.
- A more complex ad has a primary page with several buttons that let the viewer navigate to different experiences on other pages, such as a video page or a coupon page.
Pages aren't limited to ads. You can use pages in HTML web pages by selecting HTML with Pages when you create a new file.
The set of pages for a document is known as the page deck.
On this page:
The pages menu
You can view all the pages in the page deck by clicking the page indicator at the bottom left corner of the document workspace. The pop-up menu lets you add, duplicate, and delete pages, as well as specify which page is the primary page—the page initially displayed to the viewer.
Add a new page
- Click the page indicator at the bottom of the document workspace.
- If there are several page sizes in your ad, select a page that's the same size as the one you want to create.
- In the pop-up menu, click the Add page
button.
button.Rename a page
There's more than one way to change a page's name.
- Rename a page directly in the pages menu:
- Click the page indicator at the bottom of the document workspace.
- Double-click the page that you want to rename.
- Enter the new name.
- Press Enter.
- Rename a page in the page's properties:
- Click the page indicator at the bottom of the document workspace.
- Select the page that you want to rename.
- In the Properties panel, enter the new name in the Name field.
Duplicate a page
- Click the page indicator at the bottom of the document workspace.
- Select the page that you want to duplicate.
- In the pages pop-up menu, click the Duplicate page
button. This will create a copy of the current page, including elements, components, and animations.
- Name your new page in the Name field of the Properties panel.
button. This will create a copy of the current page, including elements, components, and animations.Delete a page
- Click the page indicator at the bottom of the document workspace.
- Select the page that you want to delete.
- In the pages pop-up menu, click the Delete page
button.
Set a page as the primary page
- Click the page indicator at the bottom of the document workspace.
- In the pages pop-up menu, right-click the page that you want to make the primary page.
- Select Make primary from the pop-up menu. The primary page is indicated by a star
in the page icon.
Page properties
To view the properties for the current page, make sure the Properties panel is open and that no elements are selected. An easy way to deselect all elements is to click the gray area outside of the stage.
Pages and expandable ads
When you create a page that's designed to be the expanded state of an expandable ad, the Expanded option must be selected in the page's Properties panel. This option is set automatically on the expanded page that's created for you when you choose Expandable as the ad type for a new file.
By default, expandable ads expand down and to the right. If you want your ad to expand in a different direction, you can reposition the expanded page relative to the primary page.
Centering an ad
Because ads may need to work on different devices and in different browser sizes, Google Web Designer lets you center your ad content in whatever viewport the ad is being displayed in. This lets you design for a range of sizes, placing the calls to action and other content in the center of the ad, with a background image that works in different-sized viewports. If you want to center an ad, check the Centered box in the page's Properties panel.
Alternate pages for different orientations
You can design your ad for both portrait and landscape orientations by using a separate page for each orientation. Specify the other page's ID (not its name) in the Alternate page property for each page. The ad will detect the orientation of the viewport and display the page with the matching orientation.
Learn more about designing for multiple screen sizes.
Pages and events
You can control how users navigate between pages by using events. For example, you might use a Tap Area component to send a "Go to page" action to a target page, or you could use an orientation change between landscape and portrait modes to switch to an appropriately formatted page.
Page deck actions
The page deck can perform the following action with these configuration options:
| Action | Configuration options |
|---|---|
| Go to page |
|
Page events
You can also set up other actions that will trigger in response to events sent by the page. Pages send the following events:
| Event | Description |
|---|---|
| Page activated | Sent when the page is shown. |
| Page deactivated | Sent when the page is hidden. |
| Page loaded | Sent when all the components of the page are loaded. |
| Ready to present the page | Sent when the page has cached content and is ready to display, but before any animations begin. |
| Shake | Sent when a mobile device detects shaking. |
| Tilt | Sent when a mobile device detects a tilt. |
| Rotate to portrait | Sent when a mobile device rotates from landscape to portrait orientation. |
| Rotate to landscape | Sent when a mobile device rotates from portrait to landscape orientation. |
| Attached (deprecated) | Use Page activated instead. |
| Detached (deprecated) | Use Page deactivated instead. |
Page deck events for AMPHTML ads
For AMPHTML ads, the page deck sends the following event:
| Event | Description |
|---|---|
| Page change | Sent when the page changes. |