MENU

How To Use Banner Blocks

Jul 21 2026 | By: PhotoBiz Knowledge Base

How to Add and Customize a Banner Block in PhotoBiz

Overview

A Banner Block allows you to create a large visual section on your PhotoBiz website using images, text, and call-to-action buttons. You can use Banner Blocks for homepage hero images, portfolio highlights, promotions, announcements, and other featured content.

PhotoBiz includes Classic, Carousel, No Crop, and Modern Carousel layout styles. You can also upload separate mobile images and customize the block’s styling, colors, fonts, backgrounds, and animations.

This guide explains how to add a Banner Block, upload your images, select a layout, and customize the primary Banner Block settings.

STEP ONE

Log in to your PhotoBiz account and click WEBSITE in the left-side menu.

This opens the Website Builder, where you can manage your website pages, navigation, and content blocks.

STEP TWO

Click the page where you want to add the Banner Block.

Locate the Banner Block icon in the block menu on the right side of the Website Builder. Click the Banner Block icon to add the block to the bottom of the page, or drag the icon to the position where you want the block to appear.

As you drag the block, a teal placement bar shows where the Banner Block will be added.

STEP THREE

Browse the available Banner Block designs and click SELECT on the design you want to use.

Blank designs use your website’s global design settings. Predesigned options include sample styling and formatting based on the selected preview.

You can change the Banner Block layout and design settings after adding it to the page.

STEP FOUR

Add images to your Banner Block.

If you selected a predesigned option, the block may include sample images from the image clipboard. Click an image thumbnail in the editing menu to replace it with one of your own images.

If you selected a blank option, click the banner area where it says CLICK TO ADD BANNER to open the editing menu.

Click ADD FILES to upload images from your computer. You can also insert images from the Clipboard or select images from the Stock Image Library.

Add one image to create a static banner. Add multiple images to create a slideshow or carousel, depending on the layout you selected. A Banner Block can contain up to 50 images.

If you selected a predesigned banner, click an image thumbnail in the Banner Block editing menu to customize the content associated with that image.

Enter a title, subtitle, and Alt Text when needed. Alt Text describes the image for visitors using screen readers and can help search engines understand the image.

You can also add call-to-action buttons that direct visitors to another page, block, website address, or other supported destination.

Click SAVE CHANGES after updating the image and content settings.

FINAL STEP

Open the Mobile Images section if you want to use separate images for visitors viewing your website on a phone.

Mobile images are helpful when a desktop image does not crop well on a smaller/vertical screen. Click the mobile image area and upload or select an image using the available image options.

Click SAVE CHANGES after completing your Banner Block settings. Your updates automatically apply to your website. View the page on both a desktop computer and mobile device to confirm that the images, text, and buttons display as expected.

Banner Block Layouts

PhotoBiz 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

Each Banner Block style includes mobile layout options for Full Screen, Medium, Short, and Thin displays.

Mobile layouts are interchangeable within the same layout style. For example, a No Crop desktop layout can use any No Crop mobile layout. A Modern Carousel desktop layout can use any Modern Carousel mobile layout.

Select the mobile layout that provides the best balance between image visibility and page length. Click SAVE CHANGES after making your selection.

Styling Options

Click STYLING to adjust the display and behavior of the Banner Block. The available settings may vary depending on the layout you selected.

Styling options may include:

  • Overlay Opacity: Controls the transparency of the color overlay placed over the banner image.
  • Auto Play: Controls whether a banner slideshow or carousel advances automatically.
  • Slideshow Speed: Controls how quickly the banner changes from one image to the next.
  • Scroll Animation: Controls whether the banner uses a scrolling effect, such as parallax, or remains static.
  • Space Between Items: Adjusts the space 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.

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.

Font settings may include:

  • Font Type
  • Font Size
  • Letter Spacing
  • Line Height

Use these controls carefully to keep your banner text readable on desktop and mobile screens. Click SAVE CHANGES after updating the font settings.

Animation

Click ANIMATION to customize supported button hover effects.

Animation options may include:

  • None
  • Fill
  • Overlay
  • Scale
  • Arrows

Hover animations appear when a visitor moves a cursor over the button on a supported device. Click SAVE CHANGES after selecting an animation.

Banner Image Recommendations

Avoid Tight Image Crops

Banner Blocks automatically adjust images to fit different screen sizes. Images with faces or important details close to the edge may be cropped on some devices.

For more consistent results:

  • Leave space around faces and other important subjects.

  • Avoid placing important details near the outer edges.

  • Use wider image compositions for Classic layouts.

  • Use images with the main subject positioned near the center.

Match the Image to the Layout

Different layouts work better with different image orientations.

  • Use horizontal images for most Classic layouts.

  • Use No Crop layouts when displaying the entire image is more important than filling the banner area.

  • Use vertical or mixed image orientations with Carousel and Modern Carousel layouts.

  • Use images with similar dimensions when you want a slideshow to appear more consistent.

Expect Cropping in Classic Layouts

Classic layouts are designed to fill the available banner area. The block may crop the top, bottom, or sides of an image based on the visitor’s screen size.

Select a No Crop layout when you need the complete image to remain visible.

Use Separate Mobile Images When Needed

A desktop banner image may not display well on a narrow phone screen. Upload a separate image in the Mobile Images section when the primary subject becomes cropped or difficult to see.

Mobile images only appear to visitors using mobile devices. They do not replace the image shown on the desktop version of the website.

See How To Upload Mobile Banner Images for full instructions

Test the Completed Banner

Review the Banner Block after making changes.

Check the following:

  • Title and subtitle readability

  • Image cropping

  • Button text and links

  • Slideshow or carousel speed

  • Desktop display

  • Mobile display

Troubleshooting or FAQs

Why is part of my banner image being cropped?

Classic layouts fill the entire banner area, which can cause parts of an image to be cropped on certain screen sizes. Use an image with additional space around the subject, upload a separate mobile image, or select a No Crop layout.

Why do I not see my mobile image on my computer?

Images added through the Mobile Images section only display on mobile devices. View the website on a phone to confirm that the mobile image is working.

Why do I not see every styling option?

Available settings depend on the selected Banner Block layout. For example, slideshow and spacing controls may only appear when the layout supports those features.

Does adding multiple images create a slideshow?

Adding multiple images creates a slideshow or carousel when the selected layout supports multiple-image rotation. The exact presentation depends on whether you selected a Classic, Carousel, No Crop, or Modern Carousel layout.

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

February 4, 2026

How To Use Text Editor Blocks

February 19, 2026

How To Change The Banner Block Layout

July 21, 2026

CLOSE