Categories
AMP On WordPress Wordpress

Stunning Web Stories for WordPress Turbo-Charge Your 2020 Blog

Web Stories on WordPress A Step-Wise Tutorial

Web Stories Are Stunning!

Using the WordPress Plugin for Web Stories Here is an example

Installing Web Stories for WordPress Plugin


Plugins > Add New > Type ” Web Stories ” Install and Activate.


plugins add new

Settings For Web Stories for WordPress Plugin


From Admin Menu, you have three options as in the screenshot above.

Dashboard
The Dashboard shows you everything to get started with the stories,
use the Create a New Story button to jump to the editor and add a story.

dashboard web stories

All Stories

The all stories option shows you web stories that you have already made and saved, in all modes published, drafts, etc. like posts.

all Stories page WordPress

Add New

It takes you to the editor to add a new story.

add new web stories with wordpress

If we see tab wise on the Dashboard, it shows you three options
(1) My Stories, (2) Explore Templates (3) Editor Settings

My Stories 

My Stories option, relates to your web stories that you have created and display them in a format All Stories, drafts, and published if you have many search bar.

my stories word press


Explore Templates

Explore the Templates option relates to pre-made templates bundled along with the WordPress Plugin. It makes it easy to get started and understand how web stories work.

web stories templates

Editor Settings Google Analytics for Web Stories for WordPress

In the editor settings, you can add your Google Analytics code to track views of the story, add your logo that should be precisely 96×96 pixels a perfect square. In the end, a data-sharing option checkbox to improve the plugin.

editor settings wordpress web stories plugin

Editor Settings and Features for Web Stories for WordPress



add new stories with images in wordpress google web stories


Upload Image or Video option connects your WordPress default media gallery to upload the images or videos. You can select any web stories supported picture formats or video clips and attach them to your web stories.

With Blue Upload Button you can add the New Files as Uploads.

text in web stories for wordpress plugin

Text option as T has few presets for Text Formats, Like Heading ( H1, H2, and H3), Paragraph, Caption, and Overline.

SEO of your content into headings and subheadings short paragraphs and citations.

basic shapes for web stories

Shapes next to Text option has 12 Basic shape elements that can be very useful to highlight and better display the story format.


add title to web stories on wordpress

Add the Title option Here you can give a title to the story.
It automatically creates a permalink for the web store.


below art board web stories

Below the Editor, you have Delete Page, Duplicate Page, New Page, Undo and Redo options.

Duplicating the page with this option to take all the elements to the next page as same and change a few details like text or pictures as your story usually goes, the background can be the same for pages, and text you can edit.

page advancement for web stories

Page advancement feature at the end of this panel to control whether the story auto-plays or the reader has to tap for the next page or slide.

The duration can also be controlled default is 7 seconds.

safe zone marks

I recommend keeping elements inside the safe Zone.

Disable or Enable Safe Zone Option. Safe Zone is a markup for adjusting your elements in a zone that is viewable to all devices. By default is enable.

Below that, you have the Grid View Option.

grid view web stories wordpress

Grid view shows all your web stories pages in a grid view, easy to select one of the pages to edit if you have 30 Pages on a story.

keyboard shortcuts

Keyboard Shortcuts for publishing stories with ease of keyboard

links in webstories

Adding Links in Web Stories, This is useful if you have an Affiliate link, or have to link a visitor to your post.

design tab web stories for wordpress plugin

Design Tab for Web Stories WordPress Plugin makes it easy to use Google fonts, select layers, change font colours, Size Position, and all preliminary design features a plugin could have inbuilt.

Page Attachment Links

Adding Links To Web Stories On Background With Swipe Up Learn More Button

To add links to your story when a user can swipe up to go to a page with text as “Learn More” or whatever you want to give kindly have a look at the below screenshot.

learn more

To add this Learn More Button in our Web Story select the background and add the URL this is called

Page Attachment,

page attachment links

Also, you may change the text from “Learn More” to anything you wish to another awesome feature of the web stories for WordPress plugin.

Displaying Web Stories for WordPress on Posts or Pages



To display web stories, open your blocks in the editors select Stories Block,
Next, add the URL of your published story to embed like in the screenshot below.


embedding web stories

Add a Cover for Web Stories

Cover for the web stories – Dimensions for the image is 360 x 600 pixels.

Make the cover attractive, as a cover of a Good Story Book.

Correctly Embedding Web Stories on WordPress

Structured Data SEO for Web Stories for WordPress

Web Stories being a post type, can easily select an Article in a Yoast free plugin, a screenshot above.

You have to go to Yoast > Search Appearance > Schema Settings.

For Another Popular and better plugin than Yoast, Rank Math Free also fully supports the Web Stories for WordPress,

rank math web stories

Rank Math’s Dashboard shows a toggle to enable Google Web Stories for WordPress.

Here is a small checklist :

Check this official link by Google to check best practices for Web Stories SEO.

Minimum And Maximum Pages for Web Stories
Ideally, a web story should have 10-20 pages, but a minimum of 5 and a maximum of 30 pages. Make a story with a minimum of 5 and a maximum of 30-page slides.

Completeness in the story
The story should be complete, should not end without any reason or right direction.

For example, if a recipe story could be for making a new salad, but that should cover each part from starting with vegetables used to being served on the table.

What you are trying to narrate in the story should be valid and relate the pages from start to end. Avoid skipping pages and publish information that is not clear what you want to narrate.

Use of Minimum Text With Clear Fonts Size Display
Title length and Text in story pages should be short as it’s for mobile devices; the fonts should be clear and readable for everyone. If possible, keep Text below 10 to 12 words per page.

Guidelines for Videos
If you add videos, use short clips 15 seconds per slide, use any app to clip the long videos into short clips, and see what video format would work best that uses minimum storage space and outputs with the best resolution.

Follow Content Guidelines
The Web Stories can also get into Google Discover on Android phones, so best is to follow the Discover content guidelines.

Don’t overuse multiple elements on a story page.
Please keep it simple, elegant, light, and short don’t use more and more elements on a single slide page.

As the user views a page for 5 seconds to 7 seconds, keep minimum details and Text that a user can read easily in that view time.

Guidelines for Images
Use good quality resolution images that are clear and unique in your story and relate to your narrative. As the story is in a Portrait mode, avoid the use of landscape format.

I usually keep on improving Checklists on my blog. One of my lists can be of your interests here 15 Tips to Avoid Structured Data Errors AMP on WordPress.

Another useful resource to read about SEO for web stories is from the official AMP Blog here.

Seo Web Stories WordPress: Official Video

Templates Included

Pick up a pre-installed template for your First Story, change the same with your unique content, like Title, headings, and page story you have created,
to quickly get started with the google web stories.

web stories templates

Note: Your content, whatever you make, should always be unique.

With the templates, you get a clear idea of how the stories should work properly and how many visitors you are getting on your stories with google analytics,

If you have any errors or warnings at the google search console, you can also validate that with a fix.

Updates :

Friday 13 November 02:02
  • With Latest Release Now WordPress Version 1.1 Web Stories Plugin Also Supports Gifs from Tenor, that you can add in your stories, Videos and Ai Writer

Please Find 10 Free Resources to make awesome Web Stories of-course in a web story below

By Rahul Kharbanda

Hi,
I am Rahul Kharbanda from India. I hope you like all the content I made. Welcome to comment & connect.
I am on Quora , Github , Twitter

3 replies on “Stunning Web Stories for WordPress Turbo-Charge Your 2020 Blog”

Leave a Reply