Web stories are a dynamic way to present content in a slide-based format, ideal for mobile viewing and interactive storytelling.
Accessing the Stories Section
To begin, navigate to the top left menu (three lines) and select Stories from the sidebar. This section allows users to manage and create story-based content within a specific project.
Creating a New Story
- Click Add New Story in the bottom left (blue button).
- Enter a name for the story. A slug will be automatically generated.
- Optionally, add a description.
- The story will initially be in draft mode, but it can be published either now or later within the builder.
- Select Save Changes.
Once saved, options to Edit, Duplicate, Preview, or Delete the story will appear. All created stories will be listed in the Stories section with the same management options.
Building the Story Slides
Stories function similarly to slides. To begin editing:
- Select Edit.
- Add a new slide by clicking the Add Slide button at the bottom.
- This opens the Stories Block Manager, which includes a variety of pre-made slide templates.
Choose a template and apply global styling to match the story’s theme. Additional slides can be added using templates or created from scratch using a blank slide.
Adding and Customizing Elements
The Web Stories Builder includes a streamlined set of elements optimized for mobile storytelling. These elements can be added by:
- Clicking on an element to place it directly on the slide.
- Dragging and resizing elements freely within the canvas.
Elements include:
- Buttons: Easily repositioned and resized with drag handles.
- Icons: Customizable with background, links, and styling.
- Slide Links: Allow navigation between specific slides.
- Shapes: Used for decorative backgrounds and styled corners.
Configuring Story Settings
Access the Story Settings in the top-right corner of the builder. Key options include:
- Autoplay: Enable and set the duration each slide remains visible.
- Looping: Choose whether the story should repeat.
- Background Styling: Apply colors or images to the slide background.
- Custom CSS: Add advanced styling via CSS classes.
Previewing and Publishing
Once the story is built:
- Publish the story from draft mode.
- Use the Preview function to view the story on desktop.
- Navigation arrows and a progress bar will appear.
- If autoplay is enabled, slides will cycle automatically.
To test mobile responsiveness:
- Open browser developer tools (e.g., press F12).
- Toggle the device toolbar and select a mobile device.
- The story will display in a swipeable format, optimized for touch interaction.
Linking Stories in Menus
Web stories are treated as standard web pages within Brizy. Each story has a unique slug and can be added to site navigation:
- From the CMS, select Stories to view the slug.
- In the Menu Builder, stories will appear as linkable items.
- Add them to menus or any clickable element on the site.
In our Cloud Websites documentation, you may come across the name "Brizy" or links to articles found on the Brizy website. Brizy is a technology partner that helps us provide an enhanced, user-friendly website editing experience. The Brizy partnership is explicitly designed for ministries, ensuring we offer the best solution to meet your church's website needs.
Updated
