{"id":4891,"date":"2018-08-18T11:41:16","date_gmt":"2018-08-18T11:41:16","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&p=4891"},"modified":"2019-08-19T05:39:42","modified_gmt":"2019-08-19T05:39:42","slug":"amp-story","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/amp-story\/","title":{"rendered":"How to Install and use the AMP Stories"},"content":{"rendered":"

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.<\/p>\n

This tutorial helps you to add the stories on the AMP version and It requires the amp-story extension.<\/a><\/strong><\/p>\n

1.<\/span><\/strong> Download and Install the extension from the account area.<\/p>\n

2.<\/span><\/strong> Upload and Activate it.<\/p>\n

3<\/span>.<\/strong> Now the AMP Stories<\/strong>\u00a0option will be displayed in the WordPress options panel.<\/p>\n

\"\"<\/a><\/p>\n

4.<\/span><\/strong> After clicking the AMP story option you will be able to see the\u00a0add your new story options.<\/p>\n

\"\"<\/a><\/p>\n

5.<\/span><\/strong> Also, you will get the 4 different designs of AMP story, in which you will get the upload a video option.<\/p>\n

\"\"<\/a><\/p>\n

6.<\/span><\/strong> Now you can create AMP stories as many as you want.<\/p>\n

7.<\/span><\/strong> Click on Add New Slide button like below the screenshot.<\/p>\n

\"\"<\/a><\/strong><\/p>\n

In AMP story we have 4 design :<\/strong><\/span><\/h3>\n
    \n
  1. Design1<\/a><\/li>\n
  2. Design2<\/a><\/li>\n
  3. Design3<\/a><\/li>\n
  4. Design4<\/a><\/li>\n<\/ol>\n

    Design 1:<\/h4>\n

    \u00a0Design1 provides the following fields t<\/span>itle, description, logo image, Background Image which you can set as per your requirement.<\/span><\/span><\/span><\/p>\n

    \"\"<\/a><\/p>\n

    Add Animation:<\/strong><\/p>\n

    Design1 provides the\u00a0 Animation for t<\/span>itle, description, logo image,\u00a0 which you can set as per your requirement.<\/span><\/span><\/span><\/p>\n

    you can give Animation for Title<\/p>\n

    Enable Animation:<\/strong> If you want Animation for title then enable this option.<\/p>\n

    Animation:<\/strong> select Animation type here.<\/p>\n

    Duration:<\/strong> Enter duration time in this field.<\/p>\n

    Delay:<\/strong> Enter delay time in this field.<\/p>\n

    \"\"<\/a><\/p>\n

    The Output of Design 1:<\/h4>\n

    \"\"<\/a><\/p>\n

    Design 2:<\/h4>\n

    Design2 provides the following fields t<\/span>itle, description, Background Image which you can set as per your requirement.<\/span><\/span><\/span><\/p>\n

    \"\"<\/a><\/p>\n

    The Output of Design 2:<\/h4>\n

    \"\"<\/a><\/p>\n

    Design 3:<\/h4>\n

    Design3 provides the following fields t<\/span>itle, description, Background Image which you can set as per your requirement.<\/span><\/span><\/span><\/p>\n

    \"\"<\/a><\/p>\n

    The Output of Design 3:<\/h4>\n

    \"\"<\/a><\/p>\n

    Design 4:<\/h4>\n

    Design4 provides the following fields<\/span>Background video which you can set as per your requirement.<\/span><\/span><\/span><\/p>\n

    \"\"<\/a><\/p>\n

    The Output of Design 4:<\/h4>\n

    \"\"<\/a><\/p>\n

    8.<\/span><\/strong> Click on the “publish” button.<\/p>\n

    AMP Story Optional Settings<\/h3>\n

    \"\"<\/a><\/p>\n

    In the above setting, you can set this option in AMP story like Publisher Logo, Portrait Poster, Landscape Poster, Background Audio.<\/p>\n

    \"\"<\/a><\/p>\n

    AMP story Custom CSS:<\/strong> In this option, you can add Custom CSS for AMP story.<\/p>\n

    How to Change slug name in AMP<\/strong><\/h3>\n

    Follow the simple steps:<\/strong><\/p>\n

    First, Go to your WordPress admin area and click on Settings<\/strong> –>Permalink<\/strong>.<\/p>\n

    \"\"<\/a><\/p>\n

    Before changing the slug name output:<\/strong><\/h5>\n

    \"\"<\/a><\/p>\n

    AMP Stories Slug: <\/strong>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.<\/p>\n

    After changing the slug name output:<\/strong><\/h5>\n

    \"\"<\/a><\/strong><\/p>\n

    To make it easy, we have created a video tutorial on AMP story that you can watch below.<\/h4>\n
    \nhttps:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/08\/Recording-21.mp4<\/a><\/video><\/div>\n

    That\u2019s it for this tutorial!<\/strong><\/p>\n

    We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.<\/p>\n

    \n\t\t\tAsk your Questions Directly!<\/strong>
    \n\t\t\t
    If you can't find the solutions in this article, then just ask us in the comments and we will answer it for you!<\/div>\n\t\t\t