Understanding pages

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.

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

1. Click the page indicator at the bottom of the document workspace.
2. If there are several page sizes in your ad, select a page that's the same size as the one you want to create.
3. In the pop-up menu, click the Add page button.

Rename a page

There's more than one way to change a page's name.

• Rename a page directly in the pages menu:
  1. Click the page indicator at the bottom of the document workspace.
  2. Double-click the page that you want to rename.
  3. Enter the new name.
  4. Press Enter.
• Rename a page in the page's properties:
  1. Click the page indicator at the bottom of the document workspace.
  2. Select the page that you want to rename.
  3. In the Properties panel, enter the new name in the Name field.

Duplicate a page

1. Click the page indicator at the bottom of the document workspace.
2. Select the page that you want to duplicate.
3. 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.
4. Name your new page in the Name field of the Properties panel.

Delete a page

1. Click the page indicator at the bottom of the document workspace.
2. Select the page that you want to delete.
3. In the pages pop-up menu, click the Delete page button.

Set a page as the primary page

1. Click the page indicator at the bottom of the document workspace.
2. In the pages pop-up menu, right-click the page that you want to make the primary page.
3. 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 ID - The target page to switch to. (This is the only configuration option for AMPHTML ads.) Transition - The motion effect that reveals the target page. Duration - The length of the transition in milliseconds. Doesn't apply if transition is set to none. Easing - The easing type for the transition. Direction - The direction from which the target page is revealed. Only applies to some transition types.

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.