This tutorial assumes you’ve already installed and activated the Web Stories for WordPress plugin. If you haven’t done so yet, please complete the installation first.
Step 1: Access the Story Editor
Navigate to the Web Stories dashboard in your WordPress admin:Navigate to Stories
In the left sidebar, click Stories → Add New or go to Stories → Dashboard and click Create New Story
Step 2: Understand the Editor Interface
The Web Stories editor has four main areas:Canvas
The center workspace where you design your story pages
Library Panel
Left sidebar with media, text, shapes, and stickers
Design Panel
Right sidebar for styling selected elements
Top Toolbar
Document settings, preview, and publish controls
Step 3: Customize Your Story
Add and Edit Text
- Click Text in the Library panel
- Drag a text element onto the canvas
- Double-click to edit the text
- Use the Design panel to:
- Change font, size, and color
- Adjust alignment and letter spacing
- Apply text effects
Add Images or Videos
- Click Media in the Library panel
- Choose from:
- Upload - Upload from your computer
- Media Library - Use existing WordPress media
- Third-party - Browse free stock images/videos
- Drag media onto the canvas
- Resize and position as needed
Manage Pages
- Add a page: Click the + button at the bottom of the canvas
- Delete a page: Click the page thumbnail and select delete
- Reorder pages: Drag page thumbnails in the page carousel
- Duplicate a page: Right-click a page thumbnail and select duplicate
Add Animations
- Select an element on the canvas
- In the Design panel, click Animation
- Choose an effect (Fade In, Fly In, Zoom, etc.)
- Adjust duration and easing
- Preview by clicking the play button
Step 4: Configure Story Settings
Click Document in the top toolbar to access story settings:Title & Description
Title & Description
- Title: Required, shown in story lists and search results
- Excerpt: Brief description for SEO and social sharing
Poster Image
Poster Image
Upload a poster image (required):
- Recommended size: 640×853 pixels or 3:4 ratio
- This appears in story carousels and previews
Publisher Logo
Publisher Logo
- Upload or select a publisher logo
- Appears on story pages for branding
- Recommended: Square, transparent background
Publishing Options
Publishing Options
- Author: Set the story author
- Categories/Tags: Organize your stories
- Featured Image: For WordPress integration
Step 5: Preview Your Story
Before publishing, preview your story:- Click Preview in the top toolbar
- Check on different devices using the device selector
- Test animations and interactions
- Verify all text is readable
- Ensure images display correctly
Step 6: Publish Your Story
When you’re ready to publish:Step 7: Share and Embed
After publishing, you have several options to share your story:Embed in a Post or Page
- Edit any WordPress post or page
- Add the Web Stories Embed block
- Select your story
- Customize display options
- Publish
Share the Direct Link
Your story has a unique URL like:Add to Archive
Stories automatically appear in your archive at/web-stories/ (if enabled in settings).
Best Practices
Keep It Concise
Keep It Concise
- Aim for 5-20 pages per story
- Each page should convey one clear message
- Avoid overcrowding pages with too many elements
Optimize for Mobile
Optimize for Mobile
- Design for vertical (9:16) viewing
- Use large, readable text (minimum 16px)
- Ensure tap targets are at least 48×48 pixels
- Test on actual mobile devices
Use High-Quality Media
Use High-Quality Media
- Images: Minimum 720×1280 pixels
- Videos: 720p or higher recommended
- Compress files for faster loading
- Always include alt text for accessibility
Leverage Animations Wisely
Leverage Animations Wisely
- Don’t animate everything - it can be overwhelming
- Use entrance animations to guide attention
- Keep animations under 1 second
- Test that animations enhance, not distract
Troubleshooting
Story won't publish
Story won't publish
Make sure you’ve set:
- A story title
- A poster image
- At least one page with content
Images look blurry
Images look blurry
- Upload higher resolution images (minimum 720×1280)
- Avoid scaling images beyond their native size
- Use the correct aspect ratio
Animations not working
Animations not working
- Preview in a modern browser (Chrome, Firefox, Safari)
- Check that animations are enabled in story settings
- Verify the AMP plugin is activated if using AMP mode
Next Steps
Congratulations on creating your first web story! Here’s what to explore next:Master the Editor
Learn advanced editor features and techniques
Add Analytics
Track how readers engage with your stories
Monetize Stories
Learn how to add ads and earn revenue
SEO Optimization
Optimize stories for search engines
Getting Help
If you need assistance:- Visit the WordPress.org Support Forum
- Check the GitHub Issues
- Read the full documentation for detailed guides