🖼️ How to Add a Banner Block to Your Zibster Website
A banner block is a great way to make your page visually pop! Whether you're showing off a slideshow of beautiful images or highlighting a call to action, adding a banner block is easy. Follow the steps below to add and customize a banner on your website.
STEP TWO
Choose a Page & Add a Banner Block
- Select the page where you'd like to place the banner.
- On the right side of the screen, click Add Block.
- Choose the Banner block from the list.
STEP THREE
Edit Your Banner Block
- Once the banner is added, click inside the block to open the editing menu. Or click the pencil icon in the top-right corner of the block and choose Advanced Settings to dive into more options.
🎨 Customizing Your Banner Block
Adding Images
Click Add Images in the editing menu. Each banner block supports up to 24 images.
You can:
- Upload from your computer
- Insert from the Clipboard
- Choose from the Stock Image Library
👉 Want a static banner? Add just one image.
👉 Want a slideshow? Add multiple images!
PRO TIP!
For the best look, use horizontal images (unless you're using a Carousel layout). Images with centered subjects—not close-up shots—tend to look best in banners.
Adding Text, Alt Text, and Buttons
Once your image is uploaded, click its thumbnail to add:
- Title: Main headline text
- Subtitle: Supporting text
- Alt Text: Great for accessibility & SEO
- Button: Add a call-to-action (like "Learn More" or "Shop Now")
You can also adjust text alignment and styling. Be sure to click Save Changes when you're done.
STEP FOUR (Optional)
Add Mobile-Specific Images
Want your banner to look just right on phones?
Click the Mobile Images icon to upload a separate set of images for mobile users—especially helpful for layouts like Classic, where vertical screens need a bit more love.
🧩 Layout Options
Zibster offers 10 layout styles for banner blocks:
Classic Layouts (Best for wide, “hero” images):
- Full Screen
- Medium
- Short
- Thin
These layouts may crop your image to fill the space.
Carousel Layouts (Great for multiple or vertical images):
- Full Screen
- Medium
These let users scroll through a gallery of images.
No Crop Layouts (Show the full image without cropping):
- Full Screen
- Medium
- Short
- Thin
White space is added if needed to keep the whole image visible.
Mobile Layouts
Choose how your banner appears on mobile:
- Full Screen
- Medium
- Short
- Thin
Don’t forget to click Save Changes after selecting your layout!
🎨 Styling Your Banner Block
Click on Styling in the banner editor to access these options:
- Overlay Opacity: Add a color overlay and adjust how transparent it is
- Scroll Animation: Choose a static display or enable parallax effects
- Space Below Blocks: Adjust spacing between this banner and the next block
Click Save Changes to lock in your updates.
🌈 Colors
Head to the Color tab in the editing menu:
- Pick from your website’s accent colors or select a custom one
- Click OK and Save Changes
✍️ Fonts
Override the global font settings just for this banner:
- Change the Font Type, Size, Letter Spacing, and Line Height
- Click Save Changes to apply
✨ Button Animations
Click the Animations tab to choose how your banner buttons animate on hover:
- None
- Fill
- Overlay
- Scale
- Arrows
Click Save Changes to finalize your animation style.
PRO TIP!
We recommend that you use horizontal images that are not close-ups for your Banner Blocks for best results. If you'd like to use vertical images, we suggest using the Carousel or No Crop layouts.
🙋 Need Help?
Our Passionate Support Team is happy to assist!
Give us a call at 844.353.3412 or start a live chat from your Zibster dashboard.
Support Hours:
🕘 Monday – Friday, 9:00 AM – 6:00 PM EST
Leave a comment
0 Comments