How to Use the List Block in Zibster
The List Block is a flexible content section that displays images, text, and videos in a grid-style layout. It’s perfect for highlighting testimonials, services, featured pages, or calls-to-action — all in a clean, visual format.
STEP ONE
Log in to your Zibster account and click Website in the left-hand menu.
STEP TWO
Add a List Block or click on an existing one to edit it.
-
Find the LIST icon in the blocks panel on the right.
-
Click and drag it to the spot you want (watch for the teal line).
-
Release your mouse to place it.
💡 TIP: If you click the LIST icon (without dragging), the block will be added to the bottom of the page.
STEP THREE
OPEN THE BLOCK SETTINGS
Click anywhere inside the List Block or use the pencil icon, then click Advanced to open the settings panel on the right.
STEP FOUR
ADD CONTENT TO YOUR BLOCK
From the right-side menu, choose what kind of item you want to add:
- Image
- Text
- Video
Each list item can include:
- Title
- Description
- Button
IMAGE ITEM
- Upload from your computer, paste from clipboard, or select from the Stock Library.
- Add a Title and Description.
- Add Alt Text for accessibility and SEO.
-
Add a Button and link it to any of the following:
-
Another page
-
A form
-
External site
-
File download, etc.
-
-
💡 Great for: Testimonials, team bios, or product highlights.
TEXT ITEM
- Add a Title and Description.
- Add Button Text
- Set the Link To destination.
- Click Create Now to save your item.
Click Create Now to add your new text item.
VIDEO ITEM
- Paste your YouTube or Vimeo embed code.
- Choose a cover image, or let the default play button appear.
- Add a Title, Description, Alt Text, and a Button to launch the video in a pop-up.
DELETING ITEMS
- To remove a list item, drag and drop it onto the Delete button.
LAST ITEM LINK
If your layout doesn’t show all the items, use the Last Item feature to add a way to show more:
- None – Only shows items that fit in the current layout.
- Load More Link – Adds a button that loads more items.
- Standard Link – Add a custom link that goes anywhere you want.
Standard link options include:
- A page on your site
- External URL
- Form, campaign, or landing page
- File download
- Phone number or email
- Video
- Pop-up message
LAYOUT OPTIONS
Choose how your items appear by selecting a layout style from the right-side menu.
Classic Layouts
Text appears on hover
› Square, Portrait, Landscape
Editorial Layouts
Text always visible under the image
› Circle, Square, Landscape, Badges, Portrait
Modern Layouts
Only the title is always visible
› Square, Portrait, Landscape
Pinboard Layout
Hover reveals title and description (no buttons)
Image Left / Right Layouts
Image on one side, text on the other
› Small/Large Left or Right (images not cropped)
Specialty Layouts
› Arches, Circle Overlay Top, Designer Portrait, Portrait Border, Image Border with Text Bottom
STYLING OPTIONS
Options vary by layout.
- Overlay Opacity (not in Editorial layouts)
- Overlay Style (solid, border, gradient)
- Text Alignment (title, description, button)
- Image Border Thickness (none, ultra thin, thin, medium, thick)
- Spacing (between, inside, and below items)
- Flushing (full-width or centered layout)
- Mobile View (choose 1 or 2 columns)
👉 Click Save Changes to apply.
COLORS
Override your global colors with block-specific ones.
Color options depend on the layout selected.
BACKGROUND
Add a background image behind the List Block:
- Upload your own or choose from the Background Library.
Choose how it displays:
- Tile
- Top Left
- Centered
- Cover
👉 Click Save Changes to apply.
FONTS
Customize fonts within the List Block.
Options vary depending on the layout.
You can set:
- Title
- Description
- Button Text
- Last Item Text
Adjust:
- Font Style
- Size
- Letter Spacing
- Line Height
👉 Click Save Changes to apply.
ANIMATIONS
Animation options depend on your selected layout.
Image Hover Animations
- None
- Fill
- Overlay
- Scale
- Arrows
Button Hover Animations
- None
- Fill
- Overlay
- Scale
- Arrows
👉 Click Save Changes to apply your animation styles.
