≪ View Page

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision		Révision précédente
guide:page_d_accueil [2026-05-20] – [Images en pleine largeur] adminguide:page_d_accueil [2026-05-22] (Version actuelle) – [Images en pleine largeur] admin
Ligne 1: Ligne 1:
 ====== Page d’accueil ====== ====== 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.** +La page d’accueil affiche une image en pleine largeur, remplissant l’écran jusqu’aux bords pour un effet visuel immersif. 
- +
-===== Images en pleine largeur =====+
  
 {{ :guide:accueil-chantalringuet.png?600 |Capture d’écran de la page d’accueil, telle qu’elle apparaîtra aux visiteurs}} {{ :guide:accueil-chantalringuet.png?600 |Capture d’écran de la page d’accueil, telle qu’elle apparaîtra aux visiteurs}}
 +
 +===== Images en pleine largeur =====
  
 Une seule image en pleine largeur (en fond perdu) sera affichée sur la page d’accueil. 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. 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.
 +**En raison de la variété de tailles d’écrans, l’image sera assurément rognée.**
  
 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. 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.
Ligne 16: Ligne 17:
  
   * **Image :** c’est l’image qui sera affichée en pleine largeur.   * **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.+  * **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.   * **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).+  * **Centre :**  (pour des usages avancés seulement ) valeur de la propriété CSS ''object-position'' (par défaut : ''center center'' ou ''50% 50%''). 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) ===== ===== Blocs de contenu (sous le pli) =====
Ligne 25: Ligne 31:
  
 {{ :guide:prismic-pageaccueil-slices.png?nolink&600 |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 »).}} {{ :guide:prismic-pageaccueil-slices.png?nolink&600 |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'').
 +
 +Si les données de cette section ne sont pas saisies, ce sont les celles des [[Guide:Réglages du site]] qui seront utilisées.
 +
 +{{ :guide:prismic-page-meta-remplie.png?600 |Capture d’écran annotée de l’onglet « Métadonnées et SEO » pour une page dans Prismic}}