Tag: Web Stories

Making Awesome Web Stories 10 Free Resources

a story made using wordpress
Learn more how we made it

Creating Web Stories on WordPress

This Story is made using WordPress Free Plugin by Google Web Stories.

Please find a list of 10 useful Resources for making incredible web stories for your blog.

Unsplash

Unsplash offers a free plugin to sync with your WordPress blog to directly display its library of free images and videos while you are making web stories right in your media gallery. Visit Unsplash Here: https://unsplash.com/

Freepik

Freepik is a project by Freepik Company, The Company also has awesome projects like Flaticon,
and Slidesgo.
Freepik offers a huge collection of free to use Image resources for you, they also offer a premium plan that’s obviously a more advanced collection. Visit Freepik Here: Freepik

PngTree

Pngtree, founded in Dec 2016, has millions of PNG images and other graphic resources for everyone to download. Our aim is to build the largest free PNG image platform in the world, serve for all the professional designer and people who have design skills. Helping users save time and improving their projects efficiently is our duty. All of our designers have been real name authenticated and all of their works have a commercial license

The limitation is 2 free images on a account in a Day, you can unlock the limit with a premium subscription, so wisely download the Image file as you have two downloads a day on a free plan.

Another is adding an attribution to the free download, so if you have a good commercial usage you may sign up for a premium account.

Visit Png tree Here : https://pngtree.com/

Pexels

The best free stock photos & videos shared by talented creators. Also with a Photographer Leaderboard, a big Community, Everything from Images to videos is absolutely free to download.

Visit Pexels Here : https://www.pexels.com/

Favpng

Free Transparent PNG Images. Claims to have a database containing more than 16 million free transparent PNG files. All PNG images can be used for personal use unless stated otherwise.

Visit Favpng Here : https://favpng.com/

Burst By Shopify

Free stock photos for websites and commercial use, Download free, high-resolution images as its a shopify venture collections were created with entrepreneurs in mind.

Visit Burst Here : https://burst.shopify.com/

Freeimages

Browse over 300000 free stock photos and find the perfect royalty-free image quickly. Download free, high quality stock images, for every day or commercial use.

Visit Freeimages Here : https://www.freeimages.com/

Kaboompics

Every single day new photos of the highest quality are added to Kaboompics, You can download and use them for your own purposes – grace your blog posts, create lovely graphics for your social media accounts, make your website more appealing – all for free, including the commercial use!

Visit Kaboompics Here : https://kaboompics.com/

Vecteezy

Choose from over a million free vectors, clipart graphics, vector art images, design templates, and illustrations created by artists worldwide, Fully guaranteed images for personal or commercial use. Also offers a reasonable premium pricing for more unlimited downloads.

Good For : vector art, stock photos & videos, you may need for making web stories awesome.

Visit Vecteezy Here : https://www.vecteezy.com/

Gratisography

Gratisography, has quirkiest collection of high-resolution free stock images, images you just won’t find anywhere else.

Visit Gratisography Here : https://gratisography.com/

October 14, 2020
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.

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.

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.

Add New

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

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.

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.

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 and Features for Web Stories for WordPress

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 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.

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

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

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 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.

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 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 for publishing stories with ease of keyboard

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 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.

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

Page Attachment,

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.

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.

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’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.

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

🔥 Web Stories for WordPress 1.1 is up, and has a bunch of cool new features:

☑️ GIFs built-in, courtesy of @gifkeyboard
☑️ High quality text sets, courtesy of @iA
☑️ Video caption support for improved SEO + A11Y

👉🏼 Read more: https://t.co/kuDu40msI8 pic.twitter.com/RPI15yTkIv
— Paul Bakaus (@pbakaus) November 12, 2020
Please Find 10 Free Resources to make awesome Web Stories of-course in a web story below
October 11, 2020