How to Install and use the AMP Stories

AMP stories is a visual storytelling format for the open web. The stories allow readers to immerse in a tappable, full-screen content. The format enables publishers and marketers to create visual content that is fast, open, and user-first.

This tutorial helps you to add the stories on the AMP version and It requires the amp-story extension.

1. Download and Install the extension from the account area.

2. Upload and Activate it.

3. Now the AMP Stories option will be displayed in the WordPress options panel.

4. After clicking the AMP story option you will be able to see the add your new story options.

5. Also, you will get the 4 different designs of AMP story, in which you will get the upload a video option.

6. Now you can create AMP stories as many as you want.

7. Click on Add New Slide button like below the screenshot.

In AMP story we have 4 design :

  1. Design1
  2. Design2
  3. Design3
  4. Design4

Design 1:

 Design1 provides the following fields title, description, logo image, Background Image which you can set as per your requirement.

Add Animation:

Design1 provides the  Animation for title, description, logo image,  which you can set as per your requirement.

you can give Animation for Title

Enable Animation: If you want Animation for title then enable this option.

Animation: select Animation type here.

Duration: Enter duration time in this field.

Delay: Enter delay time in this field.

The Output of Design 1:

Design 2:

Design2 provides the following fields title, description, Background Image which you can set as per your requirement.

The Output of Design 2:

Design 3:

Design3 provides the following fields title, description, Background Image which you can set as per your requirement.

The Output of Design 3:

Design 4:

Design4 provides the following fieldsBackground video which you can set as per your requirement.

The Output of Design 4:

8. Click on the “publish” button.

AMP Story Optional Settings

In the above setting, you can set this option in AMP story like Publisher Logo, Portrait Poster, Landscape Poster, Background Audio.

AMP story Custom CSS: In this option, you can add Custom CSS for AMP story.

How to Change slug name in AMP

Follow the simple steps:

First, Go to your WordPress admin area and click on Settings –>Permalink.

Before changing the slug name output:

AMP Stories Slug: If you want to change the slug name of AMP Story then you can enter slug name in this field and click on the save changes button.

After changing the slug name output:

To make it easy, we have created a video tutorial on AMP story that you can watch below.

That’s it for this tutorial!

We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.

Share
Published by
Ahmed Kaludi

How to create an AWeber form in AMP

If you want to add an AWeber form in AMP then first you need to…

3 years ago

How to setup webpushr notification in AMP

Webpushr is the fastest growing web push notifications platform that marketers love & developers rely…

3 years ago

How to add Adobe Analytics in AMP

Follow these steps to add Adobe Analytics in AMP Step 1: Go to WordPress Admin Area -> AMP…

3 years ago

What is the CWV plugin all about

Core Web Vitals are the subset of Web Vitals that apply to all web pages,…

4 years ago

How to fix “Alternate page with proper canonical tag” Page Index issue in Google Search Console

The following reasons can be shown for non-indexing. Server error (5xx) Your server returned a 500-level…

4 years ago

Google Analytics ( GA4 ) integration in AMPforWP

We have added the Google Analytics 4 ( GA 4 ) integration in AMPforWP v1.0.80.…

4 years ago