Remarque : même si nos guides les plus populaires ont été traduits en français, certains guides sont uniquement disponibles en anglais.

Pages Projet (famille York)

Dans la famille de templates York, la page Projet est une vue de galerie personnalisée qui permet de créer d’élégantes dispositions Portfolio. Utilisez la page Projet pour créer des dispositions qui mêlent texte et images de façon à attirer tous les regards.

Les templates York, Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori et Taylor partagent tous la même structure sous-jacente et les mêmes fonctionnalités. Ce guide s’applique à tous ces templates. Ces templates prennent également en charge les pages Galerie qui proposent des options différentes.

Créer la page Projet

Pour créer une page Projet :

  1. Dans le Menu principal, cliquez sur Pages.
  2. Cliquez sur l’icône + pour ajouter un projet.
  3. Pour un résultat optimal, ajoutez plusieurs images ou vidéos et donnez un titre et une description à chacune. 

Ajouter des images et des vidéos

Pour ajouter des images et des vidéos :

  1. Dans le Menu principal, cliquez sur Pages.
  2. Cliquez sur votre page Projet dans le panneau de gauche.
  3. Chargez des images, ajoutez des images d’archive et ajoutez des vidéos. Toutes les vidéos doivent comporter une image miniature.
  4. Définissez le statut de publication de l’image ou de la vidéo. 

Pour modifier les paramètres des images et des vidéos que vous avez déjà chargées, double-cliquez sur l’image ou sur la vidéo dans le panneau Page Projet.

Disposition

Utilisez la section Projet : Disposition du panneau Styles du site pour modifier la disposition.

  • Alignement de l’image : alignez toutes les légendes et toutes les images à droite, à gauche ou au centre.
  • Espacement des images : modifiez l’espace entre chaque image du projet.
  • Espacement de la bannière : modifiez l’espace entre l’en-tête de page et la première image. La valeur de Hauteur du texte dans la section Page : Texte d’introduction peut également affecter ce paramètre.
  • Autoriser les images Portrait et Carré en pleine largeur : affichez les images en mode portrait et les images carrées sur toute la largeur de la zone de contenu principale. Si Projet en pleine page est sélectionné, les images s’affichent sur toute la largeur du navigateur. Cet ajustement est disponible si Style de légende Portrait et Carré est défini sur Standard ou sur Décalage.
Remarque : les pages Projet ne prennent pas en charge l’effet lightbox, les URL de lien profond ou les URL de destination. À la place de l’URL de destination, vous pouvez ajouter un lien vers la légende de l’image. 

Ajouter des légendes

Pour ajouter ou modifier des titres et un texte descriptif :

  1. Dans le Menu principal, cliquez sur Pages.
  2. Cliquez sur la page Projet.
  3. Double-cliquez sur l’image dans le panneau Page Projet. 
  4. Saisissez votre texte dans les champs Titre et Description.

Les titres et les descriptions s’affichent en dessous des images qui sont en mode paysage, et en dessous ou à côté des images carrées et de celles qui sont en mode portrait. Modifiez la disposition dans la section Projet : Disposition du panneau Styles du site.

  • Utilisez l’ajustement Afficher les légendes du projet pour afficher ou masquer le nom et la description de toutes les images.
  • Réduire l’espacement en mode paysage supprime l’espace en dessous des images qui sont en mode paysage et qui n’ont pas de légende.

Utilisez les ajustements de la section Projet : Polices du panneau Styles du site pour personnaliser le style du titre et de la description des images.

  • Pour justifier le texte à gauche, à droite ou au centre, utilisez les ajustements Alignement du titre de la légende et Alignement du corps de la légende.
  • Pour les légendes qui sont affichées à côté des images carrées ou de celles qui sont en mode portrait, utilisez l’ajustement Aligner les légendes alternées sur l’image.

Si vous avez sélectionné Alignement de l’image : Centre et Afficher les légendes du projet, vous pouvez définir plus précisément l’emplacement des légendes sur la page avec les ajustements Style de légende Portrait et Carré et Style de légende Paysage.

  • Quel que soit l’ajustement, sélectionnez Standard pour afficher la légende directement en dessous de l’image et Décalage pour l’afficher plus bas, à égale distance de l’image suivante.
  • Si vous sélectionnez Style de légende Portrait et Carré : Alterné, les légendes s’affichent sur le côté des images carrées et de celles qui sont en mode portrait. Les légendes sont affichées à gauche et à droite de manière alternée. Les images sans légende sont centrées.
  • Si vous sélectionnez Style de légende Paysage : Insertion, les légendes s’affichent en dessous des images qui sont en mode paysage avec un léger chevauchement.

project-page-example.png

Taille des images et des vidéos

Dans les pages Projet, les images ne sont jamais agrandies au-delà de leurs dimensions initiales, même si elles sont définies en pleine page. Vos images n’apparaissent ainsi jamais floues ou pixelisées.

  • En règle générale, la taille de l’image sur votre page Projet est déterminée par les dimensions initiales de votre image. Si vous souhaitez que l’image soit plus grande sur la page, chargez une image dont les dimensions sont plus importantes.
  • Pour réduire la taille de l’image sur la page, chargez une image aux dimensions inférieures. 
  • L’ajustement Marge extérieure du site peut affecter la largeur des images qui ne sont pas définies en pleine page.
  • La largeur des vidéos est définie par le site qui l’héberge. Pour personnaliser la largeur d’une vidéo, utilisez son code d’intégration en prenant soin d’y définir manuellement la largeur souhaitée.
  • Si vous avez besoin d’aide pour les bannières ou pour le design adaptatif, consultez nos recommandations.

Images en pleine page

Les images en pleine page s’affichent jusqu’aux bords de la fenêtre du navigateur sans tenir compte de la marge extérieure. Pour cela, vous devez d’abord vérifier que vos images sont suffisamment grandes. Dans les pages Projet, les images ne sont jamais agrandies au-delà de leurs dimensions initiales. En outre, leur largeur ne dépasse jamais 2 500 pixels, en raison de la manière dont Squarespace optimise le design adaptatif. Nous vous conseillons cependant de charger des images d’une largeur supérieure ou égale à 2 500 pixels afin d’obtenir le meilleur résultat possible.

Si vos images sont suffisamment grandes, vous pouvez utiliser le panneau Styles du site pour qu’elles s’affichent en pleine page. Ceci affectera toutes les pages Projet de votre site.

Dans les pages Projet, les images peuvent s’afficher en pleine page uniquement quand :

  • Les images sont centrées.
  • Les légendes se trouvent sous les images.
  • Les images en mode paysage doivent être définies en pleine page avant que les autres images puissent être définies en pleine page.

Pour afficher toutes vos images en pleine page, commencez par définir les images en mode paysage :

  1. Ouvrez le panneau Styles du site et faites-le défiler jusqu’à la section Projet : Disposition.
  2. Sélectionnez Alignement de l’image : Centre. Vos images sont alors centrées.
  3. Vérifiez que Afficher les légendes du projet est sélectionné, même si vous n’avez pas de légendes.
  4. Sélectionnez Projet en pleine page. Vos images qui sont en mode paysage sont alors définies en pleine page.

Définissez ensuite les images qui ne sont pas en mode paysage :

  1. Sélectionnez Style de légende Portrait et Carré : Standard ou Décalage. Toutes les légendes sont alors affichées en dessous des images qui ne sont pas en mode paysage.
  2. Sélectionnez Autoriser Portrait et Carré en pleine largeur. Vos images qui ne sont pas en mode paysage sont alors définies en pleine page.
  3. Save and refresh the page.

Déplacer des images

Pour réorganiser les images sur la page, changez l’ordre des images dans le panneau de la page. Les fonctionnalités des panneaux Page Projet sont identiques à celles des panneaux Page Galerie.

Vous pouvez déplacer une image ainsi que son titre et sa légende entre les pages Projet et les pages Galerie. Pour en savoir plus, consultez l’article Déplacer des contenus d’une page à l’autre.

En-tête et pied de page

Outre les images et les légendes, les pages Projet prennent en charge les éléments suivants :

Si votre page Projet ne dispose d’aucune image miniature, la première image ajoutée à votre page Projet est automatiquement utilisée comme image de bannière dans la partie supérieure. Ajoutez une image miniature pour la remplacer, ou désélectionnez Afficher la bannière de projet dans le panneau Styles du site pour la masquer sur toutes les pages Projet.

Chargement des pages

Sur les pages Projet, les images et les légendes semblent glisser de bas en haut lorsque vous faites défiler la page vers le bas. Pour supprimer cet effet, désélectionnez l’ajustement Afficher les images et les légendes en cascade. Lorsque cet ajustement est désélectionné, les images et les légendes apparaissent en fondu.

Différences entre la page Galerie et la page Projet

Outre les pages Projet, ces templates prennent en charge la page Galerie standard.

Alors que les pages Projet sont idéales pour combiner texte et images, les pages Galerie permettent de mettre en avant des images et des vidéos. Contrairement aux pages Projet, les pages Galerie prennent en charge les URL de lien profond, les URL de destination et la fonctionnalité lightbox.

Pour tester les deux options, vous pouvez déplacer des images entre les pages Galerie et les pages Projet.

Remarque : les pages Galerie ne prennent pas en charge les vidéos sur les bannières de page.

Changer de template

Si vous passez à un template autre que York, Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori ou Taylor, vos pages Projet sont converties en pages Galerie.

Si vous revenez au template York, Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, ou Taylor, vous devrez peut-être créer de nouvelles pages Projet et de nouvelles pages Galerie et y déplacer les images afin de reproduire le format d’origine. 

Mobile

Sur les appareils mobiles et les navigateurs de petite taille, le contenu est empilé verticalement sur une seule colonne.

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 38 sur 83