Add a Banner image slideshow featuring text and buttons to create a great visual and to highlight important information on your website.
ADDING A BANNER BLOCK TO 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.
ADDING IMAGES & STYLING YOUR BANNER BLOCK
IMAGES
Once you click inside the banner block, the editing 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.
Once you add your image, you will see a thumbnail of the image in the editing menu. You can click on the thumbnail then scroll down a bit to add the following to your image:
- Title
- Subtitle
- Alt Text
- Button
Enter your text and select your button and alignment settings, then click Save Changes to apply the text to your banner image.
STEP FIVE
MOBILE IMAGES
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.
LAYOUT
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.
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 to apply your selection.
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.
Click on SAVE CHANGES to apply your selections.
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.
ANIMATIONS
Click on the Animations option in the editing menu. With the animation feature, you can choose from several hover effects to give your banner button a dynamic look and feel. You can select from five options:
- None
- Fill
- Overlay
- Scale
- Arrows
Once you have made your selection, click on Save Changes to apply the animation to your button.
Click on Save Changes to apply your changes to the background settings.
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.
If you have any questions about the Banner Block, please give our Support Team a call toll-free at 866.463.7620 or send us a live chat from your PhotoBiz control panel. We're available Monday - Friday 9:00am - 6:00pm EST and we're happy to help you however we can.