Web Stories for WordPress

Getting started

Installing Web Stories for WordPress

Use Web Stories for WordPress by installing it directly from the WordPress admin dashboard or manually downloading the plugin via the plugin repository.You must have administrative permission to install a new plugin for both methods. Follow the steps below to install the Web Stories for WordPress plugin:

  1. Log in to your WordPress website.
  2. In the left navigation menu, click Plugins.
  3. Click Add new.
  4. enter "web stories" in the search bar. you should see the web stories plugin in a search results page.
  5. Install and activate the Web Stories plugin.
  6. Navigating the Dashboard
  7. Open the Web Stories Dashboard
  8. Select Stories from the sidebar to navigate to the Web Stories Dashboard.

Open the Web Stories Dashboard

Select Stories from the sidebar to navigate to the Web Stories Dashboard.

screenshot visually indicating the location of the Stories sidebar option in WordPress

Create your first Web Story

Start creating your first Web Story from scratch by clicking the blue "Create New Story" button or select "Explore Templates" to jump start with preset layouts and styles (more coming soon!).

Filter your Stories

View all your Web Stories, or filter by "draft" status and "published" status by selecting the tabs at the top of the Web Stories Dashboard. Select the drop down under the search bar to sort Stories by their name, date created, last modified, or their creator.

Change view

View stories as a list by clicking the icon next to the sort drop down and switch to classic WordPress table view next to the grid icon in case you need it (for instance for certain plugin integrations).

Add Google Analytics, Publisher Logo, and update sharing settings

Add a Google Analytics Tracking ID, a Publisher Logo, and change your Data Sharing settings by clicking Editor Settings.

The editor has main three panels. Starting from the left:

  1. The Element Panel,
  2. The Workspace,
  3. And the Design Panel.

Use the Element panel on the left to upload assets and add images, text and shapes to your story pages.

Use the Workspace panel to declare a title, add and remove story pages, design your page by placing and layering assets & elements, view keyboard shortcuts, enable and disable the safe zone, and view all story pages in grid mode.

The Design panel on the right contains two tabs: Design and Document.

Use the "Design" tab to modify properties related to the currently selected element or group of elements, such as position, size, font properties and more. Change the order of elements/layers via the Layer Panel at the bottom of the Design tab.

Use the "Document" tab to control how your story gets published, add any important metadata and control whether pages auto-advance or need to be tapped manually.

Creating your first story

It’s fun and easier to get started building your first story using a template from the Explore Templates page. The templates show layering techniques, interesting use of assets, and playful text. Hover over a story and click "See details" to preview or "Use template" to begin editing.

You can also create your first Web Story from scratch by selecting the blue "Create New Story" button.

How to use the editor

Uploading media

Click on the cloud icon at the top of the Element panel to head to the media gallery, then upload media by either:

  1. Clicking the blue Upload button
  2. Dragging media from a local folder to the media gallery or Workspace area
  3. Copy + paste into the editor

The editor currently supports most common image & video formats, with vector and audio formats coming at a later time.

Using media from third-party providers

Click on the picture icon in the Element panel’s tabs to switch to third-party media sources, giving you access to millions of images & videos. Currently, the following integrations are available:

Add a background image or video

Add a background image or video by selecting an asset and dragging it into the background drop area. Drop targets are outlined in blue. You may alternatively click the "Set as background" option in the design panel after selecting an image.

Change the background size and placement by double clicking the image, use the slider to increase or decrease the size and drag it to your preferred position.

Click outside the image to exit background placement.

Masking & cropping

Mask and crop images by adding shapes from the Shapes tab in the Element panel to your Web Story page, then drag and drop the image into the shape’s drop target area. Drop targets are outlined in blue.

Tip: Media can also be "dropped" into other images. This is very useful if you’d like to keep an images’ position and size, but want to quickly replace the contents.

Change image cropping and placement by double clicking the shape. Use the slider to increase or decrease the size and drag it to your preferred position.

Click outside the image to exit placement.

Adding text

Quickly add text to your Web Story page by selecting the plus icon next to the text tab icon in the Element Panel.

You may also add a preset text by clicking the desired option on the text tab.

Add a link to any element by first selecting it on the Web Stories page. The editor will present an area to add a link on the Design tab in the Design panel. Paste the desired web address into the box to add a link to the selected text.

Once added, you may include an optional description and brand icon.

Add a page attachment

A page attachment is a special type of ‘inline’ link, which can be accessed by swiping or clicking at the shown affordance at the bottom of the page..

Add a page attachment by selecting the background, then add a web address into the Page Attachment text box in the Design panel. You have the option to update the default "Learn more" text to something more fitting. You may not move the location or modify the default styling of the page attachment link.

