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 articles de blog avec toute une variété de dispositions. Vous pouvez charger des images, intégrer des vidéos ou acheter les droits d’une image d’archive.

Regarder une vidéo

Où ajouter des blocs Galerie

Les emplacements dans lesquels vous pouvez ajouter des blocs Galerie dépendent de la version de votre site.

Vous pouvez ajouter des blocs Galerie aux zones de votre site où les sections de galerie ne sont pas prises en charge, et notamment celles-ci :

  • Billets de blog
  • Événements individuels
  • Informations supplémentaires des produits

Il n’est pas possible d’ajouter des blocs Galerie aux zones comportant des sections de page, et notamment celles-ci :

  • Pages Disposition
  • Pages de destination des collections (pages Blog, pages Événements, pages Portfolio, pages Boutique)
  • Sous-pages Portfolio
  • Pieds de page

Vous pouvez ajouter des blocs Galerie à n’importe quelle zone de contenu de bloc de votre site. Pour en savoir plus, consultez l’article Ajouter du contenu à l’aide des blocs.

Ajouter un bloc Galerie

Pour ajouter un bloc Galerie :

  1. Cliquez sur un point d’insertion dans une zone qui prend en charge les blocs Galerie, puis cliquez sur Galerie. Pour obtenir de l’aide, consultez l’article Ajouter du contenu avec les blocs.
  2. Utilisez l’onglet Contenu pour ajouter des images et des vidéos.
  3. Utilisez l’onglet Design pour modifier la disposition et personnaliser le design.
  4. Cliquez sur Appliquer 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 ou intégrer des vidéos. Vous pouvez également réutiliser une image d’archive ou une image déjà chargée ailleurs dans votre site.

Pour en apprendre davantage sur nos bonnes pratiques concernant 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, envisagez de créer des galeries plus petites sur plusieurs pages.

La méthode pour ajouter des images et des vidéos aux blocs Galerie dépend de la version de votre site.

Ajouter vos propres images

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

Vous pouvez également réutiliser des images provenant d’autres pages de votre site.

Ajouter des images d’archives

Cliquez sur + en bas à droite, puis sur Rechercher des images. Selon la taille de votre navigateur, vous devrez peut-être faire défiler l’écran vers le bas pour trouver le symbole +.

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

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 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 + 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 charge, mais vous pouvez supprimer cette image et en charger une nouvelle.
  4. Pour utiliser la miniature personnalisée, cochez l’option Utiliser la miniature.
  5. Lorsque vous avez terminé, cliquez sur Enregistrer.

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.

Ajouter des images d’archives

Cliquez sur + en bas à droite, puis sur Rechercher des images. Selon la taille de votre navigateur, vous devrez peut-être faire défiler l’écran vers le bas pour trouver le symbole +.

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

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 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 + 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 charge, mais vous pouvez supprimer cette image et en charger une nouvelle.
  4. Pour utiliser la miniature personnalisée, cochez l’option Utiliser la miniature.
  5. Lorsque vous avez terminé, cliquez sur Enregistrer.

Importer des images à partir d’autres pages

Il existe deux façons d’ajouter des images provenant d’autres pages de votre site :

  • Ajouter des images et des vidéos à partir d’une page Galerie - Cliquez sur Utiliser une galerie existante, puis sélectionnez la page Galerie à utiliser.
  • Ajouter des images provenant d'autres pages : cliquez sur le + dans le coin inférieur droit, puis cliquez sur Rechercher des images pour rechercher et réutiliser les images.

Ajouter vos propres images

Pour ajouter des images à un bloc Galerie :

  1. Dans l'onglet Charger de l'éditeur de blocs, appuyez sur Contenu.
  2. Appuyez sur +.
  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.

Utiliser une galerie existante (version 7.0 uniquement)

Sur les sites de la version 7.0, vous pouvez ajouter des images d’une page Galerie existante à votre site :

  1. Appuyez sur l’onglet Existant dans l’éditeur de 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, sauf si vous les recadrez automatiquement.

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.

Si vous souhaitez afficher un ensemble d’images empilées avec plus d’espace entre chacune d’elles, passez à une disposition en grille. Vous pouvez ensuite définir les miniatures par ligne sur 1 et modifier l’espacement selon vos besoins.

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 que la hauteur souhaitée est celle 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.

Alignement actif

Choisissez où l’image active apparaîtra dans le curseur lorsque les images se déplacent.

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 des titres et des descriptions aux images et aux vidéos :

  1. Survolez une image ou une vidéo dans l’éditeur de blocs Galerie.
  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 votre site utilise la version 7.0, les images d’une page Galerie existante affichent automatiquement les titres et les descriptions des images à partir de la page 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 la version de votre site. Pour en savoir plus, consultez l’article Personnaliser les 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 dans l’éditeur de blocs Galerie.
  2. Cliquez sur l'icône engrenage.
  3. Configurez le lien dans le champ Ajoutez l’URL ici. Pour connaître le détail des étapes à suivre, consultez l’article 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 de l'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.

Les URL de destination disposent également de certaines restrictions :

  • 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.
  • Les vidéos ne prennent pas en charge les URL de destination.

Réorganiser les images et les vidéos

Les blocs Galerie n’incluent pas d’options permettant de trier automatiquement les images et les vidéos, mais vous pouvez réorganiser les éléments manuellement en suivant les étapes ci-dessous :

  • Pour déplacer une image à la fois, ouvrez l’éditeur du bloc, cliquez sur l’image et faites-la glisser.
  • Pour déplacer plusieurs images, maintenez enfoncée la touche Ctrl sur Windows ou sur Mac et cliquez sur chaque image à déplacer. Après les avoir sélectionnées, cliquez sur les images et faites-les glisser.

Si votre site utilise la version 7.0 et que le bloc Galerie affiche le contenu provenant d’une galerie existante, réorganisez les images ou les vidéos sur la page Galerie d’origine.

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 choisissez dans l'onglet Design s'applique quand-même.
  • 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 : 156 sur 554