How to Use Banner Blocks for PhotoBiz Website Builder

How to Add and Customize a Banner Block in PhotoBiz

Overview

Banner Blocks allow you to create large visual sections on your PhotoBiz website using images, slideshows, text, and call-to-action buttons. Banner Blocks are commonly used for homepage hero sections, featured promotions, announcements, portfolio highlights, and marketing content throughout your website.

PhotoBiz includes multiple Banner Block layout styles, including Classic, Carousel, No Crop, and Modern Carousel layouts. You can also upload separate mobile images and customize colors, fonts, styling, and animations directly inside the Website Builder.

This guide walks you through adding a Banner Block to your website and customizing all available Banner Block settings.

STEP ONE

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

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

STEP TWO

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

On the right side of the Website Builder, locate the Banner Block icon.

You can either:

Click the Banner Block icon to add it to the bottom of the page
Click and drag the Banner Block icon to place it exactly where you want it on the page

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

STEP THREE

Browse the available Banner Block layouts and click SELECT on the layout you want to use.

Blank layouts automatically use your website’s global design settings.

Predesigned layouts include custom styling and formatting based on the selected design preview.

STEP FOUR

Add your banner images.

If you selected a predesigned layout, the Banner Block will automatically load with sample images from the image clipboard. You can replace these placeholder images with your own at any time.

To replace an image, click the image thumbnail inside the editing menu, then click ADD FILES to upload your own images.

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

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

You can add:

One image for a static banner
Multiple images for a slideshow

After uploading images, click an image thumbnail to customize:

Title text
Subtitle text
Alt Text for accessibility and SEO
Call-to-action buttons

When finished, click SAVE CHANGES.

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.

After uploading images, click the image thumbnail to customize:

Title text
Subtitle text
Alt Text for SEO and accessibility
Call-to-action buttons

When finished, click SAVE CHANGES.

STEP FIVE

Use the Mobile Images section to upload separate images specifically for mobile visitors.

This is especially helpful when desktop banner images do not crop well on smaller screens.

Mobile images only display to visitors viewing your website on mobile devices. You will not see mobile images while viewing the desktop version of your website.

To preview your mobile images, use your browser’s mobile preview mode or view the page on a mobile device.

LAYOUT

There are 16 different layouts for the Banner Block.

4 Classic layouts: Classic Full Screen, Classic Medium, Classic Short, and Classic Thin.

4 Carousel layouts: Carousel Full Screen, Carousel Medium, Carousel Short, Carousel Thin.

4 No Crop versions of our Classic layouts: No Crop Full Screen, No Crop Medium, No Crop Short, and No Crop thin.

4 Modern Carousel layouts: Modern Carousel Full Screen, Modern Carousel Medium, Modern Carousel Short, Modern Carousel Thin

Once you've chosen the layout you wish to use, click save.

Classic Layouts

Classic layouts are designed for traditional full-width hero banners and work best with horizontal images.

Available Classic layouts include:

Classic Full Screen
Classic Medium
Classic Short
Classic Thin

Carousel Layouts

Carousel layouts display multiple images in a scrolling slideshow format and work well with vertical or mixed image sizes.

Available Carousel layouts include:

Carousel Full Screen
Carousel Medium
Carousel Short
Carousel Thin

No Crop Layouts

No Crop layouts display the full image without cropping. Additional spacing may appear depending on image dimensions and screen size.

Available No Crop layouts include:

No Crop Full Screen
No Crop Medium
No Crop Short
No Crop Thin

Modern Carousel Layouts

Modern Carousel layouts provide a modern slideshow presentation style with enhanced image display and transitions.

Available Modern Carousel layouts include:

Modern Carousel Full Screen
Modern Carousel Medium
Modern Carousel Short
Modern Carousel Thin

MOBILE LAYOUT OPTIONS

Each Banner Block style includes its own mobile layout options. Mobile layouts are interchangeable within the same banner style.

For example, if you use a No Crop layout on desktop, you can choose any No Crop mobile layout. If you use a Modern Carousel layout on desktop, you can choose any Modern Carousel mobile layout.

Available mobile layout sizes include:

Full Screen
Medium
Short
Thin

Click SAVE CHANGES after selecting your layout settings.

STYLING

To adjust the styling settings for your banner block, click on styling and you will be presented with the following options, these options can vary based on the layout you've selected:

Overlay Opacity: Add a color overlay to your banner and adjust its transparency.

Auto Play: Controls if the slideshow autoplays or not

Slideshow Speed: Controls how fast the images transitiong for a banner slideshow.

Scroll Animation: Enable parallax scrolling for dynamic effects or keep it static.
Space Between Items: Controls space between images in Carousel layouts.

Space Below Blocks: Adjust the spacing between your banner and the next block.

Click on SAVE CHANGES to apply your selections.

COLORS

Use the Colors section to customize your banner color settings. Available color fields may vary depending on the layout you selected.

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 choose from your website accent colors or select custom colors. Click SAVE CHANGES to apply your updates.

FONTS

Use the Fonts section to override your website’s global font settings.

You can customize:

Font Type
Font Size
Letter Spacing
Line Height

ANIMATIONS

Use the Animations section to customize button hover effects.

Available animation options include:

None
Fill
Overlay
Scale
Arrows

After updating your settings, click SAVE CHANGES. Your changes automatically apply to your website.

Common Banner Image Mistakes

Banner Blocks automatically adjust images based on screen size and layout style. Because of this, some images may appear cropped differently on desktop, tablet, or mobile devices.

The following tips can help your banners display more consistently across devices.

Avoid Tight Crops

Images with subjects positioned too close to the edge of the frame may become cropped on certain screen sizes.

For best results:

Leave extra space around faces and subjects
Avoid placing important details near the edges of the image
Use wider compositions for Classic layouts

Match Image Orientation to the Layout

Different Banner Block layouts work better with different image shapes.

Recommended image types:

Horizontal images for Classic and No Crop layouts
Vertical or mixed images for Carousel and Modern Carousel layouts

Expect Some Cropping on Full Width Layouts

Classic layouts are designed to fully fill the banner space. Depending on screen size, parts of the image may be cropped automatically.

If you want the full image to remain visible, consider using a No Crop layout instead.

Test Your Banner on Multiple Devices

Banner images may display differently on desktop and mobile devices.

After updating your banner:

Preview the page on desktop
Check the mobile version
Test landscape and portrait orientations when possible

Use Mobile Images When Needed

If your desktop banner image does not display well on mobile devices, upload a separate image using the Mobile Images section.

This gives you more control over how your banner appears on smaller phone screens.

Helpful Notes

Best Image Types by Layout

Use horizontal images for Classic and No Crop layouts
Use vertical or mixed aspect ratio images for Carousel and Modern Carousel layouts
Images with centered subjects typically display best in Banner Blocks

Slideshows

Adding multiple images to a Banner Block automatically creates a slideshow for supported layouts.

Mobile Images

Uploading separate mobile images can improve how banners display on phones and tablets, especially for large hero-style banners.

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

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 29, 2025

How To Use Banner Blocks