Adding images throughout your site is a great way to show off your expertise to visitors. This guide will walk you through how to add an image block and upload images to your Zibster Website
STEP ONE
Log into your Zibster account and click on the Website option in the left-side menu.
STEP TWO
Click on 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 icon on the right-hand side, and the image block will appear at the bottom of the page.
- Drag & Drop: Hover over the image icon, left-click and hold, then drag it to your preferred spot. Release when a teal line appears to drop the block in place. You can always move it later by dragging it up or down.
STEP THREE
To add images, click inside the image block or on the pencil icon at the top right and choose Advanced.
A menu will appear with image upload options:
- UPLOAD – Add new images from your device
- CLIPBOARD – Use images you've already uploaded
- STOCK IMAGES – Choose from a selection of royalty-free stock photos
Once you've added images, you'll see thumbnails in the right panel. From here, you can:
- Rearrange images by dragging them
Click each image to:
- Add Titles & Descriptions
- Add Alt Text
- Add Links
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
Choose from 24 layout styles to control how your images are displayed. Some popular layouts include:
- Square/Portrait/Landscape – Grid-based with hover titles/descriptions
- Editorial – Titles/descriptions shown below the image
- Pinboard – Preserves original image dimensions in a grid
- Collage 4/5/6 – Framed sets of images
- Modern – Cut-out style titles (descriptions not supported)
- Gallery – Large image with thumbnail previews
- Slideshow – Auto-playing rotation of images
- Carousel/Carousel Slideshow – Horizontal scroll with optional autoplay
Click Save under the layout you choose.
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
- 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!
Leave a comment
0 Comments