How to Add and Customize a Banner Block in Zibster
Overview
The Banner Block lets you create a large visual section on your Zibster website using images, text, and call-to-action buttons. Banner Blocks are commonly used for homepage hero images, portfolio highlights, promotions, announcements, and other featured content.
You can choose from predesigned Banner Block styles or start with a Blank design that uses your website's global design settings. After adding the block, you can customize its images, text, links, layout, mobile display, colors, fonts, and other supported settings.
This guide explains how to add a Banner Block, customize its primary settings, and understand the options available after the block has been added to your page.
STEP ONE
Log in to your Zibster account and click WEBSITE in the left-side menu.
This opens the Website Builder, where you can manage your website pages and content blocks.
STEP TWO
Click the page where you want to add the Banner Block.
Locate the Banner Block in the block menu on the right side of the Website Builder. Click the Banner Block to add it to the bottom of the page, or drag it to the location where you want it to appear.
As you drag the block, the placement indicator shows where the Banner Block will be added.
STEP THREE
Zibster will open the SELECT BANNER BLOCK panel and display the available Banner Block designs.
You can select BLANK to start with a Banner Block that uses your website’s global design settings, or choose one of the predesigned Banner Block options.
Each option includes a preview so you can compare the available designs before adding one to the page.
Click SELECT below the design you want to use.
The design you choose provides the starting layout and styling for the Banner Block. You can still change the images, text, buttons, colors, fonts, layout, and other supported settings after adding the block.
I’d also keep the specific Blank and Banner 1–7 examples immediately below this step if you want the guide to visually mirror what customers see. The screenshot also confirms that the panel title is SELECT BANNER BLOCK and that each design uses a SELECT button, so those labels are worth matching exactly.
STEP FOUR
After you select a Banner Block design, Zibster opens the EDIT BANNER image editor on the right side of the Website Builder.
From the IMAGES section, you can add images in three ways:
- Click UPLOAD to upload images from your computer.
- Click CLIPBOARD to use images already saved to your Zibster Clipboard.
- Click STOCK IMAGES to choose an available stock image.
If you selected BLANK, the image editor starts without any banner images added.
If you selected a predesigned Banner Block, the included sample content appears in the image editor so you can replace or customize it with your own content.
You can add a single image or multiple images, depending on how you want the Banner Block to display.
STEP FIVE
Click an image thumbnail in the Banner Block editor to customize the content associated with that image.
Depending on the Banner Block design and layout, you can add a title, subtitle, Alt Text, and call-to-action buttons.
Use Alt Text when appropriate to describe the image for visitors using screen readers and to provide search engines with additional context about the image.
You can also link supported banner content or buttons to another page, block, website address, or other available destination.
For more information about creating links, see How to Link Banners.
For additional text options, see How to Add Text to Banners.
Click SAVE CHANGES after updating the banner content.
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.
FINAL STEP
Review the Banner Block on both desktop and mobile devices.
If the desktop image does not work well on a narrow phone screen, you can add a separate mobile image so the most important part of the photo remains visible.
For complete mobile Banner Block instructions, see How to Adjust the Banner Block for Mobile Users.
Click SAVE CHANGES after completing your Banner Block settings. Your changes take effect on your website when they are saved. You do not need to publish the website separately.
Banner Block Menu Options
Click the pencil icon on the Banner Block to open the block menu.
The menu includes:
-
COPY creates a duplicate of the Banner Block directly below the original.
-
MOVE lets you move the block to another location on the current page or to another page.
-
RENAME lets you give the block a custom name, including a name you can use when creating an anchor link.
-
CHANGE LAYOUT lets you select another supported Banner Block layout without rebuilding the block.
-
ADVANCED opens additional settings for the Banner Block.
-
DELETE removes the Banner Block from the page.
The current Banner Block layout is also displayed on the block in the Website Builder.
If you want to reuse a Banner Block on another page, you can create a copy and then move the duplicate to the destination page.
Banner Block Layouts
Zibster includes 16 Banner Block layouts organized into four layout styles. Each style includes Full Screen, Medium, Short, and Thin height options.
Classic Layouts
Classic layouts create a traditional full-width banner. These layouts are commonly used for homepage hero images and featured content.
Classic layout options include:
-
Classic Full Screen
-
Classic Medium
-
Classic Short
-
Classic Thin
Classic layouts fill the available banner area. Parts of an image may be cropped to fit different screen sizes.
Carousel Layouts
Carousel layouts display multiple images in a scrolling presentation. These layouts can work well with vertical images, horizontal images, or a combination of image sizes.
Carousel layout options include:
-
Carousel Full Screen
-
Carousel Medium
-
Carousel Short
-
Carousel Thin
No Crop Layouts
No Crop layouts display the complete image instead of filling the entire banner area through cropping.
No Crop layout options include:
-
No Crop Full Screen
-
No Crop Medium
-
No Crop Short
-
No Crop Thin
The amount of space surrounding the image may vary based on the image dimensions and the visitor's screen size.
Modern Carousel Layouts
Modern Carousel layouts display multiple images using an alternative carousel presentation and spacing style.
Modern Carousel layout options include:
-
Modern Carousel Full Screen
-
Modern Carousel Medium
-
Modern Carousel Short
-
Modern Carousel Thin
After selecting a different layout, click SAVE below the layout.
Mobile Layout Options
Banner Block styles also include mobile layout options for Full Screen, Medium, Short, and Thin displays.
Mobile layouts can be changed within the same layout style. For example, a No Crop desktop layout can use another No Crop height on mobile, while a Modern Carousel desktop layout can use a different Modern Carousel height.
Choose the mobile layout that provides the best balance between image visibility and the amount of vertical space used on the page.
For more information, see How to Adjust the Banner Block for Mobile Users.
Styling Options
Click STYLING in the Banner Block editor to adjust supported display and behavior settings.
Available options depend on the layout you are using and may include:
-
Overlay Opacity controls the transparency of the color overlay placed over the banner image.
-
Auto Play controls whether supported slideshows or carousels advance automatically.
-
Slideshow Speed controls how quickly images advance.
-
Scroll Animation controls supported scrolling effects, such as parallax.
-
Space Between Items adjusts spacing between images in supported Carousel layouts.
-
Space Below Blocks adjusts the space between the Banner Block and the next block on the page.
Click SAVE CHANGES after updating the styling settings.
For more information about timing, see How to Change the Banner Slideshow Speed.
Colors
Click COLORS to customize the color settings for the Banner Block. The available fields may vary based on the selected layout and the content added to the banner.
Color options may include:
-
Title Color
-
Text Color
-
Button Text Color
-
Button Background Color
-
Button Overlay Color
-
Button Contrast Color
-
Overlay Color
-
Down Arrow Color
You can select one of your website's accent colors or choose a custom color. Click SAVE CHANGES after making your selections.
Fonts
Click FONTS to override your website's global font settings for the Banner Block.
Available font controls may include font type, font size, letter spacing, and line height.
Use these settings carefully so banner text remains easy to read on both desktop and mobile screens.
For complete instructions, see How to Change the Fonts on Banners.
Animation
Supported Banner Block designs can include hover effects for call-to-action buttons.
Available effects may include:
-
None
-
Fill
-
Overlay
-
Scale
-
Arrows
These effects appear when a visitor moves their cursor over a supported button on a desktop or other pointer-based device.
Click SAVE CHANGES after selecting an option.
Banner Image Recommendations
Leave Room Around Important Subjects
Banner images automatically adapt to different screen sizes. Avoid placing faces, text within the image itself, or other important details too close to the outer edges.
Leaving additional space around the main subject gives the Banner Block more room to adjust without cropping important parts of the photograph.
Match the Image to the Layout
Horizontal images generally work well with Classic layouts.
Choose a No Crop layout when displaying the entire photograph is more important than filling the available banner area.
Carousel and Modern Carousel layouts can work well with vertical photographs or a mixture of image orientations.
When using multiple images, photographs with similar dimensions can create a more consistent presentation.
Expect Cropping With Classic Layouts
Classic layouts are designed to fill the banner area. Depending on the visitor's screen size, Zibster may crop the top, bottom, or sides of the image.
If the entire image needs to remain visible, consider a No Crop layout.
Use Separate Mobile Images When Needed
A wide desktop image may not display well on a narrow phone screen.
Use the Banner Block's mobile image options when the primary subject becomes cropped, difficult to see, or poorly positioned on mobile.
The separate mobile image is used for the mobile display and does not replace the desktop image.
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.
What Your Clients See
Visitors see the images, text, buttons, colors, and layout you configure for the Banner Block.
If the selected layout supports multiple images, visitors may see those images as a slideshow or carousel based on the layout and styling settings you choose.
When you add a link to supported banner content or a button, visitors can click it to open the destination you configured.
Visitors on mobile devices can see the separate mobile image when one has been added. If you do not add a separate mobile image, the Banner Block uses the primary banner image and adjusts it for the available mobile display.
Troubleshooting
Why is part of my banner image being cropped?
Classic layouts fill the banner area, so portions of an image may be cropped depending on the visitor's screen size.
Try using an image with more space around the main subject, add a separate mobile image, or choose a No Crop layout.
Why don't I see my mobile image on my computer?
Images added through the mobile image settings are intended for the mobile version of the Banner Block.
View the website on a phone or another narrow mobile display to confirm the mobile image.
Why do I see different images on my phone and desktop?
You may have separate mobile images uploaded to the Banner Block. Mobile images are used for the mobile version of the banner and can be different from the primary images shown on desktop.
Why don't I see every styling option?
Banner Block settings vary by layout. Controls such as slideshow behavior or spacing only appear when the selected layout supports them.
Does adding multiple images automatically create a slideshow?
The presentation depends on the layout you select.
Layouts that support multiple-image rotation can display the images as a slideshow or carousel. The exact behavior depends on whether you are using a Classic, Carousel, No Crop, or Modern Carousel layout.
Test the Completed Banner
After making changes, review the page on both desktop and mobile devices.
Check the image crop, title and subtitle readability, buttons and links, slideshow or carousel behavior, and the overall amount of space the banner uses on the page.
Related Guides
-
How to Adjust the Banner Block for Mobile Users
-
How to Change the Banner Block Layout
-
How to Change the Fonts on Banners
-
How to Change the Banner Slideshow Speed
-
How to Link Banners
-
How to Add Text to Banners
Need Help?
Support Hours: Monday to Friday, 9am to 6pm EST
Phone: 844.353.3412
Support Channels: Phone, Live Chat, Support Ticket
Leave a comment
0 Comments