The Grid Gallery displays a wall of photos that visitors can enlarge, and optionally filter by category. For other ways to show photos, compare it with Spotlight and the Before and After slider, or see the galleries overview.
Adding a gallery
- 1In the editor, open Add Elements and choose Grid from the Gallery group.
- 2The file browser opens automatically so you can pick your photos: select as many as you like in one go.
- 3The panel opens on the Images tab. Use + Add Images at any time to add more.
The panel has four tabs: Images, Settings, Tags and Styles.
Images tab
Click any image row to open it:
- Title: shown on hover and in the enlarged view
- Alt text: describes the image for accessibility and search engines. This never appears on the page.
- Description: shown under the photo when enlarged, and on hover
- Tags: appear once you've created some on the Tags tab
Drag a row by its handle to reorder, click a thumbnail to swap the picture, and use the bin icon to remove one. There's no limit on how many images a gallery can hold.
Settings tab
At the top of the panel you can switch between Desktop and Mobile. This changes Columns and Spacing only.
Layout
- Gallery type: Masonry keeps each photo's natural shape and packs them together; Grid gives every photo the same height
- Columns: 1 to 6 (three on desktop, one on mobile by default)
- Spacing: None, S, M, L or XL
Display
- Square images: crop every photo to a square
- Image height (px): only appears when Gallery type is Grid and Square images is off
- Lightbox on click: let visitors click to enlarge
- Tag filtering: show the category filter buttons
Tags tab
Create your categories here: click + Add Tag, then type a name. Assign them to photos over on the Images tab.
The filter bar only appears on your page once at least one photo actually has a tag. Deleting a tag also removes it from every photo using it.
Styles tab
Hover Overlay
What visitors see when they hover a photo:
- Overlay opacity (%)
- Show title on hover
- Show description on hover
Lightbox
The enlarged view. This section only appears when Lightbox on click is on.
- Title colour, Title font size (px) and Title weight
- Description colour and Description font size (px)
- Show title in lightbox and Show description in lightbox
Tips
- Can't find 'Image height'? It only applies to the Grid gallery type with square images switched off. Masonry and square images work out their own heights.
- Can't find the lightbox colour settings? They're hidden while Lightbox on click is off.
- Hover and lightbox settings are independent. Turning a title off on hover doesn't turn it off in the enlarged view.
- Alt text is invisible on the page, so it's for screen readers and search engines. Use Title and Description for text visitors should see.
- Changing the column count reloads the photos at a new size, so the grid re-flows for a moment. That's normal.
- Galleries can't link individual images to pages. Clicking a photo either enlarges it or does nothing.
Was this helpful?
Last updated:
Related Articles
Spotlight
Turn a grid of photos into an interactive showcase: click a tile to expand it full-screen with the full story. Ideal for team profiles, case studies and portfolios.
6 min read
Before and After Slider Gallery
Show a transformation with a slider visitors drag between two photos. One before-and-after pair per element, with titles, alt text and layout controls.
4 min read
Image Galleries
Showcase images with banner sliders, grid galleries, before/after sliders, and more.
3 min read
Still need help?
Submit a Support Ticket