Remarque : même si nos guides les plus populaires ont été traduits en français, certains guides sont uniquement disponibles en anglais.
Utiliser les 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.

Regarder une vidéo

Ajouter un bloc Galerie

Pour ajouter un bloc Galerie :

  1. Cliquez sur Modifier sur une page ou un billet de blog.
  2. Click an insert point. For more details on these first steps, visit Adding blocks.
  3. Dans Galerie, sélectionnez DiaporamaCarrouselGrille ou Pile.

Options des blocs Galerie dans le menu des blocs.

  1. Use the Content tab to add images and videos.
  2. Use the Design tab to change the layout and customize the design.
  3. Cliquez sur Appliquer pour enregistrer vos modifications.

Ajouter des images et des vidéos

In the Content tab of the Gallery Block editor, you can upload images, add stock images, embed videos, or display content from an existing Gallery Page. You can also a reuse a stock or uploaded image from other areas of your 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 - Rechercher des images d’archive

Click the + icon in the bottom-right corner, then click Search Images. Depending on your browser size, you might need to scroll down to see the + icon.

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

Option 3 – Ajouter des vidéos

You can embed videos from hosting services. Videos can't be uploaded directly. We currently support direct URLs from YouTube, Vimeo, Wistia, and Animoto. For other services, use embed codes. To learn more, visit Choosing the right video embed option.

To add a video:

  1. Click the + icon in the bottom-right corner, then click Video.
  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. You can add a custom thumbnail image to display over your video before a visitor plays it. Some videos have an image that the Gallery Block uploads, but you can remove this image and upload a new one.
  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.

Dispositions des blocs Galerie

Il existe quatre styles de blocs Galerie dont le comportement est le même sur l’ensemble des modèles. Vous pouvez modifier la disposition dans l’onglet Design du bloc Galerie. Lorsque vous sélectionnez une disposition, un aperçu du résultat s’affiche sur la page. Voici des exemples pour chaque disposition.

SlideshowCarouselGridStack

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 couvrent toute la largeur du bloc. Contrairement aux autres dispositions, les blocs Galerie en pile ne possèdent pas d’options permettant de modifier les valeurs de proportion ou d’ajouter des commandes de navigation. Cette disposition est donc moins personnalisable.

Exemple de bloc Galerie en pile.

Personnaliser le design

Dans l’onglet Design du bloc Galerie, vous pouvez personnaliser le design et le fonctionnement du bloc. Lorsque vous modifiez les paramètres, un aperçu de vos modifications s’affiche sur la page. Vos options dépendent de la disposition.

SlideshowCarouselGridStack

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.

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, vous pouvez recadrer l’image qui a la valeur de proportion la plus large afin de diminuer sa taille.

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

L’image ou la vidéo suivante du carrousel 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.

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 Ouvrir les URL de destination dans de nouveaux onglets lorsque les visiteurs cliquent dessus.

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.
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 Modifier la marge intérieure entre chaque image ou vidéo. 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.

Utiliser la liste déroulante Thème Lightbox afin de définir l’arrière-plan de l’effet lightbox sur 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.
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 :

SlideshowCarouselGridStack

Les titres et les descriptions peuvent être affichés 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.

Les titres et les descriptions ne s’affichent pas dans les blocs Galerie en carrousel.

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.

Les titres et les 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.
Remarque : 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. 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

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

SlideshowCarouselGridStack
  • 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.

SlideshowCarouselGridStack

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 : 110 sur 289
Utiliser les blocs Galerie