Image Grid
Image grid in columned layout to achieve staggered appearance.
View a live demo of this module.
Content
- Add as many images
- Adjust how many columns on desktop
Styles
- Adjust animation
- Edit box shadow
How to Use This Module
The Image Grid module is perfect for creating dynamic visual galleries that showcase your restaurant’s atmosphere, food photography, or local business highlights. Unlike traditional image galleries that display photos in uniform rows, this module creates an engaging staggered layout that draws visitors’ attention and encourages exploration.
You’ll find this module particularly effective on your homepage, about pages, or dedicated gallery sections where you want to display multiple images without the formal structure of a standard grid. The columned layout automatically adjusts image positioning to create natural visual breaks, making it ideal for showcasing diverse content like menu items, interior shots, team photos, or customer experiences.
Setting Up Your Image Grid
To add this module to any page, simply drag it from the module library in the HubSpot page editor onto your desired page section. The module works seamlessly across all page types in the Bussin theme, from landing pages to blog posts and system pages.
When uploading images, consider using photos with varying dimensions to maximize the staggered effect. Square images work well, but mixing in some rectangular photos will enhance the dynamic appearance. For restaurants, try combining close-up food shots with wider establishment photos to create visual rhythm.
Optimizing for Different Devices
The desktop column adjustment feature is crucial for responsive design. Start with 3-4 columns for desktop viewing, then preview how the layout adapts on mobile devices. The module automatically stacks images appropriately on smaller screens while maintaining the visual interest of your original layout.
Design Considerations
The animation and box shadow options align perfectly with the Bussin theme’s vibrant, energetic aesthetic. Subtle animations can guide user attention, while box shadows add depth that complements the playful design elements throughout your site.