Zibster Website Package includes the Banner Block that allows you to create banner images on your website. This guide will walk you through how to and and customize a banner block on your Zibster website.
STEP TWO
Click on the page where you'd like to add a banner, then add a banner block from the right-side block menu.
STEP THREE
Once the BANNER block has been added to your page, click inside of the block to customize it or click on the pencil icon on the top right of the banner block and select Advanced.
STEP FOUR
The menu will appear from the right side of your screen.
The first option is to add images. You can add one image or multiple images, which will display as a slideshow. You can upload images from your computer, insert images from the Clipboard, or add images from the Stock Image library.
PRO TIP!
It's best to use horizontal, not vertical, images in the banner unless you are using one of our Carousel layouts, which are designed to better display images in a variety of aspect ratios. We recommend using images where the subject matter is in the center and not a close-up.
STEP FIVE
If you'd like to upload a separate set of images to display on mobile phones, you can do so by clicking on the mobile images icon. This can be especially useful when using our Classic layouts to accommodate the fact that desktop users view your site on a horizontal screen, but mobile users will most likely be viewing it on a vertical one.
BANNER BLOCK LAYOUT OPTIONS
There are ten different layouts for the Banner Block:
- 4 Classic layouts: Classic Full Screen, Classic Medium, Classic Short, and Classic Thin.
- 2 Carousel layouts: Carousel Full Screen and Carousel Medium.
- 4 No Crop versions of our Classic layouts: No Crop Full Screen, No Crop Medium, No Crop Short, and No Crop Thin.
Once you've chosen the layout you wish to use, click Save.
CLASSIC LAYOUTS
Our classic layouts are intended to display primarily horizontal images as "hero" above-the-fold images that impress clients and serve as a good background for headings and buttons. All of our classic layouts will use the uploaded images to completely fill a predefined amount of space, cropping them if needed based on the size of the user's screen.
CAROUSEL LAYOUTS
Carousel layouts are intended to easily display images with a variety of aspect ratios. Rather than dissolving from one image to the next and only showing one at a time, these layouts scroll through images like the horses on a carousel.
NO CROP LAYOUTS
The No Crop layouts are similar to the Classic layouts in that they only display one image at a time, but instead of cropping your image to fill a predefined amount of space, they create white space as needed to fit the entire image into the space, which can be great if you want to display large images without worrying about cropping.
BANNER BLOCK MOBILE LAYOUT OPTIONS
You can also choose custom layout options for banner images to appear on the mobile version of your website. To choose a custom mobile layout, select the layout option in the banner block editing menu and click on the drop-down within the layout you have selected. This will give you four versions of your current layout style to select from:
- Full Screen
- Medium
- Short
- Thin
Select the style you want for your mobile banner and click Save Changes.
STYLING
To adjust the styling settings for your banner block, click on Styling and you will be presented with the following options:
- Overlay Opacity: You can add an overlay color (in the Color tab, described below) to your Banner Block. The Overlay Opacity percentage determines how opaque your Banner Image will be.
- Scroll Animation: When set to "yes", your images will have a parallax scrolling effect applied, where a user's scrolling action determines which portion of your image is revealed. When set to "no", the image will not have a parallax scrolling effect and will scroll with your site.
- Space Below Blocks: Controls the amount of space before the next block begins.
COLORS
You may customize the color of your Banner block to be different from your global settings selections. Click on the color box to change your colors. You may select from your accent colors or pick a new color. Press OK followed by Save Changes when you are happy with your color selection.
FONTS
You can easily customize the fonts you're using on your banners to override your global font settings. You can change the font, font size, letter spacing (kerning), and line height for any of the following items in your banners:
- TITLE
- SUBTITLE
- BUTTON TEXT
Click on Save Changes at the bottom of the control panel menu to apply your changes.
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.
0 Comments