Définir le style des pages Galerie dans la version 7.0

Ajustez les éléments de design des pages Galerie de la version 7.0 pour personnaliser votre site.

Dernière mise à jour le 9 janvier 2025

Vous pouvez changer la taille des images, modifier le design et personnaliser votre page Galerie dans le panneau Styles du site.

Accéder à cette fonctionnalité

Ce guide concerne la version 7.0. La version 7.1 utilise des sections Galerie à la place.

Affichage de la page Galerie selon le template

Par défaut, la page Galerie de chaque template utilise l’un des styles d’affichage suivants :

  • Diaporama - Affiche une image ou une vidéo à la fois. Les visiteurs peuvent cliquer pour passer à la diapositive suivante. Vous pouvez aussi configurer la galerie pour qu’elle défile automatiquement. Le défilement automatique du diaporama se met en pause en cas de survol.
  • Grille - Présente le contenu sous forme de grille. Modifiez la valeur de proportion, la marge intérieure et le nombre de miniatures par ligne dans le panneau Styles du site.
  • Pile - Présente le contenu dans une colonne unique dans laquelle les images ou vidéos sont séparées par un pixel de marge intérieure.
  • Carrousel - Affiche le contenu sur une ligne horizontale. Les visiteurs peuvent cliquer pour passer à la diapositive suivante. Vous pouvez aussi configurer la galerie pour qu’elle défile automatiquement.

Le style de votre page Galerie dépend de votre template. La plupart des templates proposent la page Galerie standard, qui s’affiche sous forme de grille ou de diaporama. D’autres templates possèdent leurs propres pages Galerie dotées de fonctionnalités, d’ajustements de style et de dispositions spécifiques.

  • Adirondack
  • Aviator
  • Bedford
  • Brine
  • Farro
  • Five
  • Galapagos
  • Native
  • Pacific
  • Skye
  • York - Prend également en charge une page Projet unique, similaire à une page Galerie.
  • Avenue : diaporama
  • Flatiron : empilé
  • Forte : carrousel avec un diaporama lightbox
  • Ishimoto : carrousel
  • Momentum : diaporama avec une option d’affichage en grille
  • Montauk : empilé
  • Supply : empilé
  • Tremont : disposition empilée, mosaïque ou grille horizontale
  • Wells : diaporama ou grille
  • Wexley : grille avec un diaporama lightbox

Pages Galerie dans un Index

Vous pouvez ajouter des pages Galerie à l’index dans ces familles de templates. Certaines galeries ont une mise en forme spéciale lorsqu’elles sont ouvertes à partir d’un index. Consultez les guides des templates pour en savoir plus.

  • Avenue : empilé en cas d’ouverture à partir de l’index
  • Brine : les sections Index de galerie s’affichent sous forme de grille ou de diaporama
  • Flatiron : les éléments de navigation s’affichent en cas d’ouverture à partir de l’index
  • Forte
  • Momentum
  • Montauk : affiche les éléments de navigation en cas d’ouverture à partir d’un index ; les bannières ne s’affichent pas.
  • Pacific : les sections Index de galerie s’affichent sous forme de grille ou de diaporama
  • Supply
  • Tremont : le diaporama de la page de destination de l’index s’affiche en bas
  • York

Style de la page Galerie standard

Pour les templates qui utilisent la page Galerie standard, suivez les étapes décrites dans cette section. Pour les templates comportant des pages Galerie uniques, consultez les guides de ces templates.

Choisir la mise en page

La page Galerie standard prend en charge deux dispositions. Pour définir le style de la disposition :

  1. Ouvrez la page Galerie.
  2. Revenez dans le panneau Site web, puis cliquez sur Design et sur Styles du site.
  3. Faites défiler l'écran jusqu'à Styles de Galeries.
  4. Dans l’ajustement Design de galerie, choisissez Diaporama ou Grille.

Astuce

cette option définit la mise en page de toutes les pages Galerie de votre site. Pour créer des galeries avec différentes mises en page, utilisez un Bloc Galerie.

Personnaliser la disposition en diaporama

La disposition en diaporama affiche une image ou une vidéo à la fois. Cette disposition peut inclure des éléments de navigation tels que la flèche et les miniatures dans l’exemple ci-dessous. Vous pouvez la configurer pour que la lecture soit automatique.

Les ajustements suivants apparaissent dans la section Styles de la galerie lorsque l’option Design de la galerie est définie sur Diaporama.

Personnalisez ou masquez la navigation :

  • Navigation de galerie : choisissez le type de navigation (miniatures, puces, numéros, cercles, simple). Sélectionnez Aucun pour masquer la navigation.
  • Style des flèches de galerie : personnalisez les flèches utilisées pour parcourir les diapositives (coins arrondis, rectangulaire, circulaire, sans arrière-plan).
  • Afficher les flèches de la galerie - Décochez cet ajustement pour masquer les flèches de navigation de votre galerie.
  • Taille des miniatures de la Galerie : définissez la hauteur des miniatures lorsque vous parcourez la Galerie.
  • Arrière-plan des flèches de la galerie
  • Couleur des flèches de la galerie
  • Couleur du cercle de la galerie

Choisissez la forme des images :

  • Valeur de proportion de la Galerie : définissez la valeur de proportion (largeur/hauteur). Utilisez en parallèle la fonction de Recadrage automatique de la Galerie.
  • Recadrage automatique de la galerie : recadrage automatique des images selon la valeur de proportion définie par la fonction Valeur de proportion de la Galerie.

Définissez l'affichage des légendes :

  • Superposition d'informations sur la galerie : toujours afficher, afficher au survol, masquer - Le type d'affichage utilisé pour les titres et les légendes des images.
  • Arrière-plan Info Galerie - Couleur utilisée en arrière-plan des titres et des légendes d'images.

Choisissez le mode de transition des images dans le diaporama :

  • Transitions de galerie : Fondu, Défilement
  • Lecture automatique de la galerie - Passez automatiquement d’une image à l’autre. Le défilement automatique du diaporama se met en pause en cas de survol.
  • Galerie en boucle - Configurez le défilement d'une galerie pour qu'il revienne à la première diapositive une fois la dernière passée.
  • Vitesse de lecture automatique de la galerie (en secondes)

Personnaliser la mise en page de la grille

Les ajustements suivants apparaissent dans la section Styles de la galerie lorsque l’option Design de la galerie est définie sur Grille.

Choisissez la forme et la taille des images :

  • Valeur de proportion – Définissez la valeur de proportion (largeur:hauteur) des images. Si vous réglez la valeur de proportion sur Auto, les images sont remaniées afin de s'adapter au mieux à la page. Elles peuvent s'afficher dans un ordre différent de celui dans lequel elles ont été chargées.
  • Espacement de grille - Augmentez la marge intérieure entre les images individuelles de votre grille.
  • Largeur minimale des colonnes - Définissez la largeur des colonnes de votre grille.

Personnalisez l'effet lightbox :

  • Style de l’effet lightbox : Sombre, Clair

Appliquer un style aux légendes

Pour découvrir comment définir les polices des titres et des descriptions d’image, consultez l’article Définir le style des légendes d’image.

L’affichage des légendes dépend de votre template. Pour les templates utilisant la page Galerie standard :

  • Diaporama – Le texte peut être masqué, s’afficher en cas de survol d’une image ou toujours s’afficher, selon le réglage que vous avez sélectionné pour l’ajustement Superposition des informations de galerie
  • Grille – Le texte s’affiche lors du survol d’une image en affichage lightbox
  • Le texte ne s'affiche jamais pour les vidéos

Voici comment s’affichent le titre et la description des images de chaque page Galerie dans ces familles de templates :

Famille de templates Remarques

Avenue

Le texte s’affiche uniquement lorsque la page Galerie fait partie d’un index.

Flatiron

Le texte ne s’affiche jamais.

Forte

Le texte s’affiche toujours.

Ishimoto

Le texte peut être masqué ou toujours apparaître.

Momentum

Le texte s’affiche toujours lorsque vous cliquez sur l’icône « i ».

Montauk

Le texte s’affiche toujours.

Supply

Le texte s’affiche pour les images d’une superposition lorsque vous cliquez sur l’icône + en cas de survol.

Le texte ne s'affiche jamais pour les vidéos.

Tremont

Choisissez parmi Affichage des légendes : en cas de survol ou toujours. Si vous sélectionnez « En cas de survol », les légendes apparaissent lorsque vous survolez l’icône de cercle en bas à droite.

Dans la disposition empilée, vous pouvez afficher les légendes sous l'image. Pour activer ce réglage, choisissez Affichage des légendes : toujours.

Wells

Le texte s’affiche toujours.

Wexley

Le titre des images s’affiche en cas de survol. Utilisez l’ajustement Activer le survol des miniatures pour afficher ou masquer les titres.

Les titres d’image n’apparaissent jamais dans la lightbox ou sur les appareils mobiles. Les descriptions d’image ne s’affichent jamais.

York

York propose la page Galerie standard.

Pour la page Projet, le texte s’affiche à côté ou en dessous des images, en fonction de leur orientation.

Ajouter des liens spéciaux

Certaines pages Galerie acceptent les liens vers et à partir de vos images.

  • Les URL de lien profond sont des URL personnalisables attribuées à chaque image pour vous permettre d’envoyer les visiteurs directement vers une image de la page Galerie.
  • Les URL de destination transforment les images en liens vers des pages externes, des pages internes ou des fichiers.

Astuce

les URL de destination désactivent l’effet lightbox. Adirondack ne prend en charge que les URL de lien profond et les URL de destination en mode diaporama.

Navigation au clavier

Dans la plupart des templates, les flèches du clavier peuvent être utilisées pour naviguer entre les images. Il vous faudra peut-être cliquer sur la page pour que la navigation à l’aide du clavier fonctionne.

La page Galerie standard prend en charge la navigation à l’aide du clavier dans la disposition Diaporama, mais pas lorsqu’une image est ouverte dans un lightbox à partir de la disposition Grille.

Toutes les pages Galerie uniques permettent la navigation à l’aide du clavier (affichages diaporama, carrousel et lightbox).

Galeries en défilement automatique

Certains templates permettent le défilement automatique des images (les visiteurs n’ont pas à cliquer pour afficher l’image suivante).

Si votre template est doté d’une fonction de lecture automatique, vous trouverez cette option dans le panneau Styles du site. Par exemple, pour les templates qui utilisent la page Galerie standard, sélectionnez l’ajustement Lecture automatique de la galerie.

Remarque

si votre galerie contient une vidéo, le défilement automatique l’empêche d’être lue jusqu’à la fin. Afin que votre vidéo ne soit pas coupée, chargez une image mise en avant pour activer la superposition de l’image.

Affichage mobile

Tous les templates Squarespace sont munis d'un design réactif garantissant un affichage optimal de vos Pages Galerie sur tout support. Pour un aperçu de votre Page Galerie sur les appareils mobiles, utilisez la fonction Vue par appareil.

Pour en savoir plus, consultez la page Comment mon site apparaît-il sur les appareils mobiles ?

Autres options de style

Pour créer une apparence différente de ce qu’offre la page Galerie de votre template, vous pouvez essayer ce qui suit :

  • Utilisez un bloc Galerie sur une page Disposition pour un design plus flexible. Pour cela, suivez ces étapes.
  • Utilisez un Bloc Sommaire sur une page Disposition pour filtrer certains contenus de la galerie afin de bénéficier de plus de flexibilité de conception.
  • Choisissez un nouveau template qui propose un design de page Galerie différent.

Vous pouvez également créer plusieurs galeries avec des styles d'affichage différents en utilisant une combinaison de pages Galerie et de pages de disposition avec des blocs Galerie.

Footer Image
  • Obtenir de l’aide de notre communauté

  • Obtenez de l’aide sur les personnalisations avancées auprès de notre communauté.

  • Trouver un Squarespace Expert

  • Démarquez-vous en ligne avec l’aide d’un designer ou d’un développeur expérimenté.

Définir le style des pages Galerie dans la version 7.0