Adding Images to Your Zibster Website
Adding images throughout your Zibster website is a great way to showcase your work, highlight your services, and create a visually engaging experience for your visitors. This guide will walk you through how to add an Image Block, upload images, and customize the way they appear on your pages.
STEP ONE
Log into your Zibster account and click Website in the left-side menu.
STEP TWO
Open the page you want to work with, or create a new page.
There are two ways to add an Image Block:
Quick Add:
Click the Image Block icon on the right-hand side. The block will appear at the bottom of the page.
Drag & Drop:
Hover over the Image Block icon, left-click and hold, then drag it to your preferred location on the page. Release when the teal line appears. You can always move it later by dragging it up or down.
STEP THREE
Click inside the Image Block—or click the pencil icon in the top-right corner—then choose Advanced.
A menu will appear with image upload options:
- Upload – Add new images from your device
- Clipboard – Use images you’ve already uploaded to your Zibster Clipboard
- Stock Images – Choose from a library of royalty-free photos
Once uploaded, thumbnails will appear in the right panel.
From here, you can:
Rearrange images by dragging them
Click any image to:
- Add Titles
- Add Descriptions
- Add Alt Text – You can type your own alt text, or use Ask Zibster AI to scan the image and automatically generate alt text based on the image content.
- Link Your Image – You can link the image to other pages, blocks within a page, external websites, forms, files, and more.
Styling Your Image Block
You can further customize how your image block looks
LAST ITEM
Create a “load more” link or a standard link on the last image in the block. This is perfect for loading additional images or linking to another page.
Display Options for Links:
-
None – No link
-
Load More Link – Adds more images within the same block
-
Standard Link – Link to:
-
External URL
-
Page
-
Form
-
Marketing campaign or landing page
-
File (PDF, JPG, etc.)
-
Phone number
-
Email
-
Address (opens in Google Maps)
-
Video (YouTube or Vimeo embed)
-
Pop-up
-
You can also customize the button text that appears.
IMAGE BLOCK LAYOUT OPTIONS
You can choose from a variety of Image Block layouts. Below is an overview of all available layout options in the Zibster Website Builder:
- SQUARE – Square grid layout. Titles and descriptions appear on hover.
- PORTRAIT – Taller images in a grid. Titles and descriptions appear on hover.
- LANDSCAPE – Wider images in a grid. Titles and descriptions appear on hover.
- EDITORIAL CIRCLE – Circular images in a grid with text below each image.
- EDITORIAL SQUARE – Square images in a grid with text below.
- EDITORIAL LANDSCAPE – Wide rectangular images in a grid with text below.
- EDITORIAL PORTRAIT – Vertical rectangular images with text below.
- PINBOARD – Mixed-size images displayed in a flowing grid. Text appears below.
- COLLAGE 4 – Four cropped images in a predefined arrangement. Text appears on hover.
- COLLAGE 5 – Five cropped images in a predefined arrangement. Text appears on hover.
- COLLAGE 6 – Six cropped images in a predefined arrangement. Text appears on hover.
- MODERN SQUARE – Cropped squares with title overlays. Descriptions are not supported.
- MODERN PORTRAIT – Cropped vertical images with title overlays. Descriptions are not supported.
- MODERN LANDSCAPE – Cropped horizontal images with title overlays. Descriptions are not supported.
- STACK MINI – Images fill approximately 70% of the content width and stack in rows. Text appears below.
- STACKABLE – Images fill 100% of the content width and stack vertically.
- GALLERY – A large main image with thumbnails underneath. Arrows allow navigation. Text appears over the main image.
- SLIDESHOW – Auto-playing slideshow with uncropped images. Titles and descriptions appear over each slide.
- CAROUSEL – A horizontal row of scrollable images.
- CAROUSEL SLIDESHOW – A scrollable carousel that automatically cycles through images.
- EDITORIAL CAROUSEL PORTRAIT – Vertically cropped carousel with editorial-style text below.
- EDITORIAL CAROUSEL LANDSCAPE – Horizontally cropped carousel with editorial-style text below.
- EDITORIAL CAROUSEL NO CROP – Carousel that maintains original image proportions with text below.
- EDITORIAL CAROUSEL MINI – A compact editorial-style carousel.
- EDITORIAL COLLAGE 3 – Three cropped images in an editorial-style collage with text below.
- EDITORIAL COLLAGE 4 – Four cropped images in an editorial-style collage with text below.
- GALLERY COLLAGE 3 – A collage of three images above a traditional gallery layout.
- GALLERY COLLAGE 4 – A collage of four images above a traditional gallery layout.
- CARD PORTRAIT – Portrait-oriented card layout for showcasing images with text.
- CARD CIRCLE – Circular image cards with text.
- CARD PORTRAIT OVERLAY RIGHT – Portrait card layout with text overlay on the right.
- CARD LANDSCAPE OVERLAY LEFT – Landscape card layout with text overlay on the left.
- CARD PORTRAIT SPLIT – Split layout with image and text displayed side-by-side.
To use a layout, click SAVE under the one you want to apply.
STYLING YOUR IMAGE BLOCK
Customize your image block by adjusting these options (depending on your layout):
- Overlay Opacity – Controls the visibility of hover overlays
- Overlay Style - Solid, Border, Gradient
- Title/Description Alignment – Choose left, center, or right alignment
- Image Border Thickness – Adjust from none to thick
- Open Full Screen Mode - Turn full screen mode on/off
- Spacing – Adjust space between items, space below blocks, and space inside blocks
- Flushing – Choose full-width or centered block
- Mobile View – Show 1 or 2 columns on mobile
Don’t forget to Save Changes when you're done!
COLORS
Override your website’s global color settings for your Image Block:
- Title Color – Image title font color
- Text Color – Description font color
- Background Color – Background for the image block
- Overlay Color – Color of the hover overlay
- Last Item Text Color – Font color for the last item link
- Last Item Background Color – Background color for the last item link
- Border Color – Image border color
Click Save Changes to apply your color selections.
BACKGROUND
Add a background image to your image block. You can choose:
- Custom Upload – Upload your own image
- Background Library – Choose from pre-selected backgrounds
Background Display Settings:
- Tile – Repeats the image
- Top Left – Anchors image in top left
- Centered – Centers the image
- Cover – Scales the image to fill the background
Click Save Changes to apply.
FONTS
Customize the fonts for your image block. You can adjust the font, size, spacing, and line height for:
- Title
- Description
- Last Item Text
Click Save Changes at the bottom to apply the changes.
ANIMATIONS
Add hover animations to your images for more interactivity:
- None
- Scale
- Blur
- Scale & Blur
- Bounce
👉 Don't forget to click Save Changes to apply your animation!
