Construire des pages
Templates, sections et modules dans l'éditeur de page, et les conventions communes à tous les modules Mistral Pro.
Mis à jour le 23 août 2026 · 6 min de lecture · S'applique à partir de la version 1.0.0
Une page Mistral Pro, c'est un template (la mise en page de départ) rempli de modules (les briques), éventuellement déposés sous forme de sections prêtes à l'emploi. Cet article présente les trois, puis les conventions que vous retrouverez dans chaque module.
Trois façons de commencer
1. Choisir un template. Contenu → Pages de site web → Créer → choisissez l'un des 14 templates Mistral Pro. Chacun s'ouvre avec un contenu de démonstration réaliste que vous remplacez directement. Vous pouvez changer le template d'une page plus tard depuis Paramètres → Modèle dans l'éditeur de page. Voir Templates.
2. Déposer une section. Dans l'éditeur de page, ouvrez le panneau « Add section » (Ajouter une section) : les sept sections pré-composées de Mistral Pro y figurent avec un aperçu. Déposez-en une et modifiez-la sur place.
| Section | Modules qu'elle contient |
|---|---|
| Opening hero with client logos | Hero plein écran + défilement de logos clients |
| Agency statement with key figures | Déclaration manifeste + chiffres clés à compteurs animés |
| Expertise showcase with heading | Titre de section bicolore + grille de services |
| Method steps with frequently asked questions | Étapes de méthode sur panneau sombre + accordéon FAQ |
| Case study proof with customer quote | Grille d'études de cas (disposition « preuve ») + bannière témoignage |
| Latest articles with closing call to action | Grille des derniers articles + appel à l'action sombre |
| Contact details with newsletter band | Coordonnées avec formulaire intégré + bandeau d'inscription newsletter |
3. Ajouter un module. Les modules du theme apparaissent dans la liste des modules de l'éditeur, chacun avec son icône et une description de son usage. Ils fonctionnent dans une rangée pleine largeur, dans une colonne et dans une zone de glisser-déposer. Leurs couleurs et polices héritent des réglages du theme tant que vous ne les surchargez pas sur le module.
Colonnes et grille à 12 colonnes
Vous pouvez diviser n'importe quelle rangée en colonnes dans l'éditeur de page : le theme embarque la CSS qui fait fonctionner la grille à 12 colonnes de HubSpot dans les templates codés, si bien qu'une répartition deux tiers / un tiers s'affiche comme prévu. Des éléments comme Single headline figure (chiffre seul), Rounded image card (carte image) et Call to action button (bouton) sont conçus pour se placer dans une colonne à côté d'un autre contenu.
Conventions communes à tous les modules
Chaque module Mistral Pro est organisé de la même façon : quand vous en connaissez un, vous les connaissez tous.
L'onglet Contenu
- Display (Affichage) — toujours en premier. Un interrupteur par élément optionnel (Show eyebrow, Show description, Show button, Show section heading…). Désactiver un élément masque ses champs.
- Content (Contenu) — les textes, images, liens et éléments répétés.
- Des groupes spécifiques quand le module en a besoin : Behavior (rotation automatique, délais, accordéon à une seule réponse ouverte), Source (quel blog, quels articles), Labels ou Accessibility labels (libellés pour lecteurs d'écran, « Previous / Next », suffixe du temps de lecture, format de date).
L'onglet Style
Des sous-groupes, toujours dans le même ordre quand ils existent : Presets (disposition, jeu de couleurs, taille du titre, style du surtitre), Text, Background, Border, Hover, Corner radius, Spacing (le rembourrage de la section : Small / Medium / Large, parfois None (inside another section)), Alignment, Advanced.
Le groupe Advanced
En bas de l'onglet Contenu : Anchor ID (pour pointer vers la section depuis un menu, par exemple #contact) et Additional CSS classes (classes CSS supplémentaires).
Champs récurrents
| Champ | Ce qu'il fait |
|---|---|
| Heading — strong part / muted continuation | Le titre bicolore signature du theme : une accroche forte suivie d'une continuation grisée. Laissez la continuation vide pour un titre simple. La couleur de la continuation peut passer à l'accent dans le groupe de style Text. |
| Heading tag (SEO) | Le niveau HTML du titre (h1, h2, h3, parfois Paragraph). Gardez exactement un seul h1 par page — le hero ou l'en-tête de page — et utilisez h2 pour les sections en dessous. La taille visuelle se choisit séparément dans Presets → Heading size. |
| Eyebrow (surtitre) | Le petit libellé au-dessus d'un titre. Eyebrow style : pilule contourée, libellé en capitales ou texte accentué. |
| Color scheme | Le fond de la section : fond de page, lavis discret, lavis accentué, panneau sombre, secondaire (presque noir)… La liste dépend du module. |
| Section padding | Surcharge l'espacement vertical par défaut du theme pour ce module. |
Le standard de bouton
Tous les boutons du theme sont construits de la même façon :
- un libellé et un lien (page, URL, e-mail, fichier… avec les options ouvrir dans un nouvel onglet et no follow),
- une icône optionnelle (flèche en haut à droite, flèche à droite, e-mail, téléphone, lecture… la liste dépend du module) placée avant ou après le libellé,
- un style parmi les cinq variantes du theme (primary, secondary, outline, ghost, inverted) — réglé par module dans le groupe Presets ou choisi pour vous par le module,
- une taille (petit, moyen, grand) sur le module autonome Call to action button.
Les couleurs des boutons viennent toujours des réglages Buttons du theme.
Éléments répétés
Les listes — services, membres de l'équipe, études de cas, questions, étapes, logos, chiffres — sont des groupes répétés : ajoutez, supprimez, réordonnez et repliez les éléments dans l'éditeur. Chaque groupe répété a un nombre maximal d'éléments fixé par le module.
Animations
Plusieurs modules bougent d'eux-mêmes : les chiffres clés s'incrémentent, les logos clients défilent, la rangée d'équipe tourne, le tableau de méthode avance, la mise en avant des études de cas se déplace, l'orbite technologique tourne. Chacun a son propre interrupteur dans son groupe Behavior, et tous obéissent au réglage global Motion and animations du theme ainsi qu'à la préférence « réduire les animations » du visiteur.