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

Utilisez les blocs Galerie pour ajouter des galeries d’images et de vidéos à des pages et à des billets de blog avec toute une variété de dispositions. Vous pouvez charger des images, intégrer des vidéos, acheter les droits d’une image d’archive ou afficher des contenus provenant d’une page Galerie existante.

Pour utiliser des blocs Galerie sur votre site, suivez les étapes décrites dans ce guide. Pour des questions générales, consultez la FAQ sur les blocs Galerie.

Dans la version 7.1, vous pouvez ajouter des blocs Galerie uniquement aux billets de blog, aux produits et aux événements. Pour ajouter des galeries aux pages, utilisez les sections de galerie.

Regarder une vidéo

Ajouter un bloc Galerie

Pour ajouter un bloc Galerie :

  1. Modifiez une page ou un billet de blog, cliquez sur un point d’insertion, puis sélectionnez Texte dans le menu. Pour en savoir plus, consultez l’article Ajouter des blocs.
  2. Dans Galerie, sélectionnez DiaporamaCarrouselGrille ou Pile.

Options des blocs Galerie dans le menu des blocs.

  1. Utilisez l’onglet Contenu pour ajouter des images et des vidéos.
  2. Utilisez l’onglet Design pour modifier la disposition et personnaliser le design.
  3. Cliquez sur Appliquer pour enregistrer vos modifications.
  1. Appuyez sur l’icône Pages.
  2. Appuyez sur le titre de la page que vous souhaitez modifier.
  3. Appuyez sur Modifier ou sur l’icône crayon en haut à droite.
  4. Appuyez sur l’icône + en haut à droite pour ouvrir le menu des blocs.
  5. Dans Galerie, appuyez sur DiaporamaCarrouselGrille ou Pile.
  6. Utilisez l’onglet Télécharger ou Existant pour ajouter des images et des vidéos.
  7. Utilisez l’onglet Afficher comme pour modifier la disposition et personnaliser le design.
  8. Appuyez sur Terminé ou sur  pour enregistrer vos modifications.

Ajouter des images et des vidéos

Dans l’onglet Contenu de l’éditeur de bloc Galerie, vous pouvez charger des images, ajouter des images d’archive, intégrer des vidéos ou afficher des contenus provenant d’une page Galerie existante. Vous pouvez également réutiliser une image d’archive ou une image déjà chargée autre part dans votre site.

Pour obtenir des recommandations sur le chargement d’images, consultez l’article Mettre en forme les images pour un affichage sur le Web ou regardez nos vidéos Tout savoir sur les images.

Restrictions

  • Vous pouvez ajouter jusqu’à 250 images et vidéos.
  • Plus vous ajoutez de contenu, plus la page se chargera lentement, en particulier sur les appareils mobiles dotés d’une puissance de traitement limitée. Pour diminuer la taille d’une page, vous pouvez créer plusieurs galeries sur plusieurs pages.

Option 1 - Ajouter vos propres images

Dans l’éditeur du bloc Galerie, faites glisser plusieurs images dans l’outil de chargement d’images. Vous pouvez également cliquer sur l’outil de chargement d’images pour ouvrir un menu de sélection de fichiers.

Option 2 – Ajoutez des images d’archive

Cliquez sur l’icône + située en bas à droite, puis sur Rechercher des images. Selon la taille de votre navigateur, il faudra peut-être faire défiler l’écran vers le bas pour trouver l’icône +.

Pour en savoir plus, consultez l’article Rechercher et ajouter des images d’archive.

Option 3 – Ajouter des vidéos

Vous pouvez intégrer des vidéos provenant de différents services d’hébergement. Les vidéos ne peuvent pas être téléchargées directement. À l’heure actuelle, nous prenons en charge les URL directes de YouTube, Vimeo, Wistia et Animoto. Pour les autres services, vous devez utiliser des codes d’intégration. Pour en savoir plus, consultez l’article Choisir l’option d’intégration vidéo la plus adaptée.

