Section creative avec un grand titre et des images decoratives dispersées autour. Effet parallaxe optionnel pour un rendu éditorial premium.
Image Scatter
La section Image Scatter affiche un grand titre typographique au centre avec des images décoratives dispersées autour de manière créative. Chaque image est positionnée, dimensionnée et orientée individuellement. C'est une section de type éditorial, idéale pour les pages de marque, les lookbooks et les announcements créatifs.
3 presets
| Preset | Description | Style |
|---|---|---|
| Éditorial | Grand titre en gras avec images dynamiques | Bold, majuscules, overlay sombre |
| Lookbook | Titre élégant avec images en portrait | Light, mixte casse, images portrait |
| Minimal | Titre épuré avec peu d'images | 2 images seulement, pas d'overlay |
Settings principaux
Titre
| Setting | Description | Options | Défaut |
|---|---|---|---|
| Heading | Texte du titre (rich text) | Texte libre, gras pour l'accent | "Make a statement" |
| Taille titre | Niveau de titre | H1 / H2 / H3 | H1 |
| Echelle titre | Facteur de taille supplémentaire | 100-300% | 150% |
| Graisse texte | Epaisseur de la police | Light (300) / Regular (400) / Bold (700) / Black (900) | Bold (700) |
| Transformation | Casse du texte | None / Uppercase / Lowercase | Uppercase |
Texte en gras (Bold Text)
Le texte mis en gras dans le titre peut recevoir un traitement visuel special :
| Setting | Description | Options | Défaut |
|---|---|---|---|
| Style bold | Traitement du texte gras | Default / Color / Highlight | Color |
| Couleur bold | Couleur du texte gras (mode Color/Highlight) | Accent 1 / Accent 2 / Text | Accent 1 |
| Fond highlight | Couleur du fond (mode Highlight) | Accent 1 / Accent 2 / Text | Accent 1 |
| Texte highlight | Couleur du texte sur fond (mode Highlight) | Background / Text | Background |
💡Utilisez la balise gras dans votre titre pour créer un accent visuel fort. Par exemple, "Explore the Collection" affichera "Collection" dans la couleur d'accent choisie.
Conteneur
| Setting | Description | Options | Défaut |
|---|---|---|---|
| Hauteur desktop | Hauteur de la zone scatter | 400-1000px | 600px |
| Hauteur mobile | Hauteur sur mobile | 300-800px | 500px |
Overlay texte
| Setting | Description | Options | Défaut |
|---|---|---|---|
| Opacite overlay | Assombrit les images pour faire ressortir le titre | 0-80% | 0% |
Parallaxe
| Setting | Description | Options | Défaut |
|---|---|---|---|
| Activer parallaxe | Effet de profondeur au scroll | On / Off | On |
| Intensité | Force de l'effet parallaxe | 0-50% | 10% |
Blocs disponibles
Bloc Scatter Image
Chaque image est un bloc individuel positionne manuellement. Maximum 8 images.
| Champ | Description | Plage | Défaut |
|---|---|---|---|
| Image | Image a afficher | Image picker | - |
| Position X | Position horizontale | 0-100% | 50% |
| Position Y | Position verticale | 0-100% | 50% |
| Taille | Taille de l'image (desktop) | 5-60% | 20% |
| Taille mobile | Taille sur mobile | 10-80% | 30% |
| Rotation | Angle d'inclinaison | -30 a 30deg | 0deg |
| Z-index | Ordre d'empilement | 1-10 | 5 |
| Ratio image | Proportions forcees | Adapt / Square / Landscape / Portrait | Adapt |
| Border radius | Arrondi des coins | 0-50% | 0% |
| Overlay image | Opacite individuelle | 0-80% | 0% |
| Visible sur mobile | Afficher sur mobile | On / Off | On |
| Intensité parallaxe | Override de l'intensité parallaxe | 0-100% | 0 (auto) |
Cas d'utilisation
Page de marque / About
- Preset Éditorial avec titre de marque en majuscules
- 4-5 images de produits ou lifestyle
- Parallaxe activée a 15% pour la profondeur
- Overlay texte a 30-40% pour la lisibilité
Annonce de collection
- Preset Lookbook avec nom de collection
- 3 images en ratio Portrait des pièces phares
- Rotation légère (-5 a 5deg) pour un effet magazine
- Pas d'overlay pour des images lumineuses
Section d'accroche minimaliste
- Preset Minimal avec un message court
- 2 images seulement, bien positionnees
- Graisse Light (300) pour un look aerien
- Pas de parallaxe, pas d'overlay
Landing page evenementielle
- Grand titre : "BLACK FRIDAY"
- 5-6 images de produits en promo
- Graisse Black (900) + Uppercase
- Style bold Highlight avec Accent 1
⚠️La section Scatter est positionnée en absolu : les images peuvent se chevaucher volontairement. Testez le rendu sur mobile car les positions relatives changent. Utilisez le setting Visible sur mobile pour masquer les images qui genent la lisibilité sur petit écran.
ℹ️L'effet parallaxe est calcule en fonction du Z-index de chaque image : plus le z-index est élevé, plus l'image bouge rapidement au scroll, créant un effet de profondeur naturel. Vous pouvez aussi overrider l'intensité par image.
Prochaines étapes
- Galerie — Galerie organisée avec filtres
- Grille — Disposition en grille classique
- Animations — Effets d'animation sur les images
- Décoration médias — Décorations visuelles sur les images