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.