Configurez la largeur de page, les containers et les paddings globaux de Scale Theme pour adapter la mise en page à votre contenu.
Layout et espacement
Les réglages de layout controlent la structure globale de votre boutique : la largeur maximale du contenu, le pourcentage de l'écran utilise, et les marges laterales. Ces réglages affectent toutes les pages et toutes les sections de votre theme (sauf celles qui forcent leur propre largeur).
Largeur de page (page width)
La largeur de page définit la largeur maximale en pixels que votre contenu peut occuper. C'est la contrainte supérieure : le contenu ne depassera jamais cette largeur, même sur un écran ultra-large.
| Réglage | Range | Défaut |
|---|---|---|
| Page width | 1000-2000px (pas de 50) | 1200px |
| Largeur | Idéal pour |
|---|---|
| 1000px | Contenu éditorial, blog, boutiques avec peu de produits, texte-first |
| 1200px (défaut) | La majorité des boutiques, bon équilibré général |
| 1400px | Contenu visuel fort, grilles de 4+ colonnes, images de haute qualité |
| 1600px | Boutiques très visuelles, portfolios, lookbooks, grands écrans |
Largeur en pourcentage (page width %)
La largeur en pourcentage définit quelle proportion de la fenêtre est utilisée pour le contenu. Ce réglage travaille en combinaison avec la largeur de page en pixels.
| Réglage | Range | Défaut |
|---|---|---|
| Page width % | 70-95% (pas de 5) | 85% |
Comment les deux réglages interagissent
La largeur effective du contenu est calculee ainsi :
Largeur effective = min(page_width_px, viewport_largeur × page_width_pourcentage)Exemples concrets avec les valeurs par défaut (1200px / 85%) :
| Taille écran | Calcul | Largeur effective |
|---|---|---|
| 1920px (desktop large) | min(1200, 1920 x 0.85 = 1632) | 1200px (plafond atteint) |
| 1440px (laptop) | min(1200, 1440 x 0.85 = 1224) | 1200px (plafond atteint) |
| 1366px (laptop petit) | min(1200, 1366 x 0.85 = 1161) | 1161px (pourcentage limité) |
| Pourcentage | Effet | Quand l'utiliser |
|---|---|---|
| 70% | Contenu flottant au milieu, grandes marges | Design ultra-épuré, luxe, espace vide intentionnel |
| 85% (défaut) | Bonne proportion, marges raisonnables | La plupart des cas |
| 95% | Presque pleine largeur, fines marges | Catalogues denses, maximiser l'espace |
Padding latéral (marges)
Le padding latéral est l'espacement entre le bord de l'écran et le contenu. Il se configure séparément pour mobile et desktop.
| Réglage | Range | Défaut | Description |
|---|---|---|---|
| Padding mobile | 0-60px (pas de 4) | 24px | Marge latérale sur les écrans < 750px |
| Padding desktop | 0-120px (pas de 4) | 32px | Marge latérale sur les écrans >= 750px |
Containers dans les sections
Independamment des réglages globaux, chaque section peut choisir son propre type de container via le réglage "Largeur" dans ses paramètres. Cela permet de mixer des sections de différentes largeurs sur la même page.
| Container | Largeur | Quand l'utiliser |
|---|---|---|
| Narrow | ~800px | Sections texte, formulaires, FAQ, contenu a lire attentivement |
| Normal | = page width | La majorité des sections : grilles, features, reviews |
| Full Padded | 100% avec padding | Bannieres, sections hero avec texte, impact avec marge minimale |
| Full | 100% sans padding | Images/videos pleine largeur, sliders, séparateurs visuels |
Impact sur les grilles de produits
La largeur de page à un impact direct sur la taille des cartes produit dans les grilles :
| Largeur | 3 colonnes | 4 colonnes | 5 colonnes |
|---|---|---|---|
| 1000px | ~310px/carte | ~230px/carte | ~180px/carte |
| 1200px | ~380px/carte | ~280px/carte | ~220px/carte |
| 1400px | ~440px/carte | ~330px/carte | ~260px/carte |
| 1600px | ~510px/carte | ~380px/carte | ~300px/carte |
Configurations recommandées par type de boutique
Boutique minimaliste / éditorial
| Réglage | Valeur |
|---|---|
| Largeur de page | 1000px |
| Pourcentage | 80% |
| Padding mobile | 24px |
| Padding desktop | 48px |
Boutique e-commerce standard
| Réglage | Valeur |
|---|---|
| Largeur de page | 1200px |
| Pourcentage | 85% |
| Padding mobile | 24px |
| Padding desktop | 32px |
Boutique mode / lifestyle
| Réglage | Valeur |
|---|---|
| Largeur de page | 1400px |
| Pourcentage | 90% |
| Padding mobile | 16px |
| Padding desktop | 32px |
Boutique a gros catalogue
| Réglage | Valeur |
|---|---|
| Largeur de page | 1600px |
| Pourcentage | 95% |
| Padding mobile | 16px |
| Padding desktop | 24px |
Récapitulatif des réglages
| Réglage | Type | Range | Défaut | Impact |
|---|---|---|---|---|
| Page width | Range | 1000-2000px | 1200px | Largeur max du contenu |
| Page width % | Range | 70-95% | 85% | Proportion de l'écran |
| Padding mobile | Range | 0-60px | 24px | Marge latérale mobile |
| Padding desktop | Range | 0-120px | 32px | Marge latérale desktop |
Prochaines étapes
- Couleurs — Palettes et schémas de couleurs
- Typography — Polices et tailles de texte
- Configuration initiale — Guide de configuration complet
- Animations — Effets visuels et transitions