Vous êtes ici : accueil » guide » page_d_accueil

Page d’accueil

Ceci est une ancienne révision du document !


Page d’accueil

La page d’accueil affiche une image en pleine largeur, qui remplit l’écran jusqu’aux bords, pour un effet visuel immersif. En raison de la variété de tailles d’écrans et de grosseur de fenêtres, l’image sera assurément rognée.

Images en pleine largeur

Capture d’écran de la page d’accueil, telle qu’elle apparaîtra aux visiteurs

Une seule image en pleine largeur (en fond perdu) sera affichée sur la page d’accueil. Il ne s’agit pas d’un carousel animé, mais bien d’une séquence d’images qui pourront apparaître aux visiteurs au fil de leurs visites successives.

C’est toujours la première image qui sera montrée aux visiteurs lors de leur première visite ; en naviguant sur le site, si le visiteur retourne à la page d’accueil, il/elle verra la prochaine image sélectionnée ; et ainsi de suite.

Capture d’écran annotée du panneau d’édition Prismic, pour les images de la page d’accueil

Chaque « item » du carousel comporte les éléments suivants :

  • Image : c’est l’image qui sera affichée en pleine largeur.
  • Couvrir le fond : par défaut, l’image sera agrandie jusqu’aux bords (fond perdu). Ce comportement engendre un effet de rognure : une partie de l’image sera invisible, selon la taille de la fenêtre ou de l’écran (par exemple, un ratio portrait/vertical sur un appareil portable et un ratio paysage/horizontal sur un écran de bureau). Décocher cette case pour que toute l’image soit toujours visible, au risque de perdre l’effet d’immersion.
  • Lien cliquable : attacher un hyperlien à l’image de fond, par exemple vers la page d’un projet relié à cette image.
  • Centre : valeur de la propriété CSS object-position, pour des usages avancés seulement (center center / 50% 50% par défaut). Cela permet de compenser pour le rognage, notamment pour assurer que la partie supérieure de l’image soit compatible avec le menu en surcouche.

Notes concernant la composition des images

  • Effet de rognage : les images en pleine largeur seront assurément rognées sur certains écrans. À moins de décocher l’option « Couvrir le fond », aucun élément sur les bords ne devrait être considéré comme essentiel.
  • Tiers supérieur clair : il est recommandé d’utiliser des images dont le tiers supérieur est clair (comme le ciel), afin de maintenir la lisibilité des éléments du menu, qui s’affiche en caractères noirs en surcouche.

Blocs de contenu (sous le pli)

Des blocs de contenu peuvent également être ajoutés (mais cela est optionnel). Ils apparaîtront sous le « pli », c’est-à-dire sous l’image en pleine largeur, en faisant défiler la page avec la souris. L’édition de chaque bloc suit le fonctionnement habituel pour l’ensemble du site.

Capture d’écran annotée du panneau d’édition Prismic pour la page d’accueil, en désignant la zone d’ajout de blocs de contenus (« slices »).

Métadonnées et SEO

Comme pour chaque page, l’onglet Métadonnées et SEO permet de saisir un court texte de description pour les moteurs de recherche (~150 caractères) ainsi que la vignette de couverture qui apparaîtra sur les médias sociaux (1200×630px, ratio 1.91:1).

Dernière modification : 2026-05-20