Saving & reusing styles and colors

Save the style of a selected element by clicking the plus button next to "Saved styles" on the Design tab.

You may then apply that style to other elements by selecting them first, then selecting the saved style.

If you’d rather only save the foreground color, use the plus button next to the "Saved colors" panel above the "Saved styles" panel. Clicking on a color in this list will only apply the color, and not change any other styles.

Save your progress

Click the "Save draft" button in the upper right hand side of the second panel to save your progress and continue work on your Web Story later. It appears in your Web Stories Plugin Dashboard.

Tip: Web Stories in draft mode are automatically saved every 60 seconds, but it’s still a good idea to double check if all changes are saved when you exit the page.

SEO & Optimization

Adding metadata

Metadata can be attached to the Web Story from the Document tab in the Design panel. This includes the cover image, author, and an excerpt or description. Adding these ensures maximum compatibility with search engines and discovery features that take advantage of that metadata.

Avoiding ‘burned-in’ text on assets

It’s tempting to reuse video and composite images you have prepared before. Oftentimes, these assets have ‘burned-in’ text, which means that the text is part of the actual image or video. This isn’t only bad for accessibility, but also makes it hard for search engines to understand your content.

Instead, use assets that are clean, and layer text elements on top using the element.

Note: Version 1.0 of Web Stories for WordPress does not yet come with soft caption support for video. Support is coming shortly.

Optimizing your images & videos

Since the editor doesn’t yet have the capability to automatically optimize video & image content for optimal load times, it’s a good idea to to invest into optimizing them in advance.

To optimize your images:

To optimize videos:

Adding Analytics

There are two ways to include analytics in your Web Stories:

Additional SEO advice

For more in-depth SEO advice, read SEO for AMP Stories on the AMP Blog.

Accessibility

Keyboard shortcuts & navigation

View editor keyboard shortcuts by clicking the keyboard icon in the Workspace panel. Or press ctrl + / on Windows and command ⌘ + / on Mac.

Using assistive text for images & video

Make your images and videos accessible to users of screen readers by adding assistive text.

For images, insert a description of the image in the "Accessibility" section of the Design panel.

For videos, fill out both the "Title" and "Assistive text" text fields in the "Accessibility section of the Design panel. The title should be a description of the video itself, whereas the assistive text should describe the contents of the video.

Note: Ensure these text fields are empty for images and videos that are purely presentational and have no meaning to a screen reader user.

FAQ

Thank you for being an early adopter of Web Stories for WordPress! We're working around the clock to improve your experience and add editing capabilities. If you find any issues, please reach out by visiting the support forum to ask any questions or file feature requests.

For an optimal Web Story creation experience,

we recommend using the latest version of commonly popular web browsers (Chrome, Firefox, Safari, Edge).

Is Web Stories for WordPress compatible with other WordPress plugins?

Because the Web Story format is new to the web ecosystem, some WordPress plugins may need extra support. We are working to improve compatibility with the Web Story editor and encourage you to file any bugs and requests in the support forum.

Are WordPress multisite networks supported?

Web Stories for WordPress does not support WordPress multisite networks. Please activate the plugin for each individual site you would like to use it on.

Can I use Web Stories for WordPress on a touch screen?

The Web Story editor is currently not supported on touch screen devices, such as a smartphone or tablet.

How do I make Web Stories appear in Google and other search engines?

For better chances of being discovered, after publishing your Web Story, we encourage you to embed it into a regular article or post on your site by using the Web Stories Gutenberg block.

While the default sitemaps in WordPress and most popular plugins handle it automatically, we encourage you to check that your Web Stories are included in your XML sitemaps.

How can I optimize Web Stories to show up on search engines?

Web Stories created using Web Stories for WordPress use what’s provided in the Document tab inside the editor to generate schema.org and social meta-data automatically. Ensure you review and update all requested metadata, including cover image, excerpt and publisher logo. Please see SEO for Web Stories for further SEO guidance.

How do I implement Analytics in my Web Stories?

There are two ways to include analytics in your Web Stories:

What do I do about an AMP validation issue in Search Console?

Web Stories are powered by AMP, which adds some restrictions on a page’s allowed markup. In some cases, other WordPress plugins use disallowed markup. We recommend temporarily disabling these plugins and reaching out to our support forum.

Terms

Use of Web Stories for WordPress is subject to Google's Terms of Service.

Use of photos provided by Unsplash is subject to Unsplash's Terms of Service.

Use of videos provided by Coverr is subject to Coverr's Terms of Service.

Use of GIFs provided by Tenor is subject to Tenor's Terms of Service.