Zibster, LLC Logo
  • Home
  • WEBSITE BUILDER
  • SEO
  • FORMS
  • ECOMMERCE
  • SERVICES
    • WE BUILD IT FOR YOU
    • CUSTOM WEBSITE DESIGN
    • LOGO DESIGN SERVICE
    • SOCIAL MEDIA MARKETING
    • SEO GO
  • GROWTH HUB
  • CONTACT
MENU

How To Use Banner Blocks

Wednesday, April 23, 2025 | By: Zibster Support Hub

Share

🖼️ 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 ONE

Log In and Head to Your Website Editor

Log into your Zibster account and click WEBSITE from the left-hand menu.

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

Leave this field empty
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
Submit

0 Comments

Previous Post Next Post

Related Posts

How Do I Adjust the Banner Block for Mobile Users?

July 9, 2024

How To Change Banner Slideshow Speed

June 17, 2025

Can I adjust an image's focal point?

June 25, 2024

How to Change a Block Layout on Your Zibster Website

June 11, 2025

Need More Help?

CONTACT US

TOOLS

Builder Blog Ecommerce Scheduler  

MARKETING

Email Marketing Forms Contacts SEO  

SETTINGS

Account Settings Domain & Email Files FAQ  
© 2004 – 2025 Zibster, LLC All rights reserved
Crafted by Zibster
Zibster, LLC Logo
CLOSE
  • Home
  • WEBSITE BUILDER
  • SEO
  • FORMS
  • ECOMMERCE
  • SERVICES
    • WE BUILD IT FOR YOU
    • CUSTOM WEBSITE DESIGN
    • LOGO DESIGN SERVICE
    • SOCIAL MEDIA MARKETING
    • SEO GO
  • GROWTH HUB
  • CONTACT