MENU

How To Use Banner Blocks

May 21, 2025 | By: PhotoBiz Knowledge Base

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 name of the page you would like to add a banner to, then click the banner block icon from the right side.

You can either:

  • Click the icon to add it to the bottom of your page, or
  • Click and drag the icon to place it wherever you want on your page.
    As you drag it, a teal bar will appear to show you where it will land.

STEP THREE

Browse our library of predesigned layouts, and choose the select button on your favorite one.

  • Blank blocks will use the global styling settings of your website.
  • Predesigned blocks will use custom design settings to look exactly like the layout you have selected.

ADDING IMAGES & STYLING YOUR BANNER BLOCK

IMAGES

Predesigned Layouts

If you selected a predesigned layout, you can click on the thumbnail image within the editing menu. Then you can click "add files" to replace the placeholder image with your own.

Blank Layout

If you selected a blank layout, you can click in the center of the block, where it says "click to add banner" to open the editing menu. Here, you can click the upload button to add your own images to this block.

Each banner block supports up to 24 images.

You can:

  • Upload images from your computer.
  • Insert images from the Clipboard.
  • Choose images from the Stock Image Library.

Add:

  • One image for a static banner.
  • Multiple images to create a slideshow.

PRO TIP!

  • Use horizontal images for best results unless you're using a Carousel layout, which works well with vertical images.
  • Images with centered subjects (not close-ups) look better in banner designs.

Adding Text, Alt Text, & Buttons

  1. After adding an image, you'll see a thumbnail in the editing menu.
  2. Click the thumbnail to add:
    • Title: Main text for your banner.
    • Subtitle: Supporting text.
    • Alt Text: For accessibility and SEO.
    • Button: Add call-to-action buttons.
  3. Customize the text and alignment settings, then click Save Changes.

STEP FIVE

MOBILE IMAGES

  • Upload a separate set of images for mobile viewers by clicking the Mobile Images icon.
  • This is especially useful for layouts like Classic, ensuring mobile images display properly on vertical screens.

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

Best for horizontal "hero" images. These fill the space entirely and may crop images based on screen size.

  • Full Screen
  • Medium
  • Short
  • Thin

CAROUSEL LAYOUTS

Display multiple images in a scrolling carousel, ideal for mixed aspect ratios.

  • Full Screen
  • Medium

NO CROP LAYOUTS

Fits the entire image into the banner without cropping, adding white space as needed.

  • Full Screen
  • Medium
  • Short
  • Thin

MOBILE LAYOUT OPTIONS

  • Customize how your banner appears on mobile by selecting a mobile-specific layout.
  • Available styles: Full Screen, Medium, Short, or Thin.
  • Click Save Changes 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: Add a color overlay to your banner and adjust its transparency.
  • Scroll Animation: Enable parallax scrolling for dynamic effects or keep it static.
  • Space Below Blocks: Adjust the spacing between your banner and the next block.

Click on SAVE CHANGES to apply your selections. 

COLORS

  • Change the banner's colors by clicking the Color tab in the editing menu.
  • Choose from your accent colors or pick a custom color.
  • Click OK and Save Changes.

FONTS

  • Adjust the banner font to override global settings.
  • Customize:
    • Font Type
    • Size
    • Letter Spacing (Kerning)
    • Line Height
  • Click Save Changes to apply your font settings.

ANIMATIONS

  • Select the Animations tab to apply hover effects to your banner buttons.
  • Choose from:
    • None
    • Fill
    • Overlay
    • Scale
    • Arrows
  • Click Save Changes to finalize your animation settings.

PRO TIP!

Use horizontal images for Classic and No Crop layouts. For vertical images, Carousel layouts work best.

If you have any questions, call our Passionate Support Team at 866.463.7620 or start a live chat from your PhotoBiz control panel. We’re available Monday – Friday, 9:00 AM – 6:00 PM EST.

NEXT: HOW TO USE LIST BLOCKS
Previous Post Next Post

Related Posts

How To Add Text To Banners

May 27, 2025

How To Use Blog Blocks

May 21, 2025

How To Use Text Editor Blocks

October 8, 2025

Website Builder Blocks Overview

April 17, 2025

CLOSE