--- title: "How to Display Web Stories in WordPress Using Shortcodes and Elementor" url: https://coolplugins.net/display-stories-to-wordpress-with-elementor/ date: 2025-06-18 modified: 2026-05-26 author: "Satinder Singh" description: "Web Stories Widgets for Elementor extends the official Google Web Stories plugin by adding customizable display options, Elementor widgets, and shortcode support. The plugin allows users to display individual or recent web stories anywhere on their website using shortcodes without writing custom code. Users can customize story layouts, button text, colors, borders, story ordering, and grid columns to match their website design. The addon integrates seamlessly with Elementor, enabling drag-and-drop placement of Web Stories directly inside Elementor page layouts. Web Stories Widgets for Elementor improves story presentation flexibility while helping WordPress users create engaging, mobile-friendly visual content experiences." categories: - "Elementor" image: https://coolplugins.net/wp-content/uploads/2025/06/web-stories-widgets-for-elementor-800x450.jpg word_count: 884 --- # How to Display Web Stories in WordPress Using Shortcodes and Elementor 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](https://wordpress.org/plugins/shortcodes-for-amp-web-stories-and-elementor-widget/)** 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** **](https://wordpress.org/plugins/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 ![Instal Web Stories Widget For Elementor](https://coolplugins.net/wp-content/uploads/2025/06/Instal-Web-Stories-Widget-For-Elementor-800x380.jpg) - Click Install Now, then click Activate** ** ### 3. Install Elementor Website Builder - Go to Plugins → Add New - Search for [Elementor Website Builder ](https://wordpress.org/plugins/elementor/) - Click Install Now, then Activate ## How to Create a Web Story - Go to your dashboard and click **Create New Story** ![Create New Story](https://coolplugins.net/wp-content/uploads/2025/06/Create-New-Story-800x369.jpg) - 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. ![Copy Shortcode](https://coolplugins.net/wp-content/uploads/2025/06/Copy-Shortcode-800x389.jpg) - Paste the shortcode into any **post, page, or widget area** where you would like the story to appear. ![Paste Shortcode](https://coolplugins.net/wp-content/uploads/2025/06/Paste-Shortcode-800x351.png) - Click **Publish** or **Update** and preview your content. **Example Shortcode** [webstory button-text="View Story" show-button="yes" border-width="2px" border-color="#9325da"] ``` [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. ![Recent Stories Shortcode](https://coolplugins.net/wp-content/uploads/2025/06/Recent-Stories-Shortcode-800x392.png) - 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. ![Recent Stories](https://coolplugins.net/wp-content/uploads/2025/06/Recent-Stories-800x409.png) **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" border-width="2px" border-color="#9325da"] ``` [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** ![Web Stories Elementor Widget](https://coolplugins.net/wp-content/uploads/2025/06/Web-Stories-Elementor-Widget-800x415.png) - 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: - [Top 9 Timeline Plugins For Your WordPress Website](https://coolplugins.net/best-wordpress-timeline-plugins/) - [Showcase your Events in Elementor with Events Widgets](https://coolplugins.net/display-events-with-events-widgets/) - [How to Add Input Masks In Elementor Form](https://coolplugins.net/add-input-masks-elementor-form/) - [How to use conditional fields for Elementor Pro forms](https://coolplugins.net/conditional-fields-for-elementor-form/) - [Cool FormKit Lite- Free Elementor Form Builder](https://coolplugins.net/free-elementor-form-builder/)