How to Add the Blog Block to Your Website in Zibster
The Blog Block allows you to display your published blog posts on any page of your Zibster website. You can control which posts appear, how they are laid out, and how they are styled to match your brand. This guide walks you through adding the Blog Block, choosing which posts to display, selecting from all available layout options, and customizing the design so your blog content fits your website goals.
What the Blog Block Does
The Blog Block pulls content directly from your published blog posts and displays it on your website using a layout you choose.
With the Blog Block, you can:
- Display all published blog posts or only posts with specific tags
- Choose from 12 different layout styles
- Control how many posts appear using rows and columns (layout dependent)
- Add a Last Item Link to load more posts or link to another destination
- Customize styling, colors, fonts, backgrounds, and animations by layout type
Where the Blog Block Can Be 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 blog content
The block 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
Zibster offers 12 Blog Block layouts. You can change layouts at any time without rebuilding the block or re-entering content.
Editorial Layouts
Editorial layouts focus on clean presentation with minimal text.
- Editorial Circle – Circular images in a grid with the post title and date below. No text excerpt.
- Editorial Square – Square images in a grid with the post title and date below. No text excerpt.
- Editorial Landscape – Horizontal images in a grid with the post title and date below. No text excerpt.
- Editorial Portrait – Vertical images in a grid with the post title and date below. No text excerpt.
- Editorial Journal – Single-column journal layout with the title and date above a large featured image. Includes a short text excerpt and a Read More link.
- Editorial Pinboard – Two-column editorial grid with images above the title and date. Includes a Read More link but no text excerpt.
- Feed - Displays one post per row in an alternating left and right layout. Each post includes the cover image, title, date, a preview of up to 500 characters, and a Read More button. Columns are not available for this layout.
Designer Layouts
Designer layouts include preview text for additional context.
- Designer Landscape – Wide images with the post date overlaid on the image. The title and text preview appear below.
- Designer Portrait – Tall images with the post date overlaid on the image. The title and text preview appear below.
- Designer Pinboard – Pinboard-style grid with the date overlaid on the image and the title and preview text below.
Contemporary Layouts
Contemporary layouts feature modern spacing and strong visual balance.
- Contemporary Feed – Alternating left and right layout with large images and post details side by side. Displays the title, date, and a Read More link. No text excerpt.
- Contemporary Journal – Clean, single-column layout with the title and date above a large image, followed by a visible text excerpt and a Read More link.
Layout Controls
Depending on the layout selected, you may be able to adjust:
- Number of rows
- Number of columns
These settings control how many blog posts appear at one time.
Example: If you have 30 posts and select 2 rows and 3 columns, 6 posts will display.
Click Save under the layout you want to apply.
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.
