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

Définir le style des pages Galerie

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

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

Affichage de la page Galerie par template

Par défaut, la Page Galerie de chaque template a pour style d'affichage l'un des 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 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.
  • Empilé - 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 à la 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 le guide de chaque famille 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 mises en page. Pour définir le style de mise en page :

  1. Affichez la  Page Galerie.
  2. Dans le Menu principal, cliquez sur Design, puis sur Styles du site.
  3. Faites défiler vers le bas jusqu'à Gallery Styles (Styles de Galeries).
  4. Utilisez l'ajustement Gallery Design (Design de Galerie) pour choisir Slideshow (Diaporama) ou Grid (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 mise en page peut inclure des éléments de navigation (tels que la flèche et les miniatures dans l'exemple ci-dessous), et vous pouvez la régler en défilement automatique.

Les ajustements suivants apparaissent dans la section Styles de la Galerie lorsque le Design de la Galerie est réglé sur Diaporama.

Personnalisez ou masquez la navigation :

  • Navigation dans la Galerie : choisissez le type de navigation (miniatures, puces, nombres, cercles, simple). Sélectionnez Aucun pour masquer les éléments de navigation.
  • Style des flèches de la Galerie : style des 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 Info Galerie  : Toujours Afficher, Afficher au Survol, Masquer - Type d'affichage utilisé pour les titres et les légendes d'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 :

  • Transition Galerie : Fondu, Défilement
  • Défilement automatique Galerie - Passez automatiquement d'une image à l'autre. Le défilement automatique s'arrête lorsque vous survolez un élément avec votre souris. 
  • 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 le Design de la Galerie est réglé 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 lorsque vous survolez une image, ou toujours toujours s'afficher, selon le réglage que vous avez sélectionné pour la superposition des informations de la 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 l'Affichage des Légendes : Au Survol ou Toujours. Au survol, les légendes apparaissent au survol de l'icône de cercle dans le coin inférieur droit.

Dans une mise en page empilée, vous pouvez afficher les Légendes Sous l'Image. Choisissez Affichage des Légendes : Toujours pour activer cet ajustement.

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 mobile. 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 les effets 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 effet 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 défilement automatique, vous trouverez cette option dans le panneau Styles du site. Par exemple, pour les templates qui utilisent la page Galerie standard, cliquez sur l’ajustement Défilement 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. Pour que votre vidéo ne soit pas coupée, chargez une image miniature pour activer la superposition de l’image.

Affichage mobile

Tous les templates Squarespace sont munis d'un design adaptatif 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 quelques alternatives :

  • 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 combinant des pages Galerie et des pages Disposition qui contiennent des Blocs Galerie.

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 40 sur 158
Définir le style des pages Galerie