How to Create Google Web Stories

By: Saurabh Kumar Image Credit: Google.com

[{"selector":"#anim-7f860f0b-ea41-4f2f-a4d1-d2988d874259 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-a050e27d-c6fd-40d9-9b90-59109ab2e2c1","keyframes":{"opacity":[0,1]},"delay":120,"duration":4500,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7b75649e-f8ab-4141-b4cd-6ff3f5fdfe63","keyframes":{"transform":["translate3d(0px, 225.80349%, 0)","translate3d(0px, 0px, 0)"]},"delay":120,"duration":4500,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Google Web Stories is a visual full-screen format content designed to show long articles in a short and visual way to the user. Image Credit: Google.com

[{"selector":"#anim-fdd4767a-690f-422e-a638-6fd533ef6754 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-c0b04902-b3b9-4fa5-8b01-2c6965ef962d","keyframes":{"opacity":[0,1]},"delay":120,"duration":4500,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8c10b291-7443-4550-a534-a2f6e4694bcb","keyframes":{"transform":["translate3d(0px, 278.79813%, 0)","translate3d(0px, 0px, 0)"]},"delay":120,"duration":4500,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] It was launched by Google in February 2018 as AMP Stories, later it was renamed Google Web Stories. Image Credit: Google.com

[{"selector":"#anim-51dd2dcd-926e-414d-aa31-e6ed0797380a [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-d7c4e8b6-589a-4117-aa12-8b9204f89925","keyframes":{"opacity":[0,1]},"delay":120,"duration":4500,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8d2fc1b6-b5bd-41a1-9b7e-d8068026e06d","keyframes":{"transform":["translate3d(0px, 278.79813%, 0)","translate3d(0px, 0px, 0)"]},"delay":120,"duration":4500,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] A web Stories is mainly a mixture of images, videos, and gifs whose purpose is to explain the content in short words. Image Credit: Google.com

[{"selector":"#anim-396c06e0-1768-4ba4-8667-194ee8b1150b [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(23.675180948169224%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-9a121c0d-b0e3-4cfd-8236-529772c26b0a","keyframes":{"opacity":[0,1]},"delay":120,"duration":4500,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-6fd4d61b-320a-4637-92fd-687f8b8286e0","keyframes":{"transform":["translate3d(0px, 225.80349%, 0)","translate3d(0px, 0px, 0)"]},"delay":120,"duration":4500,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Multiple slides are made in a web Stories, you can tap or swipe to read the content of each slide. This web Stories appears in Google’s Discover feature. Image Credit: Google.com

How to create web stories with google web stories plugin

[{"selector":"#anim-8027a5e0-505a-4f5b-8cff-95ee90d44ad1 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(-25%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-5724c022-7b3e-49d7-b2ef-f8da06bcc188","keyframes":{"opacity":[0,1]},"delay":150,"duration":4500,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0225409a-2aae-4657-a28b-73a4e1c4fbe7","keyframes":{"transform":["translate3d(0px, 170.49813%, 0)","translate3d(0px, 0px, 0)"]},"delay":150,"duration":4500,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c6119882-c6b3-443c-a025-bae763790236","keyframes":{"opacity":[0,1]},"delay":120,"duration":4500,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e7976426-82a9-477c-8466-7a6aafab3397","keyframes":{"transform":["translate3d(0px, -251.77554%, 0)","translate3d(0px, 0px, 0)"]},"delay":120,"duration":4500,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] There are many tools available to create web stories, the most popular being the Google Web Stories plugin and Makestories. In today’s post, we will know about both. Image Credit: Google.com

Installing the web stories plugin

[{"selector":"#anim-f4c333be-b10d-42d9-b3d2-fa07a41d531e [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(23.996818696260316%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-5bd5247f-f7f2-4ff6-9e67-79ff022db8cf","keyframes":{"opacity":[0,1]},"delay":140,"duration":4500,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-5e73862d-85de-49e9-805b-0f3db71b7d04","keyframes":{"transform":["translate3d(0px, 210.92741%, 0)","translate3d(0px, 0px, 0)"]},"delay":140,"duration":4500,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a489bd54-dba5-405f-bb1e-87276027f36e","keyframes":{"opacity":[0,1]},"delay":120,"duration":4500,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-fcd7233b-eb45-4847-ba35-7f2548fefbb2","keyframes":{"transform":["translate3d(0px, -398.70364%, 0)","translate3d(0px, 0px, 0)"]},"delay":120,"duration":4500,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] First of all, you have to come to the plugin section of your WordPress. Coming here, you have to click on Add New and search Web Stories.

General Setting

[{"selector":"#anim-0e614e26-b685-4cae-9ac3-04884dd768cd [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(25%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-b6e403c7-8650-47b1-8502-43187cf92cc4","keyframes":{"opacity":[0,1]},"delay":140,"duration":4500,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0ed01f63-28ff-4292-a989-17f36c130cc9","keyframes":{"transform":["translate3d(0px, 188.42916%, 0)","translate3d(0px, 0px, 0)"]},"delay":140,"duration":4500,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-14dbbb6c-8319-41f9-ba16-02506b51cb52","keyframes":{"opacity":[0,1]},"delay":120,"duration":4500,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d32a663b-12a5-455c-afcb-a22253c5eade","keyframes":{"transform":["translate3d(0px, -779.46069%, 0)","translate3d(0px, 0px, 0)"]},"delay":120,"duration":4500,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] After activating the plugin, you will come back to your dashboard where you will see the option of Stories, by clicking on it, you will come to the dashboard section of the Stories.

[{"selector":"#anim-543120fd-4d99-4940-9916-58f2b64e2dec [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(13.476927783563188%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-13222864-fdcf-4ca3-beec-946cf2286716","keyframes":{"opacity":[0,1]},"delay":120,"duration":4500,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-5eeb05e1-6f4c-4dc5-bdf6-26ad454e67a7","keyframes":{"transform":["translate3d(0px, 278.79813%, 0)","translate3d(0px, 0px, 0)"]},"delay":120,"duration":4500,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] After coming to the dashboard, you will see the option of setting in front of you, you have to open it by clicking that.

[{"selector":"#anim-2672533f-805f-4742-aa30-7aa755bf7577 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(-9.727707272346365%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-3c6d77fb-0741-4601-ac14-64a0220b1ea7","keyframes":{"opacity":[0,1]},"delay":120,"duration":4500,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-edd63590-7e09-445a-bef0-4e50557b44f5","keyframes":{"transform":["translate3d(0px, 225.80349%, 0)","translate3d(0px, 0px, 0)"]},"delay":120,"duration":4500,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] After opening the setting, you will not get much, but here you will get 3-4 settings, you will first get the option to upload the logo of your website.

[{"selector":"#anim-5da05bb5-ef51-4bef-9c1d-5bbf61db7c3b [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(-24.971420145952926%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-d6c1041c-eb40-4b30-a505-cc328b5dbb59","keyframes":{"opacity":[0,1]},"delay":120,"duration":4500,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f7147541-d88a-4eee-a5ce-3286f3ee6967","keyframes":{"transform":["translate3d(0px, 246.14504%, 0)","translate3d(0px, 0px, 0)"]},"delay":120,"duration":4500,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] You can upload a square-shaped logo here which is at least 96 x 96 pixels and its background is not transparent.

[{"selector":"#anim-2b563587-f697-4ee2-9f06-51c237afdf00 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(-5.375838229454573%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-c4afd36b-b950-46b8-8b82-7caaeae07dc4","keyframes":{"opacity":[0,1]},"delay":120,"duration":4500,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-aba5b8dd-3151-4411-8f1b-ce3f40eb8de8","keyframes":{"transform":["translate3d(0px, 225.80349%, 0)","translate3d(0px, 0px, 0)"]},"delay":120,"duration":4500,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] After uploading the logo, you will get the option to enter the analytics code here, you have to enter the analytics code of your website here.

[{"selector":"#anim-b423007f-7c20-48b5-a5fa-d9c16eed7ca5 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(13.375597499476244%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-b84db1ca-bf1c-40c4-82e5-b0cdc874e6a4","keyframes":{"opacity":[0,1]},"delay":120,"duration":4500,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a982c5dd-fa4b-4353-81b4-c242d83bbccb","keyframes":{"transform":["translate3d(0px, 225.80349%, 0)","translate3d(0px, 0px, 0)"]},"delay":120,"duration":4500,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] After this, if your website is monetized, then you go to the section of monetizing below and enter the publisher id and slot id of Google Adsense.

Create a new web Stories

[{"selector":"#anim-f626b956-d122-4747-b9ca-2a8763e363a4 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(12.86278444305133%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-482776cb-9ffd-48d0-8853-3cd1cbcf642b","keyframes":{"opacity":[0,1]},"delay":140,"duration":4500,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-fa87a243-f2dc-42eb-a1e3-a5a7d2ac4b36","keyframes":{"transform":["translate3d(0px, 278.79813%, 0)","translate3d(0px, 0px, 0)"]},"delay":140,"duration":4500,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-dbbc50aa-3edb-4b2a-8317-a705cdf97f0d","keyframes":{"opacity":[0,1]},"delay":120,"duration":4500,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-05da6795-c18f-4be2-82ae-b32561053f9e","keyframes":{"transform":["translate3d(0px, -758.2487%, 0)","translate3d(0px, 0px, 0)"]},"delay":120,"duration":4500,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Now all the settings of your Web Stories plugin have been completed. Now you can create a web Stories.

[{"selector":"#anim-07024533-83ce-468e-a18f-ed0f29248b58 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(25%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-43322c8a-191f-4b2b-b6fd-dad333f07323","keyframes":{"opacity":[0,1]},"delay":120,"duration":4500,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-185bf3b0-6a0e-4961-88e2-aa3d5c53bb3d","keyframes":{"transform":["translate3d(0px, 225.80349%, 0)","translate3d(0px, 0px, 0)"]},"delay":120,"duration":4500,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] To create web stories, click on Create New Stories. If you want to use a web Stories template then you can create web stories by clicking on explore template.

[{"selector":"#anim-809d887c-fe98-433a-92e8-4e6a3023e55f [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(-14.449995854478772%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-5c5a5180-9bbb-4114-978e-6b21bde82f9a","keyframes":{"opacity":[0,1]},"delay":120,"duration":4500,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ed36c335-f0f9-40a7-8f4c-ae8d17967dc1","keyframes":{"transform":["translate3d(0px, 278.79813%, 0)","translate3d(0px, 0px, 0)"]},"delay":120,"duration":4500,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] You will find many templates here. If not, you can create your own design by clicking on Create New Stories.

[{"selector":"#anim-663a7117-f9e7-4b8a-a59e-ed8acbfa9a5e [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(-24.099313968541445%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-527c8841-7f6e-4061-a352-994f22fd848c","keyframes":{"opacity":[0,1]},"delay":120,"duration":4500,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-25fbb621-4306-456c-9fd9-cc383b98134f","keyframes":{"transform":["translate3d(0px, 225.80349%, 0)","translate3d(0px, 0px, 0)"]},"delay":120,"duration":4500,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] This was how to create a web Stories through the Google Web Stories plugin. Friends, it completely depends on you how you design web stories. Image Credit: Google.com

[{"selector":"#anim-a26a94c4-caa8-4a29-847b-18ce20555823 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(24.961875564917552%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-94e79436-5609-4fe5-be68-3f50c71e41e2","keyframes":{"opacity":[0,1]},"delay":120,"duration":4500,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-eeda7275-c0b1-4121-bd1e-d27acfb94dd0","keyframes":{"transform":["translate3d(0px, 278.79813%, 0)","translate3d(0px, 0px, 0)"]},"delay":120,"duration":4500,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] The better you create the web Stories, the more chances you have of getting into the Discover section of your web Stories. Image Credit: Google.com