How to Add the Blog Block to Your Website in Zibster
The Blog Block allows you to display your published blog posts directly on any page of your Zibster website. It gives you control over which posts appear, how they are displayed, and how they are styled, depending on the layout you choose.
This article provides an overview of the Blog Block’s functionality, layout types, and customization tabs so you can understand how the Blog Block works and choose the setup that best fits your website goals.
What the Blog Block Does
The Blog Block pulls content from your published blog posts and displays them on your website using a layout you select.
With the Blog Block, you can:
-
Display all blog posts or only posts with specific tags
-
Choose from multiple layout styles (Editorial, Designer, or Feed)
-
Control how many posts appear using rows and columns
-
Add a Last Item Link to load more posts or link elsewhere
-
Customize colors, fonts, spacing, and animations based on layout type
Where the Blog Block Is Used
The Blog Block is added through the Website Builder and can be placed on:
-
Your homepage
-
A dedicated blog page
-
Any internal page where you want to highlight content
It can be repositioned anywhere on the page using drag-and-drop placement.
STEP ONE
Log into your Zibster account and click on WEBSITE in the left-side menu.
STEP TWO
Click the name of the page where you want to add your blog posts.
On the right-hand side, locate the Blog Block.
You can either:
-
Click the Blog Block icon to add it to the bottom of the page, or
-
Click and drag the Blog Block to place it exactly where you want it
A placement indicator will appear to show where the block will be added.
STEP THREE
Choose a layout for your Blog Block.
The right side panel will open and you can select a blank layout or a predesigned layout.
Blank Layout
-
Uses your website’s global styling
-
Click the center of the block where it says Click to add blog posts to open the side panel
Predesigned Layout
-
Uses custom design settings
-
The side panel remains open so you can immediately edit block settings
STEP FOUR
Under CHOOSE THE POSTS TO DISPLAY ON THIS BLOCK, select how posts should appear:
-
Display ALL posts, or
-
Display posts tagged with specific tags
If using tags, type the tag name and click Add Tag. Repeat for additional tags.
Note: Tags only work if your blog posts are already published with those tags.
You can also:
-
Sort posts by Most Recent or Most Popular
-
Choose whether to display the Publishing Date
Click Save Changes when finished.
LAST ITEM LINK
The Last Item Link controls what happens when you have more blog posts than your selected layout allows.
Options
None
Displays only the selected number of posts. Clicking the last post opens the full blog post.
Yes, as a “Load More” link
Replaces the final post with a clickable box that loads more blog posts within the page.
You can customize the text shown in the Link Text field.
Yes, as a “Standard” link
Displays a clickable box that links to another destination.
Standard Link Destinations
-
None
-
External Link
-
Page (link to another page or a specific block in another page of your website)
-
Form
-
Marketing (Campaign or Landing Page)
-
File (PDF, JPG, PNG, GIF)
-
Phone
-
Email
-
Address (Google Maps)
-
Video (YouTube or Vimeo)
-
Pop-Ups
Pro Tip
If you want visitors to explore more of your content without leaving the page, use the Last Item Link with a Load More option.
Blog Block Layout Options
The Layout tab controls how your blog posts are visually displayed.
Zibster offers eight Blog Block layouts:
-
EDITORIAL CIRCLE – Circular images with title and date below
-
EDITORIAL SQUARE – Square grid with title and date below
-
EDITORIAL LANDSCAPE – Horizontal rectangles with title and date below
-
EDITORIAL PORTRAIT – Vertical rectangles with title and date below
-
DESIGNER LANDSCAPE – Date on image with title and 250-character preview below
-
DESIGNER PORTRAIT – Vertical layout with date on image and preview text
-
DESIGNER PINBOARD – Grid-style layout with preview text
-
FEED – One post per row with alternating image placement, a 500-character preview, and a Read More button
Layout Behavior Explained
-
Editorial Layouts
Focus on visual browsing. Titles and dates appear below the image with no text preview. -
Designer Layouts
Include more context. The date appears on the image, with a short text preview below. -
Feed Layout
Designed for reading. Shows longer previews and includes a Read More button.
Rows and Columns
The number of blog posts shown depends on the number of rows and columns selected.
-
Editorial layouts: 2–5 columns
-
Designer layouts: 2–3 columns (depending on layout)
-
Feed layout: 1 column
Example:
If you have 30 posts and select 2 rows and 3 columns, 6 posts will display.
Click Save to apply the layout, or Change to select a different layout.
Styling, Color, Font, and Animation Options by Layout Type
To make customization easier, available options vary depending on the layout type selected.
STYLING
The Styling tab controls spacing, alignment, and layout behavior for the Blog Block.
Available options depend on the selected layout, but may include:
-
Overlay Opacity (Designer layouts only)
-
Space Between Items
-
Space Below Blocks
-
Space Inside Blocks
-
Flushing (full-width or contained)
-
Mobile View (one or two columns)
These settings override your global website styling for this block only.
COLORS
The Colors tab lets you override your global color settings for this Blog Block.
Depending on the selected layout, color options may include:
-
Title Color
-
Text Color
-
Button Text Color
-
Button Background Color
-
Background Color
-
Overlay Color
-
Last Item Text Color
-
Last Item Background Color
-
Border Color
A customized indicator appears next to any color that overrides your global settings.
Click Save Changes to apply updates.
BACKGROUND
The Background tab allows you to add a custom background or choose from our library of stock background images to your Blog Block.
You can also choose how the background file is displayed
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
Background settings apply only to the selected Blog Block.
FONTS
The Fonts tab allows you to override global font settings for the Blog Block.
Depending on the layout, you may customize fonts for:
-
Title
-
Description
-
Date
-
Button Text
-
Last Item Text
Font changes apply only to this Blog Block.
ANIMATIONS
The Animations tab controls hover and interaction effects.
Depending on the layout selected, animation options may include:
-
Image Hover Animation
-
Button Hover Animation
These settings override global animation settings for this Blog Block only.
