Web Stories for WordPress

How to use the editor

Inserting 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 Upload button
  2. Dragging media from your computer 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:

Note: Your use of stock content is subject to third party terms.

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.

Using page templates

Mix and match pages from different templates in the Page Templates section. Here, you can see a more choices for element stylings, such as lists, sections or covers.

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.

Match fonts from your story

The editor provides font combinations that let you mix and match different harmonious typography. Use the "Match fonts from story" toggle to show only text sets that match what's already in use.

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.

Animate page elements

Use built-in animations to add a dynamic punch to your Web Stories. Animate an element by:

Use the Play button below the canvas to play all animations on the page directly within the editor.

Adding borders & corner radius

You can add a border and corner radius to your story page elements.

Adding 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 & 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.

Quick Actions

Tip: Relevant actions for your currently selected element are displayed in the so-called Quick Actions menu right next to the canvas. Whether you want to animate your text element or replace an image, it's just one click away.

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.