Gallery Sections

gallery-masonry

stable Bibliothèque Contenu inline (instance)

Montrer les réalisations

Galerie editoriale en colonnes CSS (masonry naturel) avec legende au hover par overlay. Hauteurs variees, responsive 3 colonnes -> 2 -> 1.

Ouvrir dans le builder

Instances sur le site

Global 0 instance en page composable

Uniquement en bibliothèque (aucune instance en page).

Aperçu

Comment l'utiliser

Intention

Montrer les réalisations

Rôle de page

Corps

Modèle de contenu

Contenu inline (instance)

Contrat de slots

Champ	Nature	Type	Requis	Bilingue	Bornes / valeurs
`background`	Présentation	`enum`	Non	·	paper · paper-2 · paper-3 · ink
`kicker`	Contenu	`text`	Non	fr / en	·
`h2`	Contenu	`text`	Oui	fr / en	·
`intro`	Contenu	`text`	Non	fr / en	·
`items`	Contenu	`array`	Oui	·	3..12

Déclinaisons · 16

Combinaisons nommées « variante × palette × densité » appliquées à ce composant, prévisualisées en rendu isolé. 4 curées, 12 générées.

Galerie mosaïque · papier
curée
gallery-masonry--paper
Galerie mosaïque · papier 2
curée
gallery-masonry--paper-2
Galerie mosaïque · papier 3
curée
gallery-masonry--paper-3
Galerie mosaïque · encre
curée
gallery-masonry--ink
gallery-masonry · grille auto
générée
gallery-masonry--grid-auto
gallery-masonry · mosaïque
générée
gallery-masonry--mosaic
gallery-masonry · masonry
générée
gallery-masonry--masonry
gallery-masonry · matrice 3x3
générée
gallery-masonry--matrix-3x3
gallery-masonry · matrice 4x4
générée
gallery-masonry--matrix-4x4
gallery-masonry · grille uniforme
générée
gallery-masonry--grid-uniform
gallery-masonry · vedette + split
générée
gallery-masonry--featured-split
gallery-masonry · défilement aperçu
générée
gallery-masonry--peek-scroll
gallery-masonry · masonry 3 colonnes
générée
gallery-masonry--masonry-3
gallery-masonry · paire pleine largeur
générée
gallery-masonry--fullbleed-pair
gallery-masonry · pellicule
générée
gallery-masonry--filmstrip
gallery-masonry · chevauchement
générée
gallery-masonry--overlap

Comparer les déclinaisons · 16

Chaque déclinaison, résumée par son écart d'axes face à la démo par défaut du type : seuls les axes qui changent une valeur sont listés. Ouvre-la dans le builder pour l'assembler dans une page.

Galerie mosaïque · papier
curée
gallery-masonry--paper
background:paper
Ouvrir dans le builder
Galerie mosaïque · papier 2
curée
gallery-masonry--paper-2
background:paper-2
Ouvrir dans le builder
Galerie mosaïque · papier 3
curée
gallery-masonry--paper-3
background:paper-3
Ouvrir dans le builder
Galerie mosaïque · encre
curée
gallery-masonry--ink
background:ink
Ouvrir dans le builder
gallery-masonry · grille auto
générée
gallery-masonry--grid-auto
layout:grid-auto
Ouvrir dans le builder
gallery-masonry · mosaïque
générée
gallery-masonry--mosaic
layout:mosaic
Ouvrir dans le builder
gallery-masonry · masonry
générée
gallery-masonry--masonry
layout:masonry
Ouvrir dans le builder
gallery-masonry · matrice 3x3
générée
gallery-masonry--matrix-3x3
layout:matrix-3x3
Ouvrir dans le builder
gallery-masonry · matrice 4x4
générée
gallery-masonry--matrix-4x4
layout:matrix-4x4
Ouvrir dans le builder
gallery-masonry · grille uniforme
générée
gallery-masonry--grid-uniform
layout:grid-uniform
Ouvrir dans le builder
gallery-masonry · vedette + split
générée
gallery-masonry--featured-split
layout:featured-split
Ouvrir dans le builder
gallery-masonry · défilement aperçu
générée
gallery-masonry--peek-scroll
layout:peek-scroll
Ouvrir dans le builder
gallery-masonry · masonry 3 colonnes
générée
gallery-masonry--masonry-3
layout:masonry-3
Ouvrir dans le builder
gallery-masonry · paire pleine largeur
générée
gallery-masonry--fullbleed-pair
layout:fullbleed-pair
Ouvrir dans le builder
gallery-masonry · pellicule
générée
gallery-masonry--filmstrip
layout:filmstrip
Ouvrir dans le builder
gallery-masonry · chevauchement
générée
gallery-masonry--overlap
layout:overlap
Ouvrir dans le builder

Sections liées

Même famille

media-block stable

Bloc média pour intégrer une image, une vidéo ou un contenu embarqué dans une page marketing.

gallery Gallery Sections Plusieurs imagesVidéo1 colonne 16 décl.

site-showcase stable

Vitrine du site livre : captures reelles dans des cadres navigateur, capture pleine page qui defile au survol, lien nofollow vers le site en production.

gallery Gallery Sections Apparition au scrollZoom au survolSurvol +4 16 décl.

Même catégorie

media-block stable

Bloc média pour intégrer une image, une vidéo ou un contenu embarqué dans une page marketing.

gallery Gallery Sections Plusieurs imagesVidéo1 colonne 16 décl.

site-showcase stable

Vitrine du site livre : captures reelles dans des cadres navigateur, capture pleine page qui defile au survol, lien nofollow vers le site en production.

gallery Gallery Sections Apparition au scrollZoom au survolSurvol +4 16 décl.

Similaires

media-bento stable

Bento media asymetrique : tuiles image avec grand titre superpose et zoom au survol (layouts feature-2, quad, mosaic).

scroll-interactive Feature Sections Zoom au survolApparition au scrollSurvol +4 24 décl.

horizontal-showcase stable

Panneaux a defilement horizontal smooth (scroll-snap) avec index numerote cliquable.

scroll-interactive Feature Sections Défilement horizontalApparition au scrollDéfilement +6 16 décl.

hover-reveal-list stable

Liste editoriale qui revele l'image du projet au survol, dans un carre cadre (image qui suit le curseur ou centree).

scroll-interactive Feature Sections Révélation au survolApparition au scrollSurvol +5 17 décl.

author-byline stable

Ligne auteur compacte E-E-A-T sous un h1 d'article : avatar optionnel, nom, rôle, dates de publication et mise à jour, lien vers la page profil. Beaucoup plus léger qu'un hero auteur.

prose Team Sections Apparition au scrollDéfilementImage +2 15 décl.

scroll-gallery stable

Liste sticky a gauche, cadre media a droite dont l'image change en fondu au scroll. Ideal pour presenter des domaines d'expertise avec un visuel par item.

scroll-interactive Feature Sections Média collantFondu enchaînéApparition au scroll +6 17 décl.

related-cards-band stable

Bande de trois cards connexes pour relier cas, offres ou ressources en fin de page.

card-grid Feature Sections Apparition au scrollSurvolDéfilement +2 17 décl.

Code

Données de la section (à placer dans sections[])

{
  "type": "gallery-masonry",
  "kicker_fr": "Galerie · projets recents",
  "kicker_en": "Gallery · recent projects",
  "h2_fr": "Chaque projet, <i>une histoire</i>",
  "h2_en": "Every project, <i>a story</i>",
  "intro_fr": "Un aperçu éditorial des travaux Waimia : stratégie, systèmes IA et identité de marque.",
  "intro_en": "An editorial overview of Waimia work: strategy, AI systems and brand identity.",
  "items": [
    {
      "title_fr": "Système de contenu IA",
      "title_en": "AI Content System",
      "body_fr": "Architecture editoriale pour 40 formats hebdomadaires.",
      "body_en": "Editorial architecture for 40 weekly formats.",
      "tag_fr": "Growth System",
      "tag_en": "Growth System",
      "ratio": "portrait"
    },
    {
      "title_fr": "Audit & activation",
      "title_en": "Audit & activation",
      "body_fr": "Diagnostic complet en 5 jours, 3 workflows déployés.",
      "body_en": "Full diagnostic in 5 days, 3 workflows deployed.",
      "tag_fr": "Activation",
      "tag_en": "Activation",
      "ratio": "landscape"
    },
    {
      "title_fr": "Identite de marque",
      "title_en": "Brand identity",
      "body_fr": "Refonte visuelle et positionnement editorial.",
      "body_en": "Visual rebrand and editorial positioning.",
      "tag_fr": "Design",
      "tag_en": "Design",
      "ratio": "square"
    },
    {
      "title_fr": "Formation équipe",
      "title_en": "Team training",
      "body_fr": "Atelier 1 journee sur les workflows IA internes.",
      "body_en": "1-day workshop on internal AI workflows.",
      "ratio": "wide"
    },
    {
      "title_fr": "Stratégie LinkedIn",
      "title_en": "LinkedIn strategy",
      "body_fr": "6 mois de contenu planifie, +340 % de portee organique.",
      "body_en": "6 months of planned content, +340% organic reach.",
      "tag_fr": "Social",
      "tag_en": "Social",
      "ratio": "portrait"
    },
    {
      "title_fr": "Automatisation ops",
      "title_en": "Ops automation",
      "body_fr": "Pipeline de reporting hebdomadaire entièrement automatisé.",
      "body_en": "Fully automated weekly reporting pipeline.",
      "ratio": "landscape"
    }
  ]
}

Pour un agent / MCP

Détail machine de cette section (intention, rôle, contrat de slots, sections liées).

/library/section/gallery-masonry.json

Chemin du détail machine

/library/section/gallery-masonry.json