Showcase Grid

4 min readUpdated 15 March 2026

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.

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?