Add a Banner image slideshow featuring text and buttons to create a great visual and to highlight important information on your website.
STEP ONE
Log into your PhotoBiz account and click on the WEBSITE option in the left side menu.
STEP TWO
Click on the page that 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 click on 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 add 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 to use 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 in order 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.
BACKGROUNDS
You can add a background image to display behind your Banner block by adding a background image. You can upload your own custom background image or choose one from the Background Library. You can customize how the background image is displayed under the Background Settings.
If you upload a Custom Background or select a file from the Background Library, you can customize how the background image is displayed under the Background Settings from the following 4 different options:
- Tile: Will tile your image to fill the background
- Top Left: Will align your image to the top left
- Centered: Will align your image at the center of the available space
- Cover: Will scale your image to be as large as possible to completely cover the background
Click on Save Changes to apply your changes to the background settings.
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.