SScale Themedocs

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

LayoutDescriptionIdéal pour
RadialFeatures disposees en cercle autour de l'imageProduit hero, "pourquoi nous choisir"
LeftImage à gauche, features en colonne à droitePrésentation produit classique
RightImage à droite, features en colonne à gaucheVariante de la présentation produit
GridImage en haut, features en grille en dessousNombreuses 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

SettingDescriptionOptionsDéfaut
LayoutDisposition des featuresRadial / Left / Right / GridRadial
Layout mobileDisposition sur mobileStack / GridStack
Distance des featuresEloignement par rapport à l'image (mode Radial)Close / FarClose

Image

SettingDescriptionOptionsDéfaut
ImageImage centraleImage picker-
Taille imageDimensions de l'imageSmall / Medium / LargeMedium
Forme imageForme du conteneurSquare / Rounded / CircleCircle
Ombre imageOmbre porteeNone / Soft / StrongSoft

Badge

SettingDescriptionOptionsDéfaut
Texte badgeTexte affiché dans le badgeTexte libre-
Position badgeCoin du badgeTop-left / Top-right / Bottom-left / Bottom-rightTop-right
Style badgeApparence du badgeAccent 1 / Accent 2 / DarkAccent 1

Connections (mode Radial)

SettingDescriptionOptionsDéfaut
Afficher les connectionsLignes entre l'image et les featuresOn / OffOff
Style connectionType de ligneLine / Dashed / DottedDashed
Couleur connectionCouleur des lignesAccent 1 / Accent 2 / ForegroundAccent 1

Icônes

SettingDescriptionOptionsDéfaut
Taille icôneDimensions de l'icôneSmall / Medium / LargeMedium
Style icôneApparence du fondPlain / Circle / Circle OutlineCircle
Position icônePlacement de l'icôneLeft / TopLeft

Blocs disponibles

Bloc Heading (limité 1)

ChampDescription
Sous-titreTexte au-dessus du titre
TitreTitre principal de la section
Niveau de titreH1 / H2 / H3 / H4
Taille titreEchelle en pourcentage (50-200%)

Bloc Text (limité 1)

ChampDescription
DescriptionParagraphe rich text sous le titre

Bloc Feature Item

Chaque feature est un bloc individuel. Jusqu'a 12 features maximum.

ChampDescription
IcôneIcône Material Design parmi la bibliotheque
Icône personnaliséeImage pour remplacer l'icône
TitreNom de la feature
DescriptionTexte descriptif court
PositionPosition "horloge" (1-12) ou Auto (mode Radial uniquement)
Couleur icôneAccent 1 / Accent 2 / Foreground / Custom
Couleur customCouleur 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