Using Story Panels in Your Zibster Website
Story Panels are a dynamic List Block layout in the Zibster Website Builder that allow you to combine images, text, and video into a clean, narrative-style scrolling experience. They are designed to help business owners, photographers, and creatives present content in a modern vertical storytelling format that works beautifully on both desktop and mobile.
With Story Panels, you can blend multiple content types into a seamless vertical sequence. This makes them ideal for showcasing projects, testimonials, behind-the-scenes content, event highlights, before/after stories, process walkthroughs, and any visual narrative you want to bring to life.
This guide will walk you through how to create and customize Story Panels inside the Zibster Website Builder.
STEP ONE
Log into your Zibster account and click WEBSITE in the left-side menu.
STEP TWO
From your list of pages, select the page where you want to add Story Panels, or create a new page.
STEP THREE
Click on the existing List Block on your page, or add a new List Block.
STEP FOUR
Click the LAYOUT tab in the right-side menu.
STEP FIVE
Scroll to the bottom of the List Block layout options and select your preferred Story Panel layout:
- Story Panel Square
- Story Panel Portrait
- Story Panel Landscape
Click SAVE to apply the layout.
STEP SIX
Click the ITEMS tab to add and manage the content within your Story Panels.
STEP SEVEN
Add new content or edit existing Story Panels.
Story Panels use the same item types available in any List Block, and you can mix and match these as needed.
Image Items
- Upload an image or paste from clipboard
- Add a title, description, and alt text
- Optional button linking to a page, file, form, or external link
- Great for photos, behind-the-scenes images, or before/after examples
Text Items
- Add a title and description
- Optional button
- Useful for captions, testimonials, or brief storytelling paragraphs
Video Items
- Embed a video from YouTube or Vimeo
- Upload your own video
- Add a cover image if you want
- Works best with vertical videos (9:16) for a more immersive mobile experience
Click the button for the type of content you want to add.
FINAL STEP
To edit any existing panel, click its thumbnail in the right-side panel.
You can:
- Reorder panels by dragging them
- Edit any panel’s content
- Delete a panel by dragging it onto the Delete button
Styling Options for Story Panels
Story Panels include styling controls that allow you to customize spacing, alignment, borders, and overall layout while keeping the storytelling format intact.
Available styling options include:
- Overlay Opacity
- Auto Play
- Slideshow Speed
- Title Alignment
- Description Alignment
- Button Alignment
- Image Border Thickness
- Space Between Items
- Space Below
- Space Inside
Click SAVE CHANGES after updating your styling.
Color Options for Story Panels
Each Story Panel layout includes its own color controls so you can maintain visual consistency with your website branding.
You can adjust:
- Item Title Color
- Text Color
- Background Color
- Overlay Color
- Icon Color
- Border Color
- Button Text Color
- Button Overlay Color
- Button Background Color
- Button Contrast Color
Color options may vary depending on the layout selected.
Background Options for Story Panels
You can choose to use no background, upload a custom background, or choose from our background library to put a graphic in the List Block you're using for your Story Panel.
You can also choose the background display settings between:
- Tile - Will tile your image to fill the background
- Top Left - Will align your image to the top left
- Centered - Will align your image at the center of the available space
- Cover - Will scale your image to be as large as possible to completely cover the background
Font Options for Story Panels
You may override your global site fonts and set custom fonts for your Story Panels.
Font settings can be adjusted for:
- Titles
- Descriptions
- Button Text
You can edit the font family, size, line height, and spacing.
Click SAVE CHANGES after updating fonts.
Animation Options for Story Panels
Story Panels also support interactive button animations.
- Button Hover Animation – choose the animation that plays when a visitor hovers over a button.
Animations are optional and can be adjusted to match your website’s style.
Best Practices for Story Panels
- Use 9:16 vertical images or videos for the best mobile experience.
- Keep text short and easy to skim.
- Mix image, video, and text items for visual variety.
- Keep colors, tones, and styles consistent.
- Group items logically to create a clear narrative or walkthrough.
Common Use Cases
- Testimonials combining photos, text, and video
- Behind-the-scenes storytelling
- Event or wedding highlight sequences
- Step-by-step service or process walkthroughs
- Before & after showcase sequences
Troubleshooting Story Panels
My video looks cropped or zoomed in.
The video may not fit the Story Panel layout. Use 9:16 vertical video for best results.
My embed isn’t displaying.
Verify the embed code is valid and from a supported platform. Private or restricted videos may not appear.
My Story Panels are out of order.
Go to the ITEMS tab and drag the panels into the correct order.
My Story Panels are loading slowly.
Reduce file sizes. Large images or video files can slow down loading time.
