Search
Clear search
Close search
Google apps
Main menu

Understanding pages

Pages are a construct that Google Web Designer uses to show multiple scenes in one HTML document. Pages are commonly used in HTML ads, where they represent a single-screen view for the ad. For a simple banner ad, only one page would be necessary. In a simple expandable ad, one page would be used for the banner, and another page would be used for the expanded view.

A more complex ad may consist of many pages. For example, an ad might have a first page with several buttons that let the user navigate to different experiences - a video page, a coupon page, and so forth.

In addition to ads, the Pages construct is also available for your HTML documents if you select "HTML with Pages" when you create a new file.

Pages can be added, duplicated, and deleted in the pages pop-up menu at the bottom of the stage, where you can also specify which page is the primary page.

To add a new page to your ad:

  1. Click the page indicator at the bottom of the stage.
  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 pages pop-up menu, click the add pages button.

To rename a page in your ad:

  1. Select the page from the page indicator at the bottom of the stage.
  2. Do one of the following:
    • In the component properties area of the properties pane, change the page name.
    or
    1. Select the page from the page indicator at the bottom of the stage.
    2. Double-click the page name you want to change.
    3. Rename your page.
    4. Press Enter.

To duplicate a page in your ad:

  1. Click the page indicator at the bottom of the stage.
  2. Select the page you want to duplicate.
  3. In the pages pop-up menu, click the duplicate pages button. This will create a copy of the current page, including elements, components, and animations.
  4. Name your new page in the property panel.

To delete a page from your ad:

  1. Click the page indicator at the bottom of the stage.
  2. Select the page you want to delete.
  3. In the pages pop-up menu, click the delete pages button. This will delete the current page.

To set a page as the primary page:

  1. Click the page indicator at the bottom of the stage.
  2. In the pages pop-up menu, right click on the page that you want to make the primary page.
  3. Select Primary page from the pop-up menu. The primary page is marked by a star.

Pages and expandable ads

When you create a page that's designed to be the expanded state of an expandable ad, you need to be certain that Expanded is selected in the page's Properties panel. This is set automatically on the expanded page that's created for you when you choose Expandable as the ad type.

By default, expandable ads expand down and to the right. If you want your ad to expand in a different direction, you can change the relative position of the expanded page visually.

To position the expanded page relative to the banner page:

  1. Navigate to the primary page using the page indicator at the bottom of the stage.
  2. Click the ad expansion view button
  3. Position the expanded view relative to the banner. You cannot drag the expanded page beyond the borders of the banner view.
  4. Click the ad expansion view button again to return to design mode.

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 ads, with a background image that works in different sized viewports. If you wish to center an ad, select Centered in the the page's Properties panel.

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 change to an appropriately formatted page.

Pages can also send the following events to other pages or to ad environments:

Event Description
Page activated Sends an event when the page is shown.
Page deactivated Sends an event when when the page is hidden.
Page loaded Sends an event when all the components of the page are loaded.
Ready to present the page Sends an event when the page has cached content and is ready to display, but before any animations begin.
Shake Sends an event when the mobile device detects shaking.
Tilt Sends an event when the mobile device detects a tilt.
Rotate to Portrait Sends an event when a mobile device rotates from landscape to portrait orientation.
Rotate to Landscape Sends an event when a mobile device rotates from portrait to landscape orientation.
Attached deprecated Sends an event when when the page is attached to the DOM, before the page is loaded.
Detached deprecated Sends an event when when the page is detached from the DOM, after the first attachment, but before the page is loaded.
Was this article helpful?
How can we improve it?