Réglages du theme
Les sept groupes de réglages qui pilotent couleurs, polices, boutons, formulaires, header, footer et espacements sur tout le site.
Mis à jour le 23 août 2026 · 5 min de lecture · S'applique à partir de la version 1.0.0
Ouvrez Paramètres → Contenu → Thèmes → Mistral Pro → Modifier les paramètres du thème, ou cliquez sur l'icône pinceau dans n'importe quel éditeur de page. Chaque valeur définie ici devient une variable CSS utilisée par tous les templates et tous les modules : vous la changez une fois, tout le site suit.
1. Colors (Couleurs)
| Réglage | Ce qu'il pilote |
|---|---|
| Primary color | L'accent utilisé par les boutons principaux, les liens, les entrées de menu actives, les surtitres et les mises en valeur. Hérite de la couleur principale de votre kit de marque tant que vous ne la changez pas. |
| Secondary color | Le presque-noir des boutons secondaires et des sections les plus sombres. |
| Accent shades | Survol et pression du bouton principal, une teinte douce (lavis et tuiles d'icônes), une variante plus claire pour les fonds sombres, et une teinte d'ambiance. |
| Text colors | Titres, texte courant, texte secondaire, la continuation atténuée des titres bicolores, les libellés en capitales et placeholders, et le texte sur fond sombre. |
| Surfaces and borders | Fond de page, fond des panneaux discrets, fond des emplacements d'image, deux fonds de panneaux sombres, le filet fin et le séparateur secondaire. |
| Status colors | Succès et erreur, utilisés par les messages des formulaires. |
2. Typography (Typographie)
- Body font et Heading font — les deux polices utilisées par tout le theme. Les Google Fonts sont prises en charge via le sélecteur de polices de HubSpot ; la démo utilise Onest.
- Headings (h1–h6) — taille, couleur et graisse par niveau. Chaque niveau hérite de la police de titre et de la couleur des titres tant que vous ne le modifiez pas.
- Display sizes — les deux tailles surdimensionnées utilisées par les heros et les grands titres (88 px et 60 px par défaut), la taille des chiffres clés (64 px) et l'échelle mobile appliquée aux grands titres (70 %).
- Links — couleur des liens, couleur au survol, et soulignement « Always » (toujours, par défaut), « On hover only » (au survol seulement) ou « Never » (jamais).
3. Buttons (Boutons)
- Police des boutons, rayon des coins (999 = pilule, valeur par défaut), élévation au survol, et une ombre optionnelle sous le bouton secondaire.
- Cinq variantes, chacune avec ses couleurs : Primary (pilule accentuée, l'appel à l'action principal), Secondary (pilule sombre), Outline (contour, avec sa largeur de bordure), Ghost (fantôme) et Inverted (inversé, pour les fonds sombres).
Chaque bouton du theme — dans les modules, dans le header, dans les formulaires — utilise l'une de ces cinq variantes. Voir le standard de bouton dans Construire des pages.
4. Forms (Formulaires)
S'applique à tous les formulaires HubSpot intégrés, qu'ils soient construits avec l'éditeur classique ou le nouvel éditeur de formulaires :
- Fond, bordure, rayon des coins et police de la carte du formulaire.
- Labels and help text — couleur des libellés, du texte d'aide, du marqueur de champ obligatoire.
- Fields — fond, bordure et épaisseur de bordure, rayon des coins, texte, placeholder, anneau de focus, couleur d'erreur.
- Submit button — couleurs, couleurs au survol, et « Full width submit button » (bouton pleine largeur, activé par défaut).
5. Header (En-tête)
- Logo (hérite de votre kit de marque) et un logo pour fonds sombres optionnel, utilisé quand le header est transparent au-dessus d'un hero sombre.
- Hauteur du logo (28 px) et hauteur du header (76 px).
- Fond, flou verre dépoli (activé), bordure inférieure.
- Police du menu, couleur du texte du menu, couleur au survol/actif, couleur du soulignement de l'entrée active.
- Sticky header (header fixe, activé) et Transparent over dark hero sections (transparent au-dessus des heros sombres, activé).
- Top bar (barre supérieure) — afficher ou masquer, couleur de fond et de texte. Son contenu (coordonnées, liens secondaires, sélecteur de langue) se modifie dans le module header lui-même. Voir Navigation et menus.
6. Footer (Pied de page)
Logo du footer et sa hauteur, fond, police, couleurs du texte / des titres de colonnes / des liens au survol / des séparateurs, couleurs des boutons sociaux, et le wordmark géant (désactivé par défaut) avec sa couleur.
7. Layout and spacing (Mise en page et espacements)
| Réglage | Valeur par défaut |
|---|---|
| Largeur du contenu / largeur du contenu large | 1240 px / 1400 px |
| Marge latérale | Normal (Compact, Normal, Wide) |
| Espacement vertical par défaut entre les sections | Medium (Small, Medium, Large) — chaque module peut le surcharger dans son groupe de style Spacing |
| Rayon des coins | Cinq paliers : petit (étiquettes), moyen (champs, tuiles d'icônes, avatars), grand (cartes), très grand (médias), coques de section |
| Ombres des cartes et des médias | Désactivées — le theme est plat par conception ; activez-les ici pour obtenir des ombres sur les cartes et les médias partout |
| Motion and animations | Activé — un seul interrupteur qui coupe toutes les animations du theme (compteurs, défilement des logos, orbites, apparition au défilement, mises en avant automatiques). La préférence « réduire les animations » du navigateur est toujours respectée, quel que soit ce réglage. |
Comment fonctionne l'héritage
Les couleurs et polices des modules héritent de ces réglages. Quand vous modifiez une couleur dans l'onglet Style d'un module, vous surchargez la valeur du theme pour ce module seulement ; le reste du site continue de suivre les réglages du theme. Pour revenir à la valeur héritée, réinitialisez le champ dans le module.