Pour ajouter une vidéo :

  1. Cliquez sur l’icône + en bas à droite, puis sur Vidéo.
  2. Dans la fenêtre Modifier la vidéo, collez l’URL de la vidéo dans le champ Saisissez ici une URL d’intégration. Vous pouvez également cliquer sur l’icône </> et coller le code d’intégration de la vidéo dans la fenêtre Données d’intégration qui s’affiche.
  3. Vous pouvez ajouter une image miniature personnalisée qui s’affichera par-dessus votre vidéo avant que les visiteurs ne la lisent. Certaines vidéos disposent d’une image que le bloc Galerie télécharge, mais vous pouvez supprimer cette image et en télécharger une nouvelle.
  4. Pour utiliser la miniature personnalisée, cochez l’option Utiliser la miniature.
  5. Lorsque vous avez terminé, cliquez sur Save (Enregistrer).

Option 4 – Utiliser une galerie existante

Les blocs Galerie peuvent afficher des images et des vidéos que vous avez ajoutées à une page Galerie existante.

Pour afficher le contenu d’une page Galerie, cliquez sur Utiliser une galerie existante, puis sélectionnez la page Galerie à utiliser.

Option 1 - Ajouter vos propres images

Pour ajouter des images à un bloc Galerie :

  1. Dans l’onglet Télécharger de l’éditeur du bloc, appuyez sur Contenu.
  2. Appuyez sur l’icône +.
  3. Choisissez une image :
    • Prendre une nouvelle photo - Appuyez sur Prendre une photo ou sur Appareil Photo.
    • Choisir une image stockée sur votre appareil - Appuyez sur Photothèque ou sur Fichiers.
    • Choisir une image stockée sur iCloud - Appuyez sur Insérer à partir de....
  4. Appuyez sur les images pour ajouter des titres, des descriptions et des URL de destination.
Remarque : il est actuellement impossible de rechercher des images d’archive ou d’ajouter des vidéos à des blocs Galerie dans l’application. Pour cela, vous devez utiliser un ordinateur.

Option 2 – Utiliser une galerie existante

Pour utiliser une galerie existante sur votre site :

  1. Appuyez sur l’onglet Existant dans l’éditeur du bloc.
  2. Appuyez sur Mes galeries.
  3. Appuyez sur la page Galerie que vous souhaitez utiliser.

Pour ajouter des titres, des descriptions et des URL de destination à vos images, modifiez-les depuis la page Galerie.

Dispositions des blocs Galerie

Voici des exemples pour chaque disposition du bloc Galerie. Sur ordinateur, vous pouvez modifier la disposition dans l’onglet Design du bloc Galerie. Dans l’application Squarespace, appuyez sur Afficher comme pour modifier la disposition.

Les blocs Galerie en diaporama affichent les éléments sous forme de diaporama. Les visiteurs peuvent cliquer eux-mêmes sur les différents éléments ou le diaporama peut être lancé automatiquement. Les éléments s’affichent les uns après les autres.

Exemple de bloc Galerie en diaporama.

Les blocs Galerie en carrousel affichent les éléments sous forme de bande horizontale. Les visiteurs peuvent cliquer eux-mêmes sur les différents éléments, ou le carrousel peut défiler automatiquement. Le nombre d’éléments qui s’affichent en même temps dépend de la taille du bloc.

Exemple de bloc Galerie en carrousel.

Les blocs Galerie en grille affichent les éléments dans une grille uniforme. Un espace est rajouté entre les éléments dont la longueur est différente.

Exemple de bloc Galerie en grille.

Les blocs Galerie en pile affichent les éléments dans une colonne unique en les espaçant d’un pixel. Les éléments occupent toute la largeur du bloc. Cette disposition est moins personnalisable, car elle ne propose ni options pour modifier les valeurs de proportion ni commandes de navigation.

Exemple de bloc Galerie en pile.

Personnaliser le design

Vous pouvez personnaliser le design et le fonctionnement des blocs Galerie. Sur ordinateur, cliquez sur l’onglet Design de l’éditeur du bloc pour réaliser ces modifications. Dans l’application Squarespace, appuyez sur Afficher comme. Vos options dépendent de la disposition.

Voici les options de design pour les blocs Galerie en diaporama :

Option de design À utiliser pour
Passer automatiquement à la diapositive suivante

L’image ou la vidéo suivante du diaporama s’affiche automatiquement après une période définie. Lorsque l’option est cochée, un curseur s’affiche pour ajuster le temps de transition entre une et dix secondes.

Lorsqu’un visiteur regarde une vidéo, ce paramètre ne s’applique pas : il doit cliquer sur la flèche Suivant pour voir l’élément suivant de la galerie.

Afficher les commandes Suivant et Précédent

Ajouter des flèches de navigation. Les commandes s’affichent en superposition à gauche et à droite de l’image ou de la vidéo principale. Lorsque cette option est décochée, les visiteurs peuvent parcourir le diaporama à l’aide du clic de leur souris, à moins que ses images ne disposent d’une URL de destination.

Si votre galerie contient des vidéos et que l’option Passer automatiquement à la diapositive suivante est cochée, nous vous conseillons de vérifier ce paramètre.

Recadrer automatiquement les images

Recadrer ou redimensionner les images pour optimiser le design.

Lorsque cette option est décochée :

  • L’image ou la vidéo la plus large couvre toute la largeur du bloc. Sa hauteur est redimensionnée afin de préserver la valeur de proportion.
  • Toutes les autres images et vidéos sont redimensionnées pour que leur hauteur soit identique à celle de l’image ou de la vidéo la plus large.
  • Les valeurs de proportion sont préservées.
Lorsque cette option est cochée :
  • L’image ou la vidéo la plus large couvre toute la largeur du bloc. Sa valeur de proportion est préservée en fonction de sa hauteur.
  • Toutes les autres images et vidéos sont redimensionnées pour que leur largeur et leur hauteur soient identiques à celles de l’image ou de la vidéo la plus large.
Afficher les miniatures

Ajouter un bandeau contenant les miniatures de toutes les images et de toutes les vidéos dans la galerie (sous l’image principale).

Lorsque cette option est cochée, des curseurs permettent de régler la hauteur du bandeau de miniatures et la distance entre ce bandeau et l’image principale.

Afficher le titre et la description

Afficher le titre et la description des images, comme définis dans les paramètres de chacune d’entre elles.

Lorsque cette option est cochée, des options supplémentaires permettent de définir l’emplacement et de les afficher uniquement en cas de survol avec la souris.

Arrière-plan transparent Supprimer la couleur grise derrière les images qui ne sont pas recadrées. Cette option s’affiche uniquement si l’option Recadrer automatiquement les images est décochée.
Ouvrir les liens dans une nouvelle fenêtre Ouvrir les URL de destination dans de nouveaux onglets lorsque les visiteurs cliquent dessus.

Hauteur du diaporama

La hauteur des blocs Galerie en diaporama correspond à la hauteur de l’image la plus large. Pour le bloc, l’image la plus large est celle qui a la valeur de proportion la plus large.

Voici un exemple de deux images que vous pourriez charger dans le bloc Galerie. L’une a le rapport largeur/hauteur le plus élevé tandis que l’autre est plus large au niveau des pixels :

Comparaison d’images avec des rapports largeur/hauteur différents.

L’image qui a le rapport largeur/hauteur le plus élevé détermine la hauteur du bloc :

L’image qui a le rapport largeur/hauteur le plus élevé détermine la hauteur du bloc Galerie en Diaporama.

Pour définir la hauteur de la galerie, vérifiez la hauteur de l’image dont la valeur de proportion est la plus large. Par exemple, pour réduire la hauteur de l’ensemble de la galerie, recadrez l’image qui a la valeur de proportion la plus large.

Quelques conseils pour modifier la hauteur :

  • Pour vous aider à prévoir la hauteur de la galerie et à utiliser des tailles d’image homogènes, vous pouvez utiliser un éditeur d’image tiers avant de charger les images afin de les recadrer et d’obtenir la même valeur de proportion.
  • Pour les images d’archive et les images que vous avez déjà chargées, recadrez-les à l’aide de l’éditeur d’image intégré.
  • Indiquez si vous voulez que toutes les images du diaporama soient affichées avec la même valeur de proportion en cochant l’option Recadrer automatiquement les images dans l’onglet Design. 
  • Pour en savoir plus sur les valeurs de proportion, consultez l’article Comprendre les valeurs de proportion.

Les options de design pour les blocs Galerie en carrousel sont les suivantes :

Option de design À utiliser pour
Passer automatiquement à la diapositive suivante

Configurez la galerie pour qu’elle passe à l’élément suivant automatiquement après un certain laps de temps (entre une et dix secondes).

La lecture d’une vidéo annule ce paramètre. Lorsque les visiteurs regardent une vidéo, ils doivent cliquer sur la flèche pour voir l’élément suivant de la galerie.

Afficher les commandes Suivant et Précédent

Ajoutez des flèches de navigation. Les commandes s’affichent en superposition à gauche et à droite de l’élément principal.

