4. Web Stories

This tutorial covers adding new stories, editing, duplicating, and deleting them, and customizing slides with unique features and designs optimized for mobile viewing.


If you're using the pro version of our CMS dashboard, you have access to an array of powerful features. One such feature is the ability to create engaging web stories within specific projects. This guide will walk you through the process of creating and managing these stories.

Creating a New Web Story

To begin, navigate to the CMS dashboard, and from the sidebar, select 'Stories'. Please note that this is a pro-only feature. From there, click on 'Add New Story'. You'll be prompted to give your story a name, after which a slug will be automatically generated. You can also add a description to your story at this stage. Your new story will be in 'Draft' mode initially, but you can choose to publish it now or later when you enter the builder.

Once you've saved your changes, you'll see options to edit, duplicate, preview, and delete the story. These options are also available when you view all your stories in a list.

Building Your Story

When you select 'Edit', you'll enter the builder where you'll create your story, slide by slide. Each slide functions like a pre-made story, and you can bring in new slides through the 'Stories Block Manager'. As you add slides, you can start customizing them with different colors, elements, and features.

The Web Stories builder offers a streamlined set of elements, specially formulated to work well within the web stories format. These elements can be easily added, resized, and styled on each slide. You'll notice some new features, like the 'Slides Link', which directs users to a specific slide, and 'Shape', which allows you to create attractive backgrounds and corners for your slides.

Setting Up Playback and Previewing Your Story

After setting up your slides, you can adjust how your story plays. From the top right-hand corner options, you can set your story to auto-play, choose the speed for slide transitions, and select whether to loop the story.

Web stories are primarily designed for mobile viewing, so it's important to check how they look on various mobile devices. You can preview your story on a desktop or emulate a mobile device using the device toolbar.

Linking Your Stories

Remember, a web story is just another web page. In your CMS, your stories will have a unique slug, just like any other page. This means you can easily link your stories to your website menu or any other clickable area on your page.

In summary, web stories offer a new, interactive, and engaging way to deliver content to your audience. Utilizing these on your website can help enhance the user experience and increase engagement. Harness the power of web stories today and watch your audience grow.

👆 You’re all caught up