You know those beautiful image galleries on Airbnb listings? The ones with a big main photo (thumbnail) and smaller ones arranged beside it, all clean and modern? If you’ve ever wanted to create something just like that for your website, you’re in luck.
In this guide, I’ll show you how to make your own Airbnb-style image gallery using Bricks Builder and Max Addons. You don’t need to know any code; just follow along step by step, and by the end, you’ll have a great-looking gallery that works on any screen.
Real-Life Use Cases for an Airbnb-Style Image Gallery
Not sure if this gallery layout is the right fit for your website? Here are a few ways you can use the Airbnb-style gallery to enhance your image display on your Bricks Builder website:
- Photography Portfolio: Show off your best work with a large featured image and supporting shots, all at a glance.
- Interior Design Projects: Display different angles of a room or home in a clean and elegant way.
- E-commerce Product Pages: Highlight product images’ main shots on the left and detail shots on the right to give buyers a complete view.
- Event Highlights: Share the story of an event by putting the most important moment up front and the rest alongside it.
- Travel Blogs: Combine scenic landscapes with close-ups or behind-the-scenes photos to create a mini visual story.
How To Create an Airbnb-Style Image Gallery Using Bricks Builder & Max Addons
1. Install Max Addons
Before you proceed, make sure Max Addons is installed and active on your WordPress site.
Max Addons adds extra features to Bricks Builder, and one of those features is the Image Gallery element we’ll use today.
2. Create or Edit a Page
Next, go to your WordPress dashboard and either create a new page or open one that already exists anywhere where you want the gallery to show up. Click “EDIT WITH BRICKS” to open the Bricks Builder editor.
3. Add the Image Gallery Element
Inside the Bricks editor, look for the Image Gallery element. You can search for it in the sidebar.
Once you find it, add the element to the page where you want the gallery to appear. Ensure to check the “MAX” tag on the element to confirm you’re using the Max Addons element.
4. Choose the Gallery Type
Next, you’ll pick how the gallery works. You can go with a Single gallery or Multiple galleries. For now, let’s keep it simple and stick with a single gallery.
5. Add Your Images
Click the image area and start adding the photos you want to use. You can upload new images or pick ones from your media library. These are the images that will show up in your gallery, so use high-quality ones if you can.
6. Pick the BnB Layout
Next you need to choose the layout. Max Addons offers a few interactive gallery layout options like Grid, Masonry, Metro, and Justified. But since we’re going for that Airbnb style, you’ll want to choose the BnB layout.
As soon as you select the BnB layout, your gallery will automatically change into a layout that looks just like the ones you see on Airbnb, with one big image on the left and four smaller ones on the right.
7. Adjust the Container Settings
You’ll see options to set the Container height, change how many Images to show, and tweak the Spacing between them.
You can also choose how the images are ordered in the default order, by upload date, or even randomly.
Note: By default, Airbnb-style image gallery shows 5 images. But in Max Addons Image Gallery element we have also added one option that lets you show 6 images, and the layout adjusts nicely to fit the extra one. You can try both and see which you like better.
8. Style Your Thumbnails
If you want your gallery to have a bit more personality, you can customize the thumbnails.
You can:
- add borders around the images
- apply filters like grayscale or blur
- even set a special hover effect when someone moves their mouse over a photo.
9. Set the Image Click Action
When someone clicks on an image, what should happen? You have a few options, like opening the image on a new page or linking it elsewhere.
But for this tutorial, we will choose the Lightbox option. That way, when someone clicks a photo, it opens in a pop-up style viewer where they can browse all your images without leaving the page.
10. Customize the Lightbox
Once the Lightbox is active, you can fine-tune how it works. You can set the image size, decide what text shows up (like the image title or caption), and choose how users interact with it. For example, they can zoom in, click next, or close the viewer.
You can also add smooth animations like fade or zoom to make everything feel more polished.
There’s even a setting to show little image previews (thumbnails) at the bottom of the Lightbox. That makes it easier for visitors to skip any photo they want.
11. Set Up the “Show More” Button
If your gallery has lots of images, it’s a good idea to use the “Show More” button. This hides some images until someone clicks the button to see more.
You can fully customize how this button looks, change the text, make it round, outlined, big or small, and even add an icon. You can also choose how it’s aligned on the page to fit nicely with your design.
12. Style the Captions
Want to show some text with your images? You can add captions! Choose what kind of text to show a title, caption, or description, and decide where it should go.
You can also style the text, add background color, and even set it up only to show when someone hovers over the image.
13. Add a Tilt Effect (Optional)
You can also turn on a Tilt Effect that makes the images move slightly in 3D when someone hovers over them.
14. Add a Download Button (Optional)
If you want visitors to be able to download your images, there’s a setting for that, too.
Enable the “Download Button” option, and a small download icon will appear in the Lightbox. You can even choose your icon to match your site’s style.
15. Add a Background Overlay
To complete the gallery design, you can enhance the overall appearance by adding a background overlay.
You’re Done!
And after making all the necessary customizations, this is what the final Airbnb-style image Gallery will look like!
And that’s it! You built an Airbnb-style image gallery using Bricks Builder and Max Addons. You can showcase your travel photos, products, portfolio, or anything else, and this layout will make your images look amazing.
Here are some additional tutorials if you’re looking for more ways to level up your image display game on your Bricks Builder website.
- How to Create Image Gallery with ACF in Bricks Builder?
- How to Create a Filterable Image Gallery using Bricks Builder?
- How To Create a Dynamic Image Accordion With Bricks Builder [Without Coding]
- How To Add Image Mask in Bricks Builder? [Without CSS]
Including the Image Gallery element, Max Addons offers over 50 unique elements designed to supercharge your website-building process. These elements help you streamline your workflow, saving you valuable time and resources. Are you ready to elevate your website creation journey? Get Max Addons today!
If you found this helpful tutorial, feel free to share your thoughts by commenting below!
