Gallery section with tag filters, 4 layout modes (Grid, Slider, Masonry, Collage) and configurable hover effects.
Gallery
The Gallery section displays a collection of images with a tag-based filter system. 4 layout modes allow you to adapt the presentation to any type of content: portfolio, Instagram feed, lookbook, or product showcase.
4 Layouts
| Layout | Description | Ideal for |
|---|---|---|
| Grid | Regular grid with configurable columns | Portfolios, showcases, feeds |
| Slider | Horizontal scrolling with navigation | Limited space, featured content |
| Masonry | Pinterest-style column layout | Images of varying heights |
| Collage | Free-form layout with variable sizes per image | Creative compositions |
3 Presets
| Preset | Description |
|---|---|
| Gallery | Classic 3-column grid with filters |
| Slider | Slider mode with autoplay and lift effects |
| Tight 6-column grid, social feed style |
Main Settings
Alignment
| Setting | Description | Options | Default |
|---|---|---|---|
| Desktop alignment | Title/header alignment | Left / Center / Right | Center |
| Mobile alignment | Mobile alignment | Left / Center / Right | Center |
Layout
| Setting | Description | Options | Default |
|---|---|---|---|
| Layout mode | Display type | Grid / Slider / Masonry / Collage | Grid |
| Gap | Spacing between images | 0-80px | 20px |
| Border radius | Corner rounding | 0-50px | 8px |
Hover Effects
| Setting | Description | Options | Default |
|---|---|---|---|
| Hover effect | Animation on hover | None / Zoom / Fade / Lift / Tilt | Zoom |
| Intensity | Effect strength (zoom %) | 100-120% | 106% |
Grid / Masonry / Collage
| Setting | Description | Options | Default |
|---|---|---|---|
| Desktop columns | Number of columns | 2-6 | 3 |
| Tablet columns | Columns on tablet | 1-4 | 2 |
| Mobile columns | Columns on mobile | 1 / 2 | 1 |
Slider
| Setting | Description | Options | Default |
|---|---|---|---|
| Desktop slides | Number of visible slides | 2-6 | 3 |
| Tablet slides | Slides on tablet | 1-4 | 2 |
| Mobile slides | Slides on mobile | 1 / 2 | 1 |
| Navigation | Show arrows | On / Off | On |
| Pagination | Show dots | On / Off | On |
| Autoplay | Auto scroll | On / Off | Off |
| Speed | Duration per slide | 3-10s | 5s |
| Loop | Return to beginning | On / Off | On |
Navigation Style (Slider)
| Setting | Description | Options | Default |
|---|---|---|---|
| Navigation background | Arrow background color | Transparent / Background / Foreground / Accent 1 / Accent 2 | Background |
| Icon color | Arrow color | Foreground / Background / Accent 1 / Accent 2 | Accent 1 |
| Icon size | Icon dimensions | 16-32px | 20px |
| Navigation position | Arrow placement | Overlay / External | Overlay |
| Dot color | Pagination color | Foreground / Background / Accent 1 / Accent 2 | Accent 1 |
| Dot size | Dot diameter | 8-20px | 12px |
| Dot position | Dot placement | Overlay / External | External |
Filters
| Setting | Description | Options | Default |
|---|---|---|---|
| Enable filters | Show filter buttons | On / Off | On |
| "All" text | Label for the show-all filter | Free text | "All" |
ℹ️Filters are automatically generated from the tags set in each Gallery Image block. If no block has a tag, the filters are not displayed. A tag can contain multiple values separated by commas.
Available Blocks
Heading Block (limit 1)
Section title, displayed above the gallery and filters.
Gallery Image Block
Each image is an individual block. Maximum 30 images.
| Field | Description |
|---|---|
| Image | Image to display |
| Video | Video alternative to the image |
| Tags | Tags for filtering (comma-separated) |
| Caption | Text displayed on hover or below the image |
| Link | Destination URL on click |
| Collage size | Size in Collage mode (Small / Medium / Large) |
Use Cases
Portfolio / Lookbook
- Masonry layout for images of varying heights
- 12-20 images
- Tags by collection or season
- Lift hover effect for an elegant look
- Border radius at 12px
Instagram Feed
- Instagram preset: 6-column grid, 5px gap, 0 radius
- Title: "@yourbrand"
- Square images
- Zoom hover effect at 110%
- Links to Instagram posts or products
Product Showcase
- Slider layout with autoplay
- 6-8 product images
- Links to product pages
- External navigation for a professional look
- 3 desktop slides, 1 mobile
Event Page
- Grid layout with 3 columns
- Tags: "Day 1", "Day 2", "Backstage"
- Active filters to navigate by day
- Captions with moment descriptions
💡For an Instagram feed look, use the dedicated preset: 6 columns, 5px gap, and no border radius. Add 12 square images to fill 2 clean rows.
⚠️In Masonry mode, the number of desktop columns also applies to the calculation. If you have few images (fewer than 6), reduce the number of columns to avoid visual gaps.