Himanshu Rauthan / 9 Mins Read
Updated: October 21, 2022
Web stories are interactive and open content pieces comprising visual elements such as images, texts, videos, etc., presented in side-swipeable slides. It will help you to create engaging and interactive stories that will engage your audience. Learn step-by-step guide on how to integrate Google Web Stories into your WordPress website.
Google Web Stories are an implementation of popular story presentation formats similar to Facebook Stories, WhatsApp Status, Twitter Fleets, etc.
Social media stories use images, videos, texts, or a concoction of all these creative elements to tell stories to their viewers.
Telling a tale for marketing is the oldest art of selling. From street sellers to high-end online stores, all businesses use storytelling to attract buyers.
It’s essentially a tool for creators to create compelling stories to promote their products, posts, or plans.
In this article, I will show you how to create and integrate Google Web Stories with WordPress and use it on your website to engage your audience.
Web stories are interactive and open content pieces comprising visual elements such as images, texts, videos, etc., presented in side-swipeable slides. You can add various effects, animations, and other customizations to create something captivating & unique for your business.
Earlier in 2018, AMP (accelerated mobile page) stories feature was introduced to render mobile-like storytelling for websites. Later, it became Google Web Stories.
Although Google isn’t a social media site, it still adopted a popular feature because it easily enables users to consume information. In today’s fast-paced life, people want sizable chunks of information and google web stories provide just that.
This also is one of the reasons why short video formats have become so popular.
The web stories format is perfect for storytelling, live updates, education, promotion, and conducting polls & surveys. But unlike stories on social sites, users are free to download and distribute the Google web stories.
Web stories appear as a carousel in Google Discover’s feed on Android and iOS phones with the up-to-date versions of the Google app.
They also appear in the Google search results singularly or grouped under the heading Visual Stories when you search for anything popular related to Fitness, Lifestyle, Health, Wellness, Entertainment, etc.
Globally, in Google Image search, Stories display as image cards with the Web Stories icon on them.
In conclusion, it is a compelling extension to your website, allowing you to show visual stories that resonate with your audience.
The biggest reason to focus on creating web stories is that they may become the first impression of your website for most users.
If someone wants to visit tourist places in the city, they’d prefer to get the place's name with images and context. Instead of reading the whole article, they only have to see the visual story and download it as they travel. That’s just one example of how resourceful web stories can be to your audience.
Let's see some other examples.
HealthifyMe is a health and fitness tracking app. It supports users with advanced calorie tracking, nutrition details, & fitness tips. In this web story, they’re giving exercises on how to build your chest. It consists of both equipment and bodyweight exercises.
The creators have placed promotional slides in-between to promote their dietary & fitness experts. As you can see, an article worth of content becomes so easy to consume through Google Web Stories.
This Web story from Seeker is one thing that is only meant to be seen, not read. A catchy headline would make you believe the scene from some science fiction story is actualizing in London.
It’s the kind of story that solely relies on the media and has phenomenal virality. There is no need to add animations or effects; the footage carries enough weight. Plus, the tappable web story allows viewers to easily watch the video and skip to the parts they like.
This web story falls under the edutainment category. It’s the perfect mixture of videos, texts, images, animations, and effects to convey a rather serious topic in the most entertaining way possible.
Similarly, you can explain complex concepts in consumable slides to your viewers and motivate them to complete your CTAs.
So, these were the top three examples of Google web stories. As you can notice, all these websites have smartly used different content types to create an appealing visual experience and offer value to their users to drive conversions.
Now, you know what Google Web Stories are and how they appear on Google. Also, you have seen ample examples.
It’s time to learn how to create Google Web Stories for your WordPress website using a plugin.
You can download Web Stories — a WordPress plugin crafted by Google. It enables WordPress users to create visual stories on their websites with features like drag & drop builder, layout templates, linking, etc.
It’s completely free, enables you to design the most catchy visual narratives, and provides a unique way to interact with your users.
To install the Web Stories plugin, log in to your WordPress Dashboard and follow the steps:
Afterward, open the Web Stories setting and configure the settings to add details relevant to your business, such as Google Analytics tracking ID, brand logo, monetization, connect your plugin with eCommerce platforms, and more.
Go to Web Stories settings and click the Create New Story button to create your first Google Web Story.
The editor interface is organized and easy to work with for beginners. It has the following parts:
The Insert, Style, and Publish Panel: The left side contains options that allow you to Insert various images, videos, texts, shapes, products, & templates. You can also configure the branding, publishing schedule, page advancement, audio, and visibility.
Canvas: In the middle of the stories editor, you have the canvas where you can drag & drop design elements to create your story.
Sidebar: On the right side, you have the option to customize the elements added to your canvas.
In the Web Stories plugin, you get access to a collection of free-use media. Moreover, you can access the media files stored in your WordPress library and upload your images, videos, audio, etc., from the Insert panel.
If you don’t want to invest time meticulously designing your web stories, choose one of the preloaded templates and customize it to your needs.
To add a color background to your story, click the Change Background color button and select a color of your choice.
Click on the Insert Background Media button to add images, videos, or templates to your story.
Also, you can select the coverage of your background element (video or image) over the canvas.
To add textual elements to your stories, click on the insert text button from the canvas. Also, you can go to Insert > Text and add your text to the story or choose from the available text Templates.
Adjusting the text size is easy. You just need to expand or shrink the text box according to your requirements.
In the Web Stories editor, you can change the color, font, size, alignment, distribution, etc., of your text. On top of that, you can hyperlink the text to promote anything you like.
Essentially, it lets you stylize and customize your text to make your stories appear attractive and professional.
You can add different shapes and customize their size, color, border, and alignment from the Insert Menu.
Also, you get several stickers with minimalist designs to make your stories look cooler.
Web Stories plugin is designed for visual storytelling, letting you add value while marketing your product between the slides.
But to sell with stories, you need to configure the product linkage option from Web Stories settings.
Set the shopping action from none to WooCommerce. Afterward, your WooCommerce products will be linked to Web Stories plugin and appear in the Shopping panel in the stories editor.
To add any product from the list, click on the + button. It will appear as a donut icon with the product price tag visible upon hovering over it.
The Web Stories plugin contains dozens of templates that make the story creation process much faster. You must go to the template menu and select the template you need. There are three main types of templates: Cover, Section, & Quote.
And yes, like everything else, these templates are fully-customizable too.
One more amazing feature: you can save the created pages as templates and use them for future projects.
When you are familiar with the Web Stories editor’s interface and design elements, proceed to add more pages to your story. To create a fresh page, click on the New Page button from the right side of the canvas.
You can also Delete and Duplicate your pages and save them as drafts. Also, changing the order of pages requires dragging and dropping them into your preferred position
It’s time to bring your hard work to fruition. Before publishing your web story, you can preview it just like you’d any other post in WordPress.
The preview shows how your story will appear across different mobile devices. Click on the add device button to further test the presentation of your pages.
If you detect anything out of place, you can return to the drawing board and fix it.
To publish your web story, click on the Publish button in the upper right corner of the stories editor. It is similar to publishing any other post or page on WordPress.
Enter your story Title, Description, Upload Logo, Poster Image, and SEO Optimized Slug. You can also determine the page advancement and duration. For descriptive content, keep the page advancement to manual so readers can read at their own pace.
Here are some more guidelines:
You will find more tips in the checklist. It will serve as a way to optimize and streamline your stories before publishing them.
After careful review, publish your first Google Web Story.
And that’s it. Now, you can successfully create your Google Web Stories.
The use of Web Stories isn't limited to showing visual narratives on Google. In fact, you can add stories in posts, pages, or anywhere on your WordPress website.
WordPress allows you to repurpose your stories. Here is how you can add them to your post with the Classic editor:
Open any existing post or create a new one. On the editor toolbar, the button to add visual stories is available.
Click on the web stories button and choose how you want to display your story. There are four layout types:
You can also determine the Number of Stories, Order by Date or Title, in Descending or Ascending Order and Title Display.
If you’re short on time, you can copy the link of any visual story and add it to your post. That works too.
Go to the Web Stories Dashboard, copy the story URL and paste it wherever you want to embed your story.
Adding stories through the block editor is just as easy. Open the block editor, add a new block and click on Web Stories.
You’ll get the option to select stories from the collection you’ve created.
Here, I am going along with the Single Story option.
There you have it, folks. This is how you can smartly repurpose your web stories and embed visual narratives along your content.
Storytelling enriches your content. It gives meaning to your readers, allowing them to have an immersive experience while interacting with your website.
Google Web Stories for WordPress plugin enables you to create highly-engaging visual content to market about anything. Be it blogs, coupons, products, services, etc.
Please follow the above steps to create your visual stories seamlessly and engage your audience.
Throughout this article, I’ve explained the various benefits of posting on Google Web Stories. Here is a quick rundown for you:
You’ll also receive some of our best posts today
Himanshu Rauthan is an entrepreneur, Co-Founder at WP Swings, MakeWebBetter, and the Director of CEDCOSS Technologies. He has worn many hats in his career - programmer, researcher, writer, and strategist. As a result, he has a unique ability to manage multi-disciplinary projects and navigate complex challenges. He is passionate about building and scaling eCommerce development.
Mobile devices have become an integral part of our lives in this digital...
Don’t miss the new articles!
