Web Stories

To create web stories within a specific project, let's go to the CMS dashboard in the top left corner, and then from the sidebar, Select Stories. This is a pro-only feature and will not appear in the free version of the builder. Create a new story by selecting Add New Story. Give it a name. A slug will automatically be generated and you can add a description. Note that it's currently in draft and you can put it from here on Published, but we can do that also once we go into the builder. Select Save Changes. Then once you've done that, you'll notice here in the bottom that you have the option to edit, duplicate, preview, and delete. If I select back here in the top or I just select Stories, you will have all your stories appear here in a list. The same options for Edit, Duplicate, and Delete will appear here. To bring in your content, we work with Edit. Go ahead and select Edit. Stories work like slides, and you can bring in pre-made stories. I will do that by going here to the bottom and bring in a new slide, and this opens the stories block manager.

Let's select this one here. I'll select the first one and then click here on replace global styling to work with this story's color. Once I've done that and I have one slide, I can go to the first slide and at the top, click on delete. Add a second slide, and I'll bring in the second slide. And this way, you build it out. Let's do one more. And then for the last one, I will just bring in a blank one, create your own. The reason for that is that though we have the builder functions like we would do in the normal builder, the element within the Web stories builder It looks a little bit different. Select Add elements on the sidebar on the left, and you will see we have a reduced number of elements. These have been specially formulated to work well with the web stories. Now, they will look familiar, but if I click and hold and bring the button onto the page and I select it, you will see we have a few differences here. First of all, we have these handles. We can easily drag it and make it bigger right on the story slide.

The other thing is we can drag it around very easily. There is no restriction as to how it is placed within the slide. In fact, when you go to add elements, you don't even have to click and hold and drag. You can simply click on it and it will appear on the page. And from there you can drag it, resize it, and style it out the way you normally would. The same functions appear here for your icon. You can change out the icon, you can change the background, and you can link it. One new feature here is the slides link. When people click on this one, they can go to a specific slide that you have set here, easily take them there. Then you have your settings and effects. A unique element to the Web stories is the shape. Select, and this creates nice backgrounds. Easily create shapes, and from the settings under Styling in the sidebar, you can go to Basic and also create corners. Now that we've set up these slides for this story, we have a few more things to do. Access the options in the top right-hand corner and then go all the way to the left.

If we want these stories to autoplay, select them over here and set the speed at which each Each slide will pause. You can also select to loop it. I will leave it off for now. Set the background of the slide or also add a color to it. Settings that you will find here is CSS class and custom CSS. Stories are meant to be viewed on a mobile device. So I usually think in terms of a menu that people can scan with a QR code in a restaurant or bistro, and then they have a menu easily here, similar to this, that they can view. While you are working on your desktop, let's go ahead and publish this page and go to Preview. If accessed on a desktop, this is what you will see. You can slide and you have the progress bar to also indicate how you are moving through this story. Currently set to loop. You also have navigation arrows on the left and the right. If this was set to autoplay, it will then cycle through these slides, pausing three seconds at each slide. To test this as a mobile device, I will activate my Inspector by hitting F12 on my keyboard.

And then from here, I will toggle on the device toolbar, and I'll set it here to any device that I know is a good mobile device. Here you can see the true power of the Web stories. It comes nicely in, and I can swipe with it, or I can click on the left and the right. And remember, we had set link for this icon. If I selected, it will to that one. Remember that stories, for all intents and purposes, is actually just another web page. If I go to the Content Management System, select stories, you will see that we have a normal slug here just like we would for any page. When creating a menu then, from the categories, you will find that stories also appear here. You can add this as a link to your menu or anywhere that you have a clickable option on the page.