Do you build things with AMP? Fill out the AMP Developer Survey!
AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

Adding more pages

Now that you are familiar with adding a page to a Web Story, adding the next pages in our "The Joy of Pets" story is very similar. Based on the information provided below, go ahead and create the remaining pages by using what you've learned so far. If you get stuck, look at the completed (pets-completed.html) code.

TIP – Remember that each page needs a unique "id" attribute (e.g., id="page1").

Page 1: Cats

Demonstrates how to display an image and text in a single layer.

  • Contains 1 layer:
    • Implements the vertical template.
    • Contains 3 elements:
      • An <h1> element with the title: Cats
      • A responsive amp-img (cat.jpg, 720 x 1280px)
      • A <q> element for the following quotation: Dogs come when they're called. Cats take a message and get back to you. --Mary Bly
Page 1 - Cats

Page 2: Dogs

Demonstrates how to arrange text and display a screen-filling image with two layers.

  • Contains 2 layers:
    • Layer 1: Implements the fill template, and contains a responsive amp-img (dog.jpg, 720 x 1280px).
    • Layer 2: Implements the thirds template and contains 2 elements:
      • An <h1> element with the title: Dogs
      • A <p> element that specifies a grid-area that occupies the lower-third and contains the following text: Dogs were probably the first tame animals. They have accompanied humans for some 10,000 years. Some scientists assert that all dogs, domestic and wild, share a common ancestor in the small South Asian wolf.

Page 3: Birds

Demonstrates how to arrange text, display a screen-filling image, and provide background audio for the page.

  • Contains 3 layers:
    • Layer 1: Implements the fill template, and contains a responsive amp-img (bird.jpg, 720 x 1280px).
    • Layer 2 Implements the vertical template and contains one element:
      • An <h1> element with the title: Birds
    • Layer 3: Implements the vertical template and contains one element:
      • A <q> element for the following quotation: A bird is three things: Feathers, flight and song, And feathers are the least of these.--Marjorie Allen Seiffert
      • This third layer specifies class="bottom" to align the child elements to the bottom of screen.
  • Plays an audio file in the background while the page is displayed. You can play audio in the background for the whole story or for a single page. To play audio for a page, add the background-audio="assets/bird-singing.mp3" attribute to the <amp-story-page> element.

Page 4: Rabbits

Demonstrates how to arrange text and display a screen-filling video for the page.

  • Contains 3 layers:
    • Layer 1: Implements the fill template, and contains a responsive amp-video (rabbit.mp4).
      • Remember to add the required script for the amp-video component in your <head> section so the video appears.
      • Specify a poster image (rabbit.jpg). This attribute is required for valid AMP stories.
      • Set the video to play automatically with the autoplay attribute. This attribute is required for valid AMP stories.
      • Set the video to automatically loop back with the loop attribute.
      • Set the dimensions to width="720" height="1280" and layout="responsive".
    • Layer 2 Implements the vertical template and contains one element:
      • An <h1> element with the title: Rabbits
    • Layer 3: Implements the vertical template and contains one element:
      • A <p> element that contains the following text: Rabbits can learn to follow simple voice commands and come when called by name, and are curious and playful.
      • Apply the bottom CSS class to the layer to align the child elements to the bottom of screen.

Our "Joy of Pets" story is nearly complete. We'll use animations in our last page to bring all the pets together.

Previous chapter Next chapter