Section galerie avec filtres par tags, 4 modes de layout (Grid, Slider, Masonry, Collage) et effets de hover configurables.
Gallery
La section Gallery affiche une collection d'images avec un système de filtres par tags. 4 modes de layout permettent d'adapter la présentation à tout type de contenu : portfolio, feed Instagram, lookbook ou vitrine produit.
4 layouts
| Layout | Description | Idéal pour |
|---|---|---|
| Grid | Grille régulière avec colonnes configurables | Portfolios, vitrines, feeds |
| Slider | Defilement horizontal avec navigation | Espaces réduits, mise en avant |
| Masonry | Disposition en colonnes style Pinterest | Images de hauteurs variees |
| Collage | Disposition libre avec tailles variables par image | Mises en scène créatives |
3 presets
| Preset | Description |
|---|---|
| Gallery | Grid classique 3 colonnes avec filtres |
| Slider | Mode slider avec autoplay et effets lift |
| Grid 6 colonnes serrees, style feed social |
Settings principaux
Alignement
| Setting | Description | Options | Défaut |
|---|---|---|---|
| Alignement desktop | Alignement du titre/header | Left / Center / Right | Center |
| Alignement mobile | Alignement mobile | Left / Center / Right | Center |
Layout
| Setting | Description | Options | Défaut |
|---|---|---|---|
| Mode layout | Type d'affichage | Grid / Slider / Masonry / Collage | Grid |
| Gap | Espacement entre images | 0-80px | 20px |
| Border radius | Arrondi des coins | 0-50px | 8px |
Effets de hover
| Setting | Description | Options | Défaut |
|---|---|---|---|
| Effet hover | Animation au survol | None / Zoom / Fade / Lift / Tilt | Zoom |
| Intensité | Force de l'effet (zoom %) | 100-120% | 106% |
Grid / Masonry / Collage
| Setting | Description | Options | Défaut |
|---|---|---|---|
| Colonnes desktop | Nombre de colonnes | 2-6 | 3 |
| Colonnes tablet | Colonnes sur tablet | 1-4 | 2 |
| Colonnes mobile | Colonnes sur mobile | 1 / 2 | 1 |
Slider
| Setting | Description | Options | Défaut |
|---|---|---|---|
| Slides desktop | Nombre de slides visibles | 2-6 | 3 |
| Slides tablet | Slides sur tablet | 1-4 | 2 |
| Slides mobile | Slides sur mobile | 1 / 2 | 1 |
| Navigation | Afficher les flèches | On / Off | On |
| Pagination | Afficher les dots | On / Off | On |
| Autoplay | Defilement auto | On / Off | Off |
| Vitesse | Durée par slide | 3-10s | 5s |
| Boucle | Retour au debut | On / Off | On |
Style de navigation (Slider)
| Setting | Description | Options | Défaut |
|---|---|---|---|
| Fond navigation | Couleur de fond des flèches | Transparent / Background / Foreground / Accent 1 / Accent 2 | Background |
| Couleur icône | Couleur de la flèche | Foreground / Background / Accent 1 / Accent 2 | Accent 1 |
| Taille icône | Dimensions de l'icône | 16-32px | 20px |
| Position navigation | Placement des flèches | Overlay / External | Overlay |
| Couleur dots | Couleur de la pagination | Foreground / Background / Accent 1 / Accent 2 | Accent 1 |
| Taille dots | Diamètre des dots | 8-20px | 12px |
| Position dots | Placement des dots | Overlay / External | External |
Filtres
| Setting | Description | Options | Défaut |
|---|---|---|---|
| Activer les filtres | Afficher les boutons de filtre | On / Off | On |
| Texte "Tous" | Label du filtre qui affiché tout | Texte libre | "All" |
ℹ️Les filtres sont générés automatiquement à partir des tags renseignes dans chaque bloc Gallery Image. Si aucun bloc n'a de tag, les filtres ne s'affichent pas. Un tag peut contenir plusieurs valeurs séparées par des virgules.
Blocs disponibles
Bloc Heading (limité 1)
Titre de la section, affiché au-dessus de la galerie et des filtres.
Bloc Gallery Image
Chaque image est un bloc individuel. Maximum 30 images.
| Champ | Description |
|---|---|
| Image | Image a afficher |
| Video | Video alternative à l'image |
| Tags | Tags pour le filtrage (séparés par virgule) |
| Legende | Texte affiche au survol ou sous l'image |
| Lien | URL de destination au clic |
| Taille collage | Taille dans le mode Collage (Small / Medium / Large) |
Cas d'utilisation
Portfolio / Lookbook
- Layout Masonry pour des images de tailles variees
- 12-20 images
- Tags par collection ou saison
- Effet hover Lift pour un rendu élégant
- Border radius a 12px
Feed Instagram
- Preset Instagram : Grid 6 colonnes, gap 5px, radius 0
- Titre "@votrebrand"
- Images carrees
- Effet hover Zoom a 110%
- Liens vers les posts Instagram ou produits
Vitrine produit
- Layout Slider avec autoplay
- 6-8 images produit
- Liens vers les pages produit
- Navigation external pour un look pro
- 3 slides desktop, 1 mobile
Page evenementielle
- Layout Grid 3 colonnes
- Tags : "Day 1", "Day 2", "Backstage"
- Filtres actifs pour naviguer par journee
- Legendes avec descriptions des moments
💡Pour un rendu feed Instagram, utilisez le preset dédié : 6 colonnes, gap de 5px et pas de border radius. Ajoutez 12 images carrees pour remplir 2 rangees propres.
⚠️En mode Masonry, le nombre de colonnes desktop s'applique aussi au calcul. Si vous avez peu d'images (moins de 6), reduisez le nombre de colonnes pour éviter des trous visuels.
Prochaines étapes
- **Image Hotspot** — Ajoutez des points interactifs sur vos images pour mettre en avant des produits
- **Before/After** — Créez des comparaisons visuelles avant/après avec un slider
- **Effets de hover** — Découvrez tous les effets de survol disponibles pour enrichir vos galeries
- **Animations** — Animez l'apparition de vos images au scroll avec le système d'animations
- **Image Scatter** — Créez une disposition d'images éclatée et dynamique