Quick Answer
How do you add a Photo Gallery in BizStackPro?
Open a funnel or website page, add the Photo Gallery widget, select images from the Media Library or available stock sources, choose a layout, adjust desktop and mobile settings, then add captions, alt text, click actions, or optional watermarks as needed.
Organizing Visual Content with a Photo Gallery
The Photo Gallery widget lets you organize multiple images into a structured layout instead of placing each image individually on the page.
Galleries can be used for products, case studies, portfolios, before-and-after images, brand imagery, and other visual collections.
Layout, mobile behavior, image size, and loading settings become especially important when a gallery contains many images.
Photo Gallery at a Glance
Before You Begin
Prepare the images you want to display and decide how the gallery should present them.
- Choose the images you want to include.
- Decide whether a grid, vertical, or masonry layout fits the image collection.
- Plan whether images need captions, links, lightbox actions, or watermarks.
Key Features & Benefits
Flexible Layouts
Choose grid, vertical, or masonry layouts and adjust columns, gaps, and image proportions.
Lightbox
Allow visitors to click or tap an image to view a larger version.
Captions & Actions
Add descriptive text and configure supported image actions, including links.
Watermarks
Add a logo or other mark over gallery images when needed.
Performance Controls
Use Lazy Load and Load More when working with larger galleries.
Keep the Gallery Focused
The source guide recommends using a focused collection of images instead of adding a large number of unrelated photos to one gallery.
How to Use the Photo Gallery
Add the Photo Gallery
Open the funnel or website page and drag the Photo Gallery widget onto the canvas.
Add Images
Select images from the Media Library or available stock sources.
Images selected from supported sources are copied into your account storage.
Choose a Layout
Select a grid, vertical, or masonry layout, then configure columns, gaps, and aspect settings.
Adjust Mobile Behavior
Use the Mobile Behavior settings to control columns, spacing, and stacking on smaller screens.
The source guide notes that one or two columns often works well on mobile.
Configure Performance
Enable Lazy Load and use Load More for larger image collections.
Add Captions, Alt Text & Actions
Add captions and descriptive Alt Text, then choose the appropriate click action for each image, such as opening a lightbox, opening a link, or scrolling to another section.
Add a Watermark if Needed
Apply the logo or mark, adjust its opacity and position, and check the result against both light and dark images.
Add Alt Text to Each Image
Descriptive Alt Text supports visitors using screen readers and helps search engines understand what an image represents.
Performance & Mobile Optimization
Limit the Image Count
There is no strict gallery limit, but the source guide recommends keeping a gallery around 20 images when possible.
Larger collections can be split into separate galleries or use Lazy Load and Load More.
Use Consistent Crops
Uniform aspect ratios can create a cleaner grid, while masonry layouts can work well when images use mixed orientations.
Compress Uploads
Use web-optimized JPG or PNG files. The source guide suggests aiming for approximately 200–300 KB per image when possible.
Lazy-Load Larger Galleries
Prioritize the images visible near the top of the page and lazy-load the rest when appropriate.
Keep Captions Readable
Keep captions short, typically one or two lines, and maintain readable color contrast.
Example
A before-and-after gallery can use a lightbox for larger image viewing or an image action that scrolls the visitor to a contact form.
Frequently Asked Questions
Can I use different layouts within the same gallery?
No. Each gallery uses one layout type at a time. If you want different layouts on the same page, add multiple gallery widgets and set a different layout for each.
How can I ensure the gallery looks good on mobile?
Galleries are responsive by default. For finer control, use Mobile Behavior settings to adjust columns, spacing, and stacking rules, then test on common device sizes.
What file formats are supported in the gallery?
JPEG, PNG, and GIF are supported. For best results, upload high-quality images that are optimized for web performance.
Can I add a link to each image?
Yes. You can assign an action per image such as Open Link, and optionally choose to open the link in a new tab.
How many images can I add to one gallery?
There’s no strict limit, but for performance, keep galleries around 20 images when possible, or enable Lazy Load and Load More for larger galleries.
Continue Learning
Continue with related funnel and website guides for creating and using visual content.