Si votre galerie contient des vidéos et que l’option Passer automatiquement à la diapositive suivante est cochée, nous vous conseillons de vérifier ce paramètre.

Ouvrir les liens dans une nouvelle fenêtre Ouvrez les URL de destination dans un nouvel onglet.

Les options de design pour les blocs Galerie en grille sont les suivantes :

Option de design À utiliser pour
Valeur de proportion Modifier la forme des images et des vidéos. L’option 1:1 (carré) est sélectionnée par défaut.
Recadrer les images

Supprimer la marge intérieure et afficher les images et les vidéos dans la valeur de proportion sélectionnée.

Lorsque cette option est décochée, la hauteur de chaque ligne est uniformisée en fonction de l’image ou de la vidéo la plus grande. Selon la valeur de proportion sélectionnée, l’espacement peut être inégal, particulièrement si la grille comporte une seule miniature par ligne.

Afficher le titre

Afficher les titres sous les images.

Lorsque les images sont ouvertes avec un effet lightbox, les titres et les descriptions s’affichent en cas de survol.

Miniatures par ligne Définir le nombre de miniatures sur une ligne. Lorsque vous augmentez ce nombre, la taille de chaque miniature diminue.
Marge intérieure Modifiez la marge intérieure entre les différentes images ou vidéos. Si vous placez le curseur sur 0, la marge intérieure est supprimée.
Lightbox

Lorsque cette option est cochée et que vous cliquez sur une image ou sur une vidéo, celle-ci s’affiche dans un diaporama lightbox avec un arrière-plan noir ou blanc. Les URL de destination sont alors désactivées.

Utilisez le menu déroulant Thème Lightbox pour choisir si l’arrière-plan de l’effet lightbox doit être noir ou blanc.

Ouvrir les liens dans une nouvelle fenêtre Ouvrir les URL de destination dans de nouveaux onglets lorsque les visiteurs cliquent dessus.

Les options de design pour les blocs Galerie en pile sont les suivantes :

Option de design À utiliser pour
Afficher le titre et la description

Afficher le titre et la description sous chaque image ou vidéo.

Ouvrir les liens dans une nouvelle fenêtre Ouvrir les URL de destination dans de nouveaux onglets lorsque les visiteurs cliquent dessus.

Ajouter le titre et la description des images

Les titres et les descriptions s’affichent uniquement dans les blocs Galerie en diaporama, en grille et en pile. Le titre de chaque image est utilisé comme texte de remplacement, ce qui peut être utile pour la stratégie de SEO de votre site ainsi que pour son accessibilité.

Pour ajouter un titre et une description à une image ou à une vidéo :

  1. Survolez une image ou une vidéo dans l’éditeur du bloc Galerie ou dans la page Galerie existante.
  2. Cliquez sur l'icône engrenage.
  3. Saisissez un titre et une description. Nous vous recommandons d'utiliser des termes courts décrivant l'image et se rapportant au contenu global de votre site.
  1. Appuyez sur l’onglet Contenu.
  2. Appuyez sur une image.
  3. Saisissez un titre et une description. Nous vous recommandons d’utiliser des termes courts décrivant l’image et se rapportant au contenu global de votre site. 
Astuce : si les images du bloc Galerie proviennent d’une page Galerie existante, les titres et les descriptions des images de la page Galerie s’afficheront automatiquement dans le bloc Galerie.

Le comportement et l’aspect du texte dépendent de la disposition du bloc Galerie :

  • Diaporama - Les titres et descriptions peuvent s’afficher en permanence ou en cas de survol avec la souris. Définissez la position dans l’onglet Design du bloc. Sur les navigateurs de petite taille et sur les appareils mobiles, les titres et les descriptions peuvent ne pas s’afficher.
  • Carrousel - Les titres et descriptions des images ne s’affichent pas.
  • Grille - Les titres s’affichent sous les images. Les titres et les descriptions s’affichent en cas de survol lorsque les images sont ouvertes avec un effet lightbox, mais ne s’affichent pas pour les vidéos ouvertes avec un effet lightbox.
  • Pile - Les titres et descriptions s’affichent sous les images.
Astuce : le style de la légende dépend du design du bloc Galerie et de votre modèle. Pour en savoir plus, consultez l’article Définir le style des légendes d’image.

Ajouter des URL de destination

Utilisez les URL de destination pour transformer des images en liens vers des pages externes, des contenus internes ou des fichiers. Il s’agit d’un excellent moyen d’inciter les visiteurs à cliquer sur des contenus supplémentaires, comme des projets de clients, des produits ou des billets de blog. Les URL de destination fonctionnent avec les images mais pas avec les vidéos.

Pour ajouter une URL de Destination :

  1. Survolez une image ou une vidéo dans l’éditeur du bloc Galerie ou dans la page Galerie existante.
  2. Cliquez sur l'icône engrenage.
  3. Configurez le lien dans le champ Cliquez pour ajouter l’URL…. Pour connaître le détail des étapes à suivre, consultez l’article Utiliser des URL de destination.
  4. Cochez ou décochez l’option Ouvrir les liens dans une nouvelle fenêtre dans l’onglet Design pour contrôler le mode d’affichage de vos liens.
  1. Appuyez sur l’onglet Contenu.
  2. Appuyez sur une image.
  3. Appuyez sur Lien Image.
  4. Utilisez les onglets pour renvoyer les visiteurs vers une autre page de votre site, une page externe, un fichier, une adresse e-mail ou un numéro de téléphone.
  5. Appuyez sur la flèche en haut à gauche, puis sur Enregistrer.

Des restrictions en matière d’URL de destination s’appliquent aux blocs Galerie :

  • Dans les blocs Galerie en diaporama, les URL de destination ont la priorité sur la navigation par clics. Si vous utilisez des URL de destination avec le design Diaporama, nous vous conseillons de cocher l’option Afficher les commandes Suivant et Précédent dans l’onglet Design de l’éditeur de bloc.
  • Dans les blocs Galerie en grille, les URL de destination ne sont pas prises en charge si l’option Lightbox est cochée.

Recadrer ou redimensionner les images (sur ordinateur uniquement)

Il existe plusieurs manières de redimensionner ou de recadrer les blocs Galerie. Vos options dépendent de la disposition.

  • Pour recadrer automatiquement les images selon la même valeur de proportion, cochez l’option Recadrer les images dans l’onglet Design.
  • Pour modifier la taille de toutes les images, changez le nombre de miniatures par ligne dans l’onglet Design.
  • Pour recadrer certaines images, utilisez l’éditeur d’image intégré.
  • Pour recentrer les images, modifiez leur point focal.
  • Pour réduire le bloc Galerie, ajoutez des blocs sur les côtés.

Blocs Galerie sur appareils mobiles

Selon la disposition, les blocs Galerie peuvent s’afficher ou se comporter différemment sur les appareils mobiles et sur un ordinateur.

Sur les appareils mobiles, les blocs Galerie en diaporama conservent leur disposition en diaporama :

  • Les paramètres de navigation et de transition automatique que vous définissez dans l’onglet Design s’appliquent toujours. Les URL de destination fonctionnent lorsque les visiteurs appuient dessus.
  • Les titres et les descriptions ne s’affichent pas sur les écrans dont la largeur est inférieure à 480 pixels, ce qui est le cas de la majorité des smartphones en mode portrait.
  • Selon les appareils, il est possible que les titres et les descriptions (y compris les légendes en cas de survol) s’affichent en mode paysage sur des appareils plus grands (les tablettes par exemple).

Sur les appareils mobiles, les blocs Galerie en carrousel conservent leur disposition en carrousel :

  • Selon vos images, il est possible qu’une seule image ne s’affiche à la fois.
  • Les paramètres de navigation et de transition automatique que vous définissez dans l’onglet Design s’appliquent toujours. Les URL de destination fonctionnent lorsque les visiteurs appuient dessus.

Sur les appareils mobiles, les blocs Galerie en grille s’affichent sous forme de grilles à deux colonnes :

  • La valeur de proportion que vous définissez dans l’onglet Design s’applique toujours.
  • L’effet lightbox peut être activé.
  • Lorsque l’effet lightbox est désactivé, les URL de destination fonctionnent lorsque les visiteurs appuient dessus.
  • Lorsque vous êtes dans une lightbox, appuyez sur le rond situé en bas à droite afin d’afficher le titre et la description d’une image.

Appuyez sur le rond pour afficher le texte d’une image avec un effet lightbox sur un appareil mobile.

Les blocs Galerie en pile s’affichent et fonctionnent de la même façon sur les appareils mobiles.

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