How to Add and Customize a Banner Block in PhotoBiz

Overview

The Banner Block lets you create a large visual section on your PhotoBiz website using images, text, and call-to-action buttons. Banner Blocks are commonly used for homepage hero images, portfolio highlights, promotions, announcements, and other featured content.

You can choose from predesigned Banner Block styles or start with a Blank design that uses your website’s global design settings. After adding the block, you can customize its images, text, links, layout, mobile display, colors, fonts, and other supported settings.

This guide explains how to add a Banner Block, customize its primary settings, and understand the options available after the block has been added to your page.

STEP ONE

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

STEP TWO

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

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

As you drag the block, the placement indicator shows where the Banner Block will be added.

STEP THREE

PhotoBiz will display the available Banner Block designs.

You can select Blank to start with a Banner Block that uses your website’s global design settings, or choose one of the predesigned options labeled Banner 1 through Banner 11.

Click SELECT on the design you want to use.

The design you choose provides the starting layout and styling for the block. You can change the images, text, buttons, colors, fonts, layout, and other supported settings after the Banner Block is added to your page.

STEP FOUR

Add the images you want to display in your Banner Block.

If you selected Blank, click the banner area where it says CLICK TO ADD BANNER to open the image editor.

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

You can use a single image for a static banner or add multiple images for layouts that support slideshows or carousels. Banner Blocks support up to 50 images.

If you selected a predesigned option, the block may already contain sample images. Click an image thumbnail in the Banner Block editor to replace it with one of your own images.

STEP FIVE

Click an image thumbnail in the Banner Block editor to customize the content associated with that image.

Depending on the Banner Block design and layout, you can add a title, subtitle, Alt Text, and call-to-action buttons.

Use Alt Text when appropriate to describe the image for visitors using screen readers and to provide search engines with additional context about the image.

You can also link supported banner content or buttons to another page, block, website address, or other available destination.

For more information about creating links, see How to Link Banners.

For additional text options, see How to Add Text to Banners.

Click SAVE CHANGES after updating the banner content.

FINAL STEP

Review the Banner Block on both desktop and mobile devices.

If the desktop image does not work well on a narrow phone screen, you can add a separate mobile image so the most important part of the photo remains visible.

For complete mobile Banner Block instructions, see How to Adjust the Banner Block for Mobile Users.

Click SAVE CHANGES after completing your Banner Block settings. Your changes take effect on your website when they are saved. You do not need to publish the website separately.

Banner Block Menu Options

Click the pencil icon on the Banner Block to open the block menu.

The menu includes:

COPY creates a duplicate of the Banner Block directly below the original.
MOVE lets you move the block to another location on the current page or to another page.
RENAME lets you give the block a custom name, including a name you can use when creating an anchor link.
CHANGE LAYOUT lets you select another supported Banner Block layout without rebuilding the block.
ADVANCED opens additional settings for the Banner Block.
DELETE removes the Banner Block from the page.

The current Banner Block layout is also displayed on the block in the Website Builder.

If you want to reuse a Banner Block on another page, you can create a copy and then move the duplicate to the destination page.

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

Banner Block styles also include mobile layout options for Full Screen, Medium, Short, and Thin displays.

Mobile layouts can be changed within the same layout style. For example, a No Crop desktop layout can use another No Crop height on mobile, while a Modern Carousel desktop layout can use a different Modern Carousel height.

Choose the mobile layout that provides the best balance between image visibility and the amount of vertical space used on the page. Pasted text

For more information, see How to Adjust the Banner Block for Mobile Users

Styling Options

Click STYLING in the Banner Block editor to adjust supported display and behavior settings.

Available options depend on the layout you are using and may include:

Overlay Opacity controls the transparency of the color overlay placed over the banner image.
Auto Play controls whether supported slideshows or carousels advance automatically.
Slideshow Speed controls how quickly images advance.
Scroll Animation controls supported scrolling effects, such as parallax.
Space Between Items adjusts spacing 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.

For more information about timing, see How to Change the Banner Slideshow Speed.

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.

Available font controls may include font type, font size, letter spacing, and line height.

Use these settings carefully so banner text remains easy to read on both desktop and mobile screens.

For complete instructions, see How to Change the Fonts on Banners.

Animation

Supported Banner Block designs can include hover effects for call-to-action buttons.

Available effects may include:

None
Fill
Overlay
Scale
Arrows

These effects appear when a visitor moves their cursor over a supported button on a desktop or other pointer-based device. Pasted text

Click SAVE CHANGES after selecting an option.

Banner Image Recommendations

Leave Room Around Important Subjects

Banner images automatically adapt to different screen sizes. Avoid placing faces, text within the image itself, or other important details too close to the outer edges.

Leaving additional space around the main subject gives the Banner Block more room to adjust without cropping important parts of the photograph.

Match the Image to the Layout

Horizontal images generally work well with Classic layouts.

Choose a No Crop layout when displaying the entire photograph is more important than filling the available banner area.

Carousel and Modern Carousel layouts can work well with vertical photographs or a mixture of image orientations.

When using multiple images, photographs with similar dimensions can create a more consistent presentation.

Expect Cropping With Classic Layouts

Classic layouts are designed to fill the banner area. Depending on the visitor’s screen size, PhotoBiz may crop the top, bottom, or sides of the image.

If the entire image needs to remain visible, consider a No Crop layout.

Use Separate Mobile Images When Needed

A wide desktop image may not display well on a narrow phone screen.

Use the Banner Block's mobile image options when the primary subject becomes cropped, difficult to see, or poorly positioned on mobile.

The separate mobile image is used for the mobile display and does not replace the desktop image.

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.

Test the Completed Banner

After making changes, review the page on both desktop and mobile devices.

Check the image crop, title and subtitle readability, buttons and links, slideshow or carousel behavior, and the overall amount of space the banner uses on the page.

What Your Clients See

Visitors see the images, text, buttons, colors, and layout you configure for the Banner Block.

If the selected layout supports multiple images, visitors may see those images as a slideshow or carousel based on the layout and styling settings you choose.

When you add a link to supported banner content or a button, visitors can click it to open the destination you configured.

Visitors on mobile devices can see the separate mobile image when one has been added. If you do not add a separate mobile image, the Banner Block uses the primary banner image and adjusts it for the available mobile display.

Troubleshooting

Why is part of my banner image being cropped?

Classic layouts fill the banner area, so portions of an image may be cropped depending on the visitor’s screen size.

Try using an image with more space around the main subject, add a separate mobile image, or choose a No Crop layout.

Why don't I see my mobile image on my computer?

Images added through the mobile image settings are intended for the mobile version of the Banner Block.

View the website on a phone or another narrow mobile display to confirm the mobile image.

Why do I see different images on my phone vs. my desk top?

You have mobile images uploaded to the banner block that are different from the reuglar banner images you've uploaded.

Why don't I see every styling option?

Banner Block settings vary by layout. Controls such as slideshow behavior or spacing only appear when the selected layout supports them. Pasted text

Does adding multiple images automatically create a slideshow?

The presentation depends on the layout you select.

Layouts that support multiple-image rotation can display the images as a slideshow or carousel, while the exact behavior depends on whether you are using Classic, Carousel, No Crop, or Modern Carousel.

Related Guides

Need Help?

Support Hours: Monday to Friday, 9am to 6pm EST
Phone: 866.463.7620
Support Channels: Phone, Live Chat, Support Ticket

NEXT: HOW TO USE LIST BLOCKS

Previous Post Next Post

How To Add Text To Banners

May 27, 2025

How To Use Blog Blocks

September 21, 2026

How To Use Text Editor Blocks

September 3, 2026

Website Builder Blocks Overview

August 3, 2026

How To Use Banner Blocks