--- title: "Élément Galerie : afficher des images en grille" description: "Présentez plusieurs images dans une grille régulière au même format, idéale pour un portfolio, une collection de réalisations ou une mosaïque d'inspirations." url: https://docs.vivlab.com/editor/menu/gallery --- # Galerie L'élément **Galerie** affiche plusieurs images dans une grille régulière, toutes au même format. C'est le bloc idéal pour présenter un portfolio, une collection de réalisations, les photos d'un lieu ou un événement, ou encore une mosaïque d'inspirations, sans avoir à aligner chaque image à la main. ## Galerie Le panneau latéral liste les images de la galerie, dans l'ordre où elles apparaissent sur la page. - Cliquez sur **Ajouter une image** pour insérer un emplacement vide à remplir, ou sur **Importer plusieurs images** pour téléverser tout un lot de photos d'un seul coup, pratique pour une galerie de plusieurs dizaines d'images. L'import remplit d'abord les emplacements restés vides avant d'en créer de nouveaux. - Faites glisser une image par sa poignée pour modifier l'ordre d'affichage. - Le menu de chaque image permet de la **Dupliquer** ou de la **Supprimer**. Cliquez sur une image de la liste pour déplier ses réglages : - **Image** : glissez-déposez ou cliquez pour importer un fichier JPEG, PNG, GIF, WebP ou AVIF. Une fois l'image chargée, le bouton **Modifier l'image** permet de la remplacer, et le cadre affiché au-dessus permet de faire glisser l'image pour choisir quelle partie reste visible dans sa case, utile puisque chaque image est recadrée pour remplir entièrement sa case. - **Texte alternatif** : une description courte de l'image, utilisée par les moteurs de recherche et les lecteurs d'écran pour améliorer le référencement et l'accessibilité. Ce texte sert aussi de légende lorsque l'option **Afficher les légendes** est activée (voir [Grille](#grille)). - **Ajouter un lien** : rend l'image cliquable. Renseignez l'action au clic : lien externe, page interne, ancre, e-mail, téléphone, PDF, produit ou catégorie. Reportez-vous aux options de lien décrites pour le [bouton](https://docs.vivlab.com/editor/menu/button.md). ## Grille La section **Grille** contrôle la disposition de toutes les images en une seule fois. Les images remplissent la hauteur du bloc et sont recadrées pour occuper toute leur case, ce qui garantit une grille parfaitement régulière même si vos fichiers d'origine ont des dimensions différentes. Pour agrandir ou réduire les images, redimensionnez simplement le bloc sur la [canvas](https://docs.vivlab.com/editor/canvas.md). - **Colonnes** : le nombre d'images par ligne. Réglez-le séparément pour l'ordinateur et le mobile (par exemple 3 colonnes sur ordinateur et 2 sur mobile). - **Espacement horizontal** : l'écart entre les colonnes, en pixels. - **Espacement vertical** : l'écart entre les lignes, en pixels. - **Afficher les légendes** : affiche le **Texte alternatif** de chaque image en légende, juste en dessous. Pensez à renseigner ce texte pour chaque image avant d'activer l'option. ## Style Le [panneau de style](https://docs.vivlab.com/editor/style/index.md) regroupe le [style du texte](https://docs.vivlab.com/editor/style/text.md) des légendes, l'[arrière-plan](https://docs.vivlab.com/editor/style/background.md), les [bordures](https://docs.vivlab.com/editor/style/border.md), l'[arrondi des angles](https://docs.vivlab.com/editor/style/border-radius.md), l'[ombre](https://docs.vivlab.com/editor/style/box-shadow.md), les [marges intérieures](https://docs.vivlab.com/editor/style/padding.md) et les [transitions](https://docs.vivlab.com/editor/style/transition.md).