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 :
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.
can we show all amp stories as post on home page and categorise for different pages
Hi aman sharma,
Right now this feature is not created in amp stories in future we will create this feature.
Hello, do you have plans to reduce the price of this extension? The official AMP plugin now offers a free built-in AMP stories creator, and there’s also a free online AMP stories builder supported by Google.
Hi Mark,
We are also planning to make our AMP story extension open-source with basic functionality and for more extra features only we are offering in the pro version of it.
Hi Sonali,
Thank you for your kind reply. Hope it will be quite soon 🙂
What is the best IMG/Photo size? Error happened.
【Warning: getimagesize(): 】
Hi Tomo,
Will you please share some screenshots for us to understand your issue properly.
Getting this error when running my story through the Amp tester.
Tag ‘amp-story’ is not allowed to have any sibling tags (‘body’ should only have 1 child).
Hi Gabriel Brangers,
Will you please contact our technical team from here- https://ampforwp.com/support/ they will help you as soon as possible.
Hi,
I recently installed the official Google Web Stories plugin ( https://wordpress.org/plugins/web-stories/ ) but realized that amp pages are not being generated. Is there any way to resolve this issue?
Thanks
Hi Hilton,
Will you please contact our technical team from here- https://ampforwp.com/support/ they will help you as soon as possible.