Section avec une image centrale entouree de points forts (features). 4 layouts disponibles dont le mode radial unique avec positionnement circulaire.
Image Features
La section Image Features met en valeur une image centrale entouree de points forts (features) avec icônes. Idéale pour presenter les avantages d'un produit, les valeurs de votre marque ou les caracteristiques d'un service.
4 layouts
| Layout | Description | Idéal pour |
|---|---|---|
| Radial | Features disposees en cercle autour de l'image | Produit hero, "pourquoi nous choisir" |
| Left | Image à gauche, features en colonne à droite | Présentation produit classique |
| Right | Image à droite, features en colonne à gauche | Variante de la présentation produit |
| Grid | Image en haut, features en grille en dessous | Nombreuses features, vue d'ensemble |
ℹ️Le layout Radial est le plus visuellement impactant et un élément distinctif de Scale Theme. Les features se positionnent automatiquement autour de l'image selon leur nombre, ou peuvent être placées manuellement sur des positions "horloge" (1h a 12h).
Settings principaux
Layout et espacement
| Setting | Description | Options | Défaut |
|---|---|---|---|
| Layout | Disposition des features | Radial / Left / Right / Grid | Radial |
| Layout mobile | Disposition sur mobile | Stack / Grid | Stack |
| Distance des features | Eloignement par rapport à l'image (mode Radial) | Close / Far | Close |
Image
| Setting | Description | Options | Défaut |
|---|---|---|---|
| Image | Image centrale | Image picker | - |
| Taille image | Dimensions de l'image | Small / Medium / Large | Medium |
| Forme image | Forme du conteneur | Square / Rounded / Circle | Circle |
| Ombre image | Ombre portee | None / Soft / Strong | Soft |
Badge
| Setting | Description | Options | Défaut |
|---|---|---|---|
| Texte badge | Texte affiché dans le badge | Texte libre | - |
| Position badge | Coin du badge | Top-left / Top-right / Bottom-left / Bottom-right | Top-right |
| Style badge | Apparence du badge | Accent 1 / Accent 2 / Dark | Accent 1 |
Connections (mode Radial)
| Setting | Description | Options | Défaut |
|---|---|---|---|
| Afficher les connections | Lignes entre l'image et les features | On / Off | Off |
| Style connection | Type de ligne | Line / Dashed / Dotted | Dashed |
| Couleur connection | Couleur des lignes | Accent 1 / Accent 2 / Foreground | Accent 1 |
Icônes
| Setting | Description | Options | Défaut |
|---|---|---|---|
| Taille icône | Dimensions de l'icône | Small / Medium / Large | Medium |
| Style icône | Apparence du fond | Plain / Circle / Circle Outline | Circle |
| Position icône | Placement de l'icône | Left / Top | Left |
Blocs disponibles
Bloc Heading (limité 1)
| Champ | Description |
|---|---|
| Sous-titre | Texte au-dessus du titre |
| Titre | Titre principal de la section |
| Niveau de titre | H1 / H2 / H3 / H4 |
| Taille titre | Echelle en pourcentage (50-200%) |
Bloc Text (limité 1)
| Champ | Description |
|---|---|
| Description | Paragraphe rich text sous le titre |
Bloc Feature Item
Chaque feature est un bloc individuel. Jusqu'a 12 features maximum.
| Champ | Description |
|---|---|
| Icône | Icône Material Design parmi la bibliotheque |
| Icône personnalisée | Image pour remplacer l'icône |
| Titre | Nom de la feature |
| Description | Texte descriptif court |
| Position | Position "horloge" (1-12) ou Auto (mode Radial uniquement) |
| Couleur icône | Accent 1 / Accent 2 / Foreground / Custom |
| Couleur custom | Couleur HEX personnalisée |
Cas d'utilisation
"Pourquoi nous choisir"
- Layout Radial avec image produit au centre
- 4-6 features : Livraison, Qualite, Eco, Retours, Support, Garantie
- Forme image Circle avec ombre Soft
- Icônes en style Circle avec Accent 1
Avantages produit
- Layout Left ou Right
- Image du produit en situation
- 3-4 features clés du produit
- Position icône Left pour un look liste
Vue d'ensemble des services
- Layout Grid
- Image de marque en haut
- 4-8 features en grille
- Layout mobile Grid (2 colonnes)
💡En mode Radial, laissez la position des features sur Auto -- le système les repartit automatiquement de manière equilibree. N'utilisez le positionnement manuel (1-12h) que si vous voulez un contrôle précis sur la disposition.
⚠️La section supporte un maximum de 12 blocs Feature Item. Au-dela de 6-8 features, le layout Radial peut devenir encombré. Privilégiez le layout Grid pour un nombre élevé de features.
Prochaines étapes
- Image avec texte — Autre format image + contenu
- Grille — Disposition en grille multi-colonnes
- Tableau comparatif — Comparez des caractéristiques
- Image hotspot — Points interactifs sur une image