Web Stories Widgets for Elementor is an addon that works with the official Google Web Stories plugin to enhance its functionality.
Web Stories is a free tool by Google that helps you create full-screen, visually engaging stories for the web, complete with animations and tap interactions. It’s built for mobile devices, loads quickly, and keeps users interested.
However, the official Web Stories plugin doesn’t offer much flexibility when it comes to how the stories are displayed on your site. That’s where our Web Stories Widgets For Elementor plugin helps. It adds powerful display and styling options, so you can easily show your stories anywhere using shortcodes or Elementor, all without writing any code.
Key Features:
- Add Web Stories to your designs using a simple Elementor widget
- Use shortcodes to display single or recent stories
- Customize the button text, colors, and fonts
- Change button labels and choose from different layout styles
- Decide how many recent stories to show and the order they appear
- Option to hide the section if there are no stories to display
This addon gives you full control over how your stories look and where they appear, making it much easier to integrate them beautifully into any part of your website.
Steps to Install Web Stories Widgets For Elementor and other required plugins
To start using Web Stories with shortcode and Elementor widget support, you need to install a few plugins. Here’s a simple step-by-step guide:
1. Install the Google Web Stories Plugin
- Go to your WordPress Dashboard → Plugins → Add New
- Search for Web Stories
- Click Install Now
- Once installed, click Activate
2. Install Web Stories Widgets For Elementor
- In your WordPress dashboard, go to Plugins → Add New
- Search for Web Stories Widgets For Elementor
- Click Install Now, then click Activate
3. Install Elementor Website Builder
- Go to Plugins → Add New
- Search for Elementor Website Builder
- Click Install Now, then Activate
How to Create a Web Story
- Go to your dashboard and click Create New Story
- Add text, images, or videos to your story as needed.
- When you are finished, click the Publish button to make your story live.
How to Display Individual Web Stories Using Shortcodes
Once your Web Story is published, you can easily display it anywhere on your WordPress website using a simple shortcode. This feature allows you to highlight specific stories inside blog posts, landing pages, sidebars, or even custom layouts.
Steps to Add a Story Using Shortcode
Follow these quick steps to display any individual Web Story:
- Go to your WordPress dashboard and navigate to Stories → All Stories.
- Find the story you want to display.
- Copy the shortcode shown alongside the story.
- Paste the shortcode into any post, page, or widget area where you would like the story to appear.
- Click Publish or Update and preview your content.
Example Shortcode
[webstory id="your-story-id" button-text="View Story" show-button="yes" style="circle" border-width="2px" border-color="#9325da"]Replace “your-story-id” with the actual ID of the Web Story you want to display.
Available Shortcode Attributes
You can customize how the story appears using the following shortcode attributes:
| Shortcode Attribute | Possible Values | Default values | Description |
| button-text | Any text | Default view | Text label for the button |
| show-button | yes/no | yes | Show or hide the button |
| style | default/circle | circle | Story preview layout style |
| border-width | Any CSS size (e.g., 2px) | 2px | Border thickness |
| border-color | Any valid color code | #9325da | Sets the border color |
Note: Border-related settings only work when the style is set to “circle”.
How to Display Recent Web Stories Using Shortcodes
You can easily show your latest Web Stories in a grid layout anywhere on your website using a simple shortcode, no coding needed. It is ideal for blog homepages, story sections, or landing pages with lots of content.
Steps to Display Recent Stories
- Go to the Plugins section in your WordPress dashboard.
- Find Web Stories Widgets For Elementor in the installed plugins list.
- Copy the shortcode mentioned in the plugin description.
- Paste the shortcode into any page, post, or Elementor section.
- Click Publish or Update to make it live. You’ll see the recent stories displayed like the screenshot below.
Example Shortcode
[Recent-stories column="3" show-no-of-story="all" show-button="yes" button-text="View Story" order="DESC" btn-color="#8BCDA0" btn-text-color="#000" style="circle" border-width="2px" border-color="#9325da"]This shortcode displays all stories in 3 columns with styled buttons and customizable colors.
Available Shortcode Attributes
| Shortcode Attribute | Possible Values | Default values | Description |
| column | Any number | 3 | No. of story columns in grid |
| show-no-of-story | A number or "all" | all | Total stories to show |
| button-text | Any text | Default view | Text on the story button |
| order | ASC /DESC | DESC | Sort order: latest or oldest |
| btn-color | Any hex color code | #8BCDA0 | Button background color |
| btn-text-color | Any hex color code | #000 | Button text color |
| show-button | yes/no | yes | Show or hide the button |
| style | default/circle | circle | Story preview layout style |
| border-width | Any size value | 2px | Border thickness |
| border-color | Any color | #9325da | Border color |
Note: Border settings apply only when using the circle style.
How to Add Web Stories with Elementor
Follow these steps to add stories with Elementor:
- In the Elementor editor, search for Web Stories Widget
- Drag the widget into your layout
- Choose the story you want to display
- Click Publish to save your changes
Your selected story will be shown on the page. Start displaying your stories exactly the way you want.
Read More
Looking to enhance your WordPress site with powerful features and better design? Check out these helpful guides:
