Skip to content
Collage
Section overview
The Collage section creates a responsive grid layout of content cards that can display text, images, videos, and buttons in a customizable grid format.
Common Use Cases
- Creating feature showcases with images and descriptive text
- Building image galleries with optional text overlays
- Displaying product highlights or categories with linked cards
- Creating promotional grids with mixed media content
Usage Tips
- For best visual balance, use consistent image sizes across grid items
- Utilize row and column span settings to create visually interesting layouts
- Consider mobile display when configuring the grid - fewer columns work better on smaller screens
- Use background images or videos sparingly to avoid overwhelming the user
- For text overlay on images, ensure sufficient contrast for readability
Section Settings
| Setting | Description |
|---|---|
| Heading | Section heading text |
| Content | Rich text content displayed below the heading |
| Button label | Text displayed on the section button |
| Button URL | URL the section button links to |
| Top spacing | Spacing in pixels above the section (0-300px) |
| Bottom spacing | Spacing in pixels below the section (0-300px) |
| Color scheme | Background and text color combination for the section |
| Border color | Color of section borders |
| Button color | Style and color variant for the section button |
| Border position | Position of borders on the section (none, top, bottom, or both) |
| Desktop columns | Number of grid columns on desktop devices (1-6) |
| Mobile columns | Number of grid columns on mobile devices (1-4) |
| Horizontal alignment | Alignment of content horizontally within the section |
| Visibility | Device visibility options (all devices, mobile only, or desktop only) |
Block Settings
Content
A customizable content block that can display heading, text content, images, videos, and a button.
Block limit: 20
| Setting | Description |
|---|---|
| Heading | Block heading text |
| Content | Rich text content displayed within the block |
| Button label | Text displayed on the block button |
| Button URL | URL the block button links to |
| Make entire block clickable | Makes the entire block function as a link to the button URL |
| Featured image | Main image displayed in the block |
| Background image | Image used as the block background |
| Background video | Video used as the block background |
| Enable autoplay | Automatically plays background video |
| Enable mute toggle | Shows a button to toggle video sound |
| Enable loop | Continuously loops background video |
| Top spacing | Spacing in pixels above the block content (0-300px) |
| Bottom spacing | Spacing in pixels below the block content (0-300px) |
| Enable padding | Adds padding inside the block |
| Color scheme | Background and text color combination for the block |
| Border color | Color of block borders |
| Text color | Color of text within the block |
| Button color | Style and color variant for the block button |
| Enable gradient | Adds a gradient background overlay for better text visibility |
| Vertical alignment | Alignment of content vertically within the block |
| Horizontal alignment | Alignment of content horizontally within the block |
| Row span | Number of grid rows the block spans (1-6) |
| Column span | Number of grid columns the block spans on desktop (1-6) |