How to Add and Customize a Banner Block in PhotoBiz

How to Use Banner Blocks in PhotoBiz

Overview

Banner Blocks let you create large visual sections on your PhotoBiz website using images, text, and call-to-action buttons. Use a Banner Block to introduce your business, highlight a service or promotion, or separate sections of a page. You can start with a blank block or a predesigned option, then customize its images, layout, text, colors, and other settings. This guide explains how to add, customize, manage, and delete Banner Blocks, including how to adjust their appearance for mobile visitors.

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 it to add the block 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 it 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

The EDIT BANNER panel opens on the right side of the Website Builder. What you see depends on the design you selected.

If you selected BLANK, the IMAGES section displays “No images found. Click here to get started.”

If you selected a predesigned option, PhotoBiz uses images from your Clipboard to generate the initial banner. The layout, text, buttons, and styling vary depending on the design you selected. You can customize this content to fit your website.

Click UPLOAD to add images from your computer, CLIPBOARD to use images already in your account, or STOCK IMAGES to choose from the Stock Image Library.

Use one image for a static banner or multiple images for a slideshow or carousel. A Banner Block supports up to 50 images.

Blank Banner Example

Predesigned Banner Example

STEP FIVE

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

Depending on the selected layout, you can add a title, subtitle, alternative text, links, and call-to-action buttons.

Use the title and subtitle to introduce your message. Add a button when you want visitors to take another action, such as exploring a service or completing a contact form.

Add descriptive alternative text when the image provides meaningful information. You can also use ASK PHOTOBIZ AI to generate a description, then review it for accuracy.

Click SAVE CHANGES after updating the image content.

For detailed instructions, see How to Add Text to Banners and How to Link Banners.

FINAL STEP

Review the Banner Block on desktop and mobile devices.

Check the image crop, text readability, buttons, links, and slideshow behavior. If a desktop photograph does not display well on a phone, you can add a separate mobile image.

Use the sections below to customize the block’s layout, mobile display, styling, colors, fonts, and animation. Click SAVE CHANGES after updating settings that require saving.

Your saved changes take effect on your website automatically. You do not need to publish the website separately.

Managing Your Banner Block

The Banner Block includes a management menu that allows you to copy, move, rename, change the layout, adjust advanced settings, or delete the entire block.

To access these options, click the pencil icon in the upper-right corner of your Banner Block.

Available Block Management Options

COPY: Creates a duplicate of the Banner Block directly below the original. You can edit the copied block independently without changing the original. For instructions on copying and reusing blocks, see How to Move or Copy Blocks Between Pages.
MOVE: Moves your existing Banner Block to another website page or repositions it at the top or bottom of the current page. Moving a block preserves its existing content and settings. For complete instructions, see How to Use the Move Function With Blocks.
RENAME: Allows you to give your Banner Block a custom name for easier identification in the Website Builder. You can also use block names to create anchor links that direct visitors to a specific section of a website page. For complete instructions, see How to Rename Blocks and Add Anchor Links.
CHANGE LAYOUT: Opens the layout selection panel, where you can choose a different presentation for your banner images without rebuilding the block. For complete instructions, see How to Change the Banner Block Layout.
ADVANCED: Opens the EDIT BANNER panel, where you can manage images, mobile images, layout, styling, colors, fonts, and animation.
DELETE: Opens the confirmation panel for permanently deleting the entire Banner Block.

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

October 6, 2026

Website Builder Blocks Overview

October 23, 2026

How To Use Banner Blocks