{"id":9607,"date":"2020-07-23T15:00:12","date_gmt":"2020-07-23T13:00:12","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=9607"},"modified":"2020-11-13T14:08:03","modified_gmt":"2020-11-13T13:08:03","slug":"google-web-stories","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/google-web-stories\/","title":{"rendered":"How to Get More Traffic With Google Web Stories and WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]That\u2019s Google for you: just when you thought you\u2019d mastered all of the popular forms of content, the tech giant starts providing support for an entirely new type of content you can add to your arsenal. At least that\u2019s how WordPress users might see Google\u2019s release of the Web Stories for WordPress plugin, which is finally out of beta and readily available for installation.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you\u2019re not familiar with Web Stories, a type of content that resembles the story format that\u2019s extremely popular on social media, don\u2019t worry. This article will help you catch up on Web Stories and figure out whether they\u2019re something that should interest you. You\u2019ll learn:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-are-web-stories-for-wordpress\">What Are Web Stories for WordPress?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-are-the-benefits-of-using-web-stories\">What Are the Benefits of Using Web Stories?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-start-using-web-stories\">How to Start Using Web Stories on Your WordPress Website<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-make-the-most-of-your-web-stories\">How to Make the Most of Your Web Stories<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;70px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-are-web-stories-for-wordpress\"><\/a>What Are Google Web Stories for WordPress?<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Visual-Storytelling-WordPress.jpg\" class=\"attachment-full size-full\" alt=\"Visual Storytelling WordPress\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Visual-Storytelling-WordPress.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Visual-Storytelling-WordPress-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Visual-Storytelling-WordPress-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Called AMP Stories initially, Web Stories are the same content format that\u2019s been made famous by Facebook and Instagram Stories. <strong>This type of content uses a mix of visuals and text to create a novel storytelling experience<\/strong>. The hype around this type of content is boosted by the fact that it often has a limited lifespan \u2014 social media stories are a prime example of what was eventually called \u201cephemeral content.\u201d[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]But there\u2019s nothing ephemeral about Web Stories. <strong>Google\u2019s take on the story format has the permanence of regular content<\/strong>. You needn\u2019t look further for proof than <a href=\"https:\/\/edition.cnn.com\/ampstories\" target=\"_blank\" rel=\"noopener noreferrer\">CNN\u2019s Mobile Visual Stories page<\/a>, which contains Web Stories that date back as far as 2017.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/2-CNNs-Mobile-Visual-Stories-page.jpg\" class=\"attachment-full size-full\" alt=\"CNNs Mobile Visual Stories page\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/2-CNNs-Mobile-Visual-Stories-page.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/2-CNNs-Mobile-Visual-Stories-page-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/2-CNNs-Mobile-Visual-Stories-page-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]What\u2019s different with Web Stories for WordPress is that Google has finally released a plugin specifically designed to let WordPress users create and publish Web Stories from their website\u2019s backend. Up until now, Web Stories were created through the AMP app or third-party story builders. <strong>With the Web Stories WordPress plugin, Google brought official support for Stories to WordPress<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-are-the-benefits-of-using-web-stories\"><\/a>What Are the Benefits of Using Web Stories?<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Benefits-of-Using-Web-Stories.jpg\" class=\"attachment-full size-full\" alt=\"What Are the Benefits of Using Web Stories\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Benefits-of-Using-Web-Stories.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Benefits-of-Using-Web-Stories-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Benefits-of-Using-Web-Stories-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]But why should you care about another type of content when you already have so many ways you can attract audiences and communicate information? A story needs more visuals than your average article, and you know how hard and expensive it can be to find good photos for your content, right?[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]First of all, Google made finding good visuals a lot easier thanks to partnerships it struck with <a href=\"https:\/\/unsplash.com\/blog\/unsplash-google\/\" target=\"_blank\" rel=\"noopener noreferrer\">Unsplash<\/a> and <a href=\"https:\/\/medium.com\/coverr\/coverr-google-introducing-our-new-partnership-9a3453daf444\" target=\"_blank\" rel=\"noopener noreferrer\">Coverr<\/a>. <strong>Everyone who downloads the Web Stories plugin will have access to growing libraries of free photo and video material<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>With that problem out of the way, we can focus on the best reason to use Web Stories \u2014 they\u2019re unlike any other type of content<\/strong>. Here are a couple of things that make them special:[\/vc_column_text][vc_empty_space height=&#8221;23px&#8221;]<ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>They are a mobile-first type of content<\/strong>. Stories are created to appeal to mobile viewers, and mobile viewers make up the majority of organic search engine visits.<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>They come with support from Google<\/strong>. They\u2019ll appear in search results, image results. They\u2019re even getting added to Google Discover.<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>You can use them to monetize your content<\/strong>. You can add affiliate links to your stories, although Google recommends adding only one link per story.<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>They support a variety of content<\/strong>. You\u2019ll be able to use almost any kind of content you have on hand for Stories, including video and, eventually, animations.<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>They benefit from Google\u2019s AMP project<\/strong>. Even though AMP has its controversies, Web Stories will benefit from faster loading speeds.<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_column_text]So not only are they easy to create and publish, but they can also rank for different types of search results and cater to a growing body of web users.<strong> Plus, you can use them for advertising, which is just the type of cherry on the top you\u2019d expect from Google<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;81px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_separator color=&#8221;custom&#8221; accent_color=&#8221;#f0f0f0&#8243;][vc_empty_space height=&#8221;50px&#8221;][vc_widget_sidebar sidebar_id=&#8221;banner-seo&#8221;][vc_empty_space height=&#8221;28px&#8221;][vc_separator color=&#8221;custom&#8221; accent_color=&#8221;#f0f0f0&#8243;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-start-using-web-stories\"><\/a>How to Start Using Google Web Stories on Your WordPress Website<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories.jpg\" class=\"attachment-full size-full\" alt=\"Web Stories\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]There are several different ways to get into creating Web Stories for your WordPress website. <strong>First, however, you need to install the official plugin<\/strong>. So either download it from the <a href=\"https:\/\/wordpress.org\/plugins\/web-stories\/\" target=\"_blank\" rel=\"noopener noreferrer\">plugin\u2019s WordPress page<\/a>, or find it and install it from the website\u2019s backend &#8211; use whatever <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-install-a-wordpress-plugin\/\">way of installing a plugin<\/a> you want, as long as you end up with the plugin installed and activated.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After you\u2019ve installed the plugin, you\u2019ll be able to find the Stories option in the Dashboard menu. <strong>It will allow you to navigate to the Stories\u2019 dashboard, a list of all of your stories, or to jump right into creating a new story<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"how-to-start-using-web-stories\"><\/a>The Two Ways to Dive Into Web Stories<\/h3>\n<p>[\/vc_column_text][vc_column_text]<strong>The best place to start getting familiar with the Web Stories plugin is the Dashboard<\/strong>. If you want to go ahead and set everything up, you should know that the plugin comes ready to use out of the bag. <strong>Under Editor Settings, you\u2019ll only be able to add a Google Analytics Tracking ID, your logo, and opt-in to data sharing<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Web Stories Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Settings.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Settings-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Settings-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now you can choose how you want to start creating your first Web Story. The Dashboard gives you easy access to the templates, which look great, and editing them can be a great way to get to know the plugin and all the options it gives you. <strong>If that\u2019s your choice, simply click the \u201cUse Template\u201d button which appears when you hover over a template and start exploring<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Templates.jpg\" class=\"attachment-full size-full\" alt=\"Web Stories Templates\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Templates.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Templates-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Templates-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The other way to do it is to start creating your very own story. Because of the partnerships with Unsplash and Coverr, you don\u2019t have to worry about having enough images or videos for your story. <strong>You can just jump in and find something interesting in the libraries. So click that \u201cCreate New Story Button,\u201d and you\u2019ll access the editor with its three panels<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"how-to-start-using-web-stories\"><\/a>The Three Panels of the Web Stories Editor<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Editor.jpg\" class=\"attachment-full size-full\" alt=\"Web Stories Editor\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Editor.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Editor-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Editor-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The Web Stories Editor is a fully drag-and-drop editor that consists of three different panels: <strong>the Element Panel to the left, the Workspace in the center, and the Design Panel to the right<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>The Element Panel<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The Element Panel, like the name says, is where you\u2019ll find all the elements you can use to create stories. <strong>As of September 2020, those elements include photos, videos, and text, with plans to add animations later on<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>The first section in the Elements menu lets you work with the files you have in your Media Library<\/strong>. There is a search functionality there, as well as a drop-down menu that allows you to select whether you\u2019re looking at photo or video content. After pressing the blue Upload button, you can select files from your computer or the Media Library and upload them to the story, making them appear in the Workspace. <strong>You can also add files to the workspace by clicking them &#8211; one click will do &#8211; or by dragging them<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Add-Files.jpg\" class=\"attachment-full size-full\" alt=\"Web Stories Add Files\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Add-Files.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Add-Files-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Add-Files-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>The next section allows you to access the libraries of Google\u2019s image and video partners on the project, Unsplash and Coverr.<\/strong> Once again, you\u2019ll have the search functionality at your disposal. When looking through photos, there will be keywords to give you content ideas, and you\u2019ll see a selection of trending images. For videos, you\u2019ll only see the trending videos.<strong> Either way, you can add the content by clicking or dragging it to the Workspace<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Images.jpg\" class=\"attachment-full size-full\" alt=\"Web Stories Images\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Images.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Images-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Images-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>The third section gives you the ability to add text to your stories<\/strong>. Clicking the \u201cT\u201d icon will show you the style presets you have at your disposal. <strong>To add new text, either click on one of the styles or press the \u201cAdd new text\u201d button. You can also click the + icon next to the \u201cT\u201d where you selected the text option in the first place.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Headings.jpg\" class=\"attachment-full size-full\" alt=\"Web Stories Headings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Headings.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Headings-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Headings-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>The final section is the one you go to when you want to add some shapes to your story<\/strong>. You\u2019ll have a selection of twelve shapes, <strong>and you can add them, once again, by clicking on them, or by dragging them to the Workspace.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Basic-Shapes.jpg\" class=\"attachment-full size-full\" alt=\"Web Stories Basic Shapes\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Basic-Shapes.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Basic-Shapes-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Basic-Shapes-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>The Workspace<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Set smack right in the middle of the window, the Workspace is your canvas for creating Google Web Stories. <strong>You can drag elements to it, move them around, resize and reshape them. You can even change the color from the default white background into any color you want<\/strong> &#8211; you\u2019ll just have to do it from the Design Panel to the right. <strong>As for the Workspace, it has some options at the top and then a couple at the bottom<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The options you\u2019ll see at the top of the Workspace window include <strong>a space for adding a title to the story, as well as buttons that let you save the draft of your story, preview it, and publish it<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Workspace.jpg\" class=\"attachment-full size-full\" alt=\"Web Stories Workspace\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Workspace.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Workspace-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Workspace-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The options at the bottom of the Workspace include <strong>the buttons for deleting, duplicating, creating a new page, as well as undo and redo buttons<\/strong>. Underneath them, you\u2019ll see a navigation tool that shows all the pages in your story. To the right, <strong>you\u2019ll notice buttons that let you bring up a list of keyboard shortcuts, enable the safe zone, and switch to grid view<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Workspace-Options.jpg\" class=\"attachment-full size-full\" alt=\"Web Stories Workspace Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Workspace-Options.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Workspace-Options-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Workspace-Options-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>The \u201cEnable Safe Zone\u201d toggle is one you should usually keep on<\/strong>. What it does is adds two horizontal lines near the top and the bottom of the story page, demarcating the area that\u2019s safe for adding content without worry of it being clipped when viewed on different devices. <strong>Put anything above and below the lines and people might not be able to see it on different devices<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>The Design Panel<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The Design Panel is divided into two sections. <strong>The upper portion of the panel contains the section with all the options you can use to modify different elements. These options will change depending on the element you\u2019re editing<\/strong>, and they\u2019ll allow you to do many of things you can already do in the Workspace, such as resizing, setting backgrounds, or changing the position of the element. <strong>They\u2019ll also add new options on top of it<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>If you\u2019re adding images<\/strong>, the options you\u2019ll see in the Design Panel include the <strong>size and position card<\/strong>, where you can also set your page to be the background and rotate it,<strong> the layer card<\/strong> where you set the opacity of the image, <strong>the link card<\/strong> where you can add a link to the image, and<strong> the accessibility card<\/strong> that allows you to add assistive text for visually impaired users.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Design-Panel.jpg\" class=\"attachment-full size-full\" alt=\"Web Stories Design Panel\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Design-Panel.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Design-Panel-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Design-Panel-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>Choosing a video will bring up similar option cards<\/strong>. The size and position, layers, and link will be the same. <strong>They\u2019ll be followed by a video settings card, which lets you set the video to play only once or loop it, and the accessibility card where you can now also title the video and change its static image.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Video.jpg\" class=\"attachment-full size-full\" alt=\"Web Stories Video\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Video.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Video-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Video-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>When you add text, the first two cards will contain shortcuts to the colors and styles you\u2019ve saved on previous uses<\/strong>. The size and position, layer, and link cards will be familiar to you &#8211; they\u2019re the same ones you\u2019ll see when adding images.<strong> The style card, however, will contain options for choosing the font, the size, the weight, and the alignment of the text, as well as its color, fill, and padding<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Adding-Headings.jpg\" class=\"attachment-full size-full\" alt=\"Web Stories Adding Headings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Adding-Headings.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Adding-Headings-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Adding-Headings-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Adding shapes will bring up the saved colors, size and position, layer, and link cards like the ones you\u2019ve seen before. <strong>The style card will have only the option to choose the color of the shape<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Adding-Shapes.jpg\" class=\"attachment-full size-full\" alt=\"Web Stories Adding Shapes\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Adding-Shapes.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Adding-Shapes-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Adding-Shapes-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>Selecting the background will add two menu cards to the panel, the page and page attachment cards that allow you to choose the color of the background and add an attachment to the page<\/strong>. If you add an image or a video to the background, either from the size and position card or by dragging the element to the edge of the page once you\u2019ve added it to the Workspace, <strong>an overlay card will show up to give you some overlay options to choose from<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Adding-Attachments.jpg\" class=\"attachment-full size-full\" alt=\"Web Stories Adding Attachments\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Adding-Attachments.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Adding-Attachments-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Adding-Attachments-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The bottom section of the Design Panel will contain a list of all the elements you\u2019ve added to a page. <strong>The section is called Layers, and it will be of great use once you start creating more complex pages as they make navigating through the elements very easy<\/strong>. The best way to understand how useful this section is would be to head over to a template and check out a couple of Layer cards for different pages.<strong> It\u2019ll give you some great ideas about using various shapes, images, and options to create different effects<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Layers.jpg\" class=\"attachment-full size-full\" alt=\"Web Stories Layers\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Layers.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Layers-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Layers-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>The Document Panel<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The plugin\u2019s Document Panel contains all the standard options you\u2019d expect from a document panel. You can set publishing options that include a publishing date and your logo, add an excerpt, and choose a permalink.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>It\u2019s important that you scroll all the way down to the bottom of the panel because that\u2019s where the Page Advancement options are<\/strong>. You can set it to auto and manual, and you can also choose the default page duration.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Page-Advancement.jpg\" class=\"attachment-full size-full\" alt=\"Web Stories Page Advancement\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Page-Advancement.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Page-Advancement-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Web-Stories-Page-Advancement-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-make-the-most-of-your-web-stories\"><\/a>How to Make the Most of Your Web Stories<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/11-How-to-Make-the-Most-of-Your-Web-Stories.jpg\" class=\"attachment-full size-full\" alt=\"How to Make the Most of Your Web Stories\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/11-How-to-Make-the-Most-of-Your-Web-Stories.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/11-How-to-Make-the-Most-of-Your-Web-Stories-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/11-How-to-Make-the-Most-of-Your-Web-Stories-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Because Web Stories have been online for a while now, albeit under a different name, there are plenty of tips that could help you create great Web Stories. <strong>The most obvious one would be to use visuals that were shot in portrait format<\/strong>. Otherwise, you\u2019ll have to crop them.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Stories are primarily a visual format.<strong> Images come first; text comes second<\/strong>. You should be informative, funny, or witty with your text, but only after you\u2019ve made sure, you\u2019ve ramped up the eye candy factor.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>You can use up to 200 characters of text per page<\/strong>. Google recommends you keep titles under 40-characters long. If you\u2019re having trouble making your text pop out, remember to use contrast and highlighting to your advantage.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You\u2019ll be able to place links in your stories, too. While that might be an excellent SEO bonus to your content,<strong> it will get you into trouble if you use more than one link per page and if you fail to include disclosures for outgoing links<\/strong>. You should also ensure that your stories are self-contained \u2014 avoid placing vital information behind external links.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Let\u2019s Wrap It Up!<\/h2>\n<p>[\/vc_column_text][vc_column_text]If you feel like you\u2019re late for the party with the story type of content, you can relax: Google\u2019s Web Stories for WordPress is finally here! The plugin brings you an intuitive tool for building story content and publishing it on your WordPress website, so download it now and see what Web Stories for WordPress have in store for you.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Want to add Google Web Stories to your gallery of content? We&#8217;ll show you just how easy it is thanks to the new Web Stories plugin for WordPress.<\/p>\n","protected":false},"author":9295,"featured_media":9625,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[27,25,4,13],"class_list":["post-9607","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-marketing","tag-content","tag-seo","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/9607","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/9295"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=9607"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/9607\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/9625"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=9607"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=9607"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=9607"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}