The Showcase Grid element displays a grid of images with overlay text that appears on hover. It is ideal for team member profiles, portfolio pieces, service showcases, or any content that benefits from a visual grid layout with supporting details.
Showcase Grid has been replaced by Spotlight
For new pages we now recommend the newer Spotlight element, which expands each tile into a full-screen view. Your existing Showcase Grid sections keep working exactly as they are, so there's nothing you need to change. There's no automatic conversion, so to move a section across, add a Spotlight and re-enter your content.
Adding the Showcase Grid to Your Page
- 1Navigate to the page where you want the grid
- 2Click '+Add Element' in the page header bar
- 3Drag and drop the Showcase Grid icon (found under Gallery) to your desired location
- 4Click the settings icon on the element
- 5Upload images through the file manager for each grid item
- 6Click the settings tab to edit gallery display options
- 7Click 'Apply' to save
Grid Gallery Settings
Background image, the main image displayed for each grid item. Title, the heading shown on hover. Size and style, control the title's appearance and prominence. SEO heading, set the heading tag level for search engine optimisation. Subtitle, secondary text displayed beneath the title. Description, additional detail text revealed on hover.
SEO Heading Level
When setting the SEO heading for grid items, avoid using H1 as this would create multiple H1 tags on the page. Use H2 or lower to maintain proper heading hierarchy for accessibility and search engine optimisation.
Customising Grid Items
Each grid item can have its own background image, title, subtitle, and description. Upload high-quality images that are consistently sized for the best visual result. The grid automatically adjusts to fill the available width and responds to different screen sizes.
Use consistently sized images across all grid items for a clean, uniform appearance. Square or landscape images tend to work best. Keep titles and descriptions concise so they are fully visible on hover without overflowing.
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
Grid Gallery
Display a wall of photos visitors can enlarge and filter by category, with masonry or grid layouts, per-image titles and descriptions, tagging, and lightbox styling.
5 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
Still need help?
Submit a Support Ticket