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.

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 also lets you add, duplicate, and delete pages, as well as specify which page is the primary page — the page that is 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 under the Page properties.

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 pages" button . This will create a copy of the current page, including elements, components, and animations.
  4. Name your new page in 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

This feature is unavailable for AMPHTML ads.
  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 marked by a star.

Page properties

Pages and expandable ads

This feature is unavailable for AMPHTML 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

This feature is unavailable for AMPHTML ads.

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

This feature is unavailable for AMPHTML ads.

You can design your ad for both portrait and landscape orientation 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.

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.
  • 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.
 

Events

These events are unavailable for AMPHTML ads. For events sent by the page deck of AMPHTML ads, see below.

You can also set up other actions that will trigger in response to events detected 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.

Events for AMPHTML ads

For AMPHTML ads, the page deck sends the following event:

Event Description
Page change Sent when the page changes.
Was this article helpful?
How can we improve it?