Grille flexible de type bento avec 8 types de blocs différents. Idéal pour des sections "features", "stats", mosaiques d'images ou showcases produit.
Grid / Bento
La section Grid est une grille flexible de type "bento" qui permet de mixer différents types de contenu dans une mise en page structurée. Avec 8 types de blocs et 6 presets, elle s'adapte à une grande variété de cas d'utilisation.
6 presets
| Preset | Description | Blocs utilises |
|---|---|---|
| Features | Grille de fonctionnalités avec icônes | Grid Feature |
| Bento | Layout bento mixte avec images, stats et CTA | Grid Image + Feature + Stat + CTA |
| Stats | Chiffres clés en grille plate | Grid Stat |
| Mosaic | Mosaique d'images avec tailles variees | Grid Image |
| Video Showcase | Grille de videos | Grid Video |
| Product Highlights | Vitrine de produits | Grid Product |
Settings principaux
Layout
| Setting | Description | Options | Défaut |
|---|---|---|---|
| Colonnes desktop | Nombre de colonnes | 2-6 | 3 |
| Colonnes mobile | Colonnes sur mobile (mode grid) | 1 / 2 | 1 |
| Gap | Espacement entre les cartes | 0-60px | 20px |
Style des cartes
| Setting | Description | Options | Défaut |
|---|---|---|---|
| Style carte | Apparence des cartes | Flat / Elevated / Outlined / Glass | Elevated |
| Border radius | Arrondi des coins | 0-32px | 12px |
| Padding | Espacement interne | 0-48px | 24px |
Effets de hover
| Setting | Description | Options | Défaut |
|---|---|---|---|
| Effet hover | Animation au survol | None / Lift / Zoom / Border / Glow / Tilt | Lift |
| Intensité hover | Force de l'effet | 100-120% | 106% |
| Bordure hover | Bordure colorée au survol | On / Off | Off |
| Glow | Effet de lueur autour des cartes | On / Off | Off |
| Couleur glow | Couleur de la lueur | Accent 1 / Accent 2 | Accent 1 |
| Intensité glow | Force de l'effet glow | Subtle / Medium / Strong | Medium |
Mobile
| Setting | Description | Options | Défaut |
|---|---|---|---|
| Comportement mobile | Affichage sur mobile | Grid / Slider | Grid |
| Slides mobile | Nombre de slides visibles | 1-3 (par pas de 0.1) | 1.2 |
| Navigation slider | Flèches de navigation | On / Off | Off |
| Pagination slider | Dots de pagination | On / Off | On |
Blocs disponibles
Bloc Heading (limité 1)
Titre de la section avec sous-titre, style bold text et niveau de titre configurables.
8 types de blocs contenu
| Bloc | Description | Contenu |
|---|---|---|
| Grid Feature | Carte feature avec icône | Icône + Titre + Description |
| Grid Image | Carte image | Image + Titre overlay + Lien |
| Grid Stat | Chiffre clé | Valeur statistique + Label |
| Grid CTA | Call-to-action | Titre + Description + Bouton |
| Grid Quote | Citation | Texte + Auteur + Avatar |
| Grid Video | Video intégrée | Video YouTube/Vimeo + Titre |
| Grid Product | Carte produit | Produit Shopify + Prix + Vendor |
| Grid Collection | Carte collection | Collection + Image + Nombre de produits |
Tailles de blocs
Chaque bloc peut être redimensionne pour créer des layouts asymetriques de type bento :
| Taille | Colonnes occupees | Idéal pour |
|---|---|---|
| Normal | 1 colonne | Contenu standard |
| Wide | 2 colonnes | CTA, images panoramiques |
| Large | 2 colonnes + 2 rangees | Images hero, contenu principal |
ℹ️Les tailles Wide et Large permettent de créer des layouts bento asymetriques. Un bloc "Large" occupe 2x2 dans la grille, dominant visuellement les blocs "Normal" autour de lui.
Cas d'utilisation
Section "Pourquoi nous choisir"
- Preset Features avec 3 colonnes
- 3-6 blocs Grid Feature avec icônes
- Style Elevated pour des cartes modernes
- Effet hover Lift
Layout Bento créatif
- Preset Bento avec 4 colonnes
- Mix de blocs : 1 Image Large + 1 Feature Normal + 1 Stat Normal + 1 CTA Wide
- Style Elevated, gap 16px
- Effet hover Lift
Chiffres clés
- Preset Stats avec 4 colonnes
- 4 blocs Grid Stat
- Style Flat (pas de carte visible)
- Pas d'effet hover pour un rendu sobre
Mosaique d'images
- Preset Mosaic avec 4 colonnes
- Mix de tailles : Large, Normal, Wide
- Effet hover Zoom
- Border radius 8px, gap 12px
Showcase video
- Preset Video Showcase avec 3 colonnes
- 1 video Large + 2 videos Normal
- Style Elevated avec border radius 12px
- Liens YouTube ou Vimeo
Vitrine produit
- Preset Product Highlights avec 4 colonnes
- 4 blocs Grid Product
- Afficher prix et vendor
- Lien vers la page produit
💡Le style Glass donne un effet de verre depoli (glassmorphism) tres tendance. Il fonctionne particulièrement bien avec une palette de couleurs sombre ou une image de fond de section.
⚠️Le mode slider mobile est recommande quand vous avez plus de 4 blocs : cela evite une longue colonne sur mobile. Réglez les slides mobile a 1.2 pour montrer un apercu de la carte suivante et inciter au swipe.
Prochaines étapes
- Galerie — Galerie avec filtres et lightbox
- Image avec texte — Alternative pour 1-2 images
- Carrousel — Affichez le contenu en slider
- Vitrine catégories — Grille spécifique aux catégories