Aller au contenu
Mistral Studio

Modules : heros et titres

Les modules qui ouvrent une page ou une section : hero plein écran, titre bicolore, manifeste, en-têtes de service et d'étude de cas, barre de recherche.

Mis à jour le 23 août 2026 · 4 min de lecture · S'applique à partir de la version 1.0.0

Ces six modules ouvrent une page ou introduisent une section. La plupart portent l'unique h1 de la page.

Full screen hero with background video and showreel card

L'ouverture de la page d'accueil : une vidéo, une image ou une couleur unie en fond, derrière un titre, un sous-titre et deux boutons, plus une carte showreel optionnelle qui ouvre une vidéo dans une lightbox avec commandes et son.

  • Content — titre (h1 par défaut), sous-titre, premier et second bouton (libellé, lien, icône, style).
  • Background — Looping video (MP4 depuis votre Gestionnaire de fichiers + une image poster), Image, ou Solid color.
  • Showreel card — MP4, poster, titre de la carte, durée ou légende. Sans vidéo, la carte n'est pas affichée.
  • Style — texte à gauche ou centré, trois tailles de titre, un style par bouton, texte clair ou sombre, couleur de voile avec voiles diagonal et inférieur, et Viewport fit : plein écran, plein écran moins le bandeau de logos (quand le défilement de logos clients suit immédiatement), ou à la hauteur de son contenu.
  • Overlap the header (activé par défaut) — laisse le header transparent se superposer au hero. Désactivez-le si vous désactivez le réglage Transparent over dark hero sections du header.

La mise en place de la vidéo et du showreel est détaillée dans Vidéo.

Two-tone section heading with eyebrow

Le titre signature du theme : un surtitre court, une accroche forte suivie d'une continuation atténuée, une description optionnelle et un bouton optionnel.

  • End with an accent full stop ajoute le point coloré à la fin du titre.
  • Balise h1 / h2 / h3 / paragraphe, choisie indépendamment de la taille visuelle (Display, Extra large, Large, Medium).
  • Dispositions : empilée, titre à gauche avec le bouton à droite, ou surtitre dans une colonne latérale. Largeur : largeur du contenu, large, ou héritée de la colonne parente. Largeurs de lecture du titre et de la description (étroite, confortable, pleine largeur). Ton clair ou sombre.

Utilisez-le au-dessus de tout module dont l'interrupteur Show section heading est désactivé.

Manifesto statement with side label and buttons

Une déclaration d'ouverture pour le haut d'une page, juste sous un hero : un libellé court dans une colonne latérale, une phrase bicolore, un paragraphe de soutien et jusqu'à deux boutons. Les jeux de couleurs incluent un panneau sombre ; Reduce the bottom padding le resserre contre le module suivant (la section « Agency statement with key figures » l'utilise ainsi).

Service header with icon and badge

Le bloc d'ouverture d'une page de détail de service : un lien retour, une tuile d'icône avec un badge, le titre de la page (h1), une courte introduction et jusqu'à deux boutons. Dix-huit icônes au choix (boussole, personnes, tendance, recherche, écran, cible, globe, mégaphone, couches, étincelles, récompense, bâtiment, e-mail, repère, téléphone, étoile, lecture, coche). Largeur du bloc étroite (environ 860 px) ou pleine largeur du conteneur, aligné à gauche ou centré.

Case study header with key facts

Le bloc d'ouverture d'une étude de cas : un lien retour, deux badges (expertise et secteur), le titre, un résumé court et une rangée de faits clés (libellé + valeur, par exemple Client, Année, Périmètre) séparés par un filet dont vous choisissez le style (trait de deux pixels, filet fin, aucun).

Search bar with quick suggestions

L'en-tête de la page de résultats de recherche. Son titre est construit à partir du terme présent dans l'URL ; un champ de recherche en pilule envoie vers la page de résultats ; des puces de suggestions proposent des termes ; un message s'affiche tant qu'aucun terme n'a été saisi.

  • Search behavior — chemin de la page de résultats (/hs-search-results par défaut), conserver les suggestions après une recherche, et les types de contenus à chercher : pages de site, landing pages, articles de blog, articles de base de connaissances.
  • Les libellés visibles et ceux destinés aux lecteurs d'écran, y compris les phrases de décompte des résultats, sont modifiables.

Il est déjà placé dans le template système Search results. Voir Pages système.

Voir aussi