Les Bloc d'images WordPress is super helpful when inserting and showcasing a single image on your website. But if you want to display multiple photos at once, the Gallery block is the right choice.
Therefore, you must learn how to use the gallery block in WordPress. Once you master the gallery block’s features, you can use it to enhance your website’s visuals, making it more professional and appealing.
Aujourd'hui, dans ce tutoriel, nous allons discuter du bloc de galerie WordPress, des fonctionnalités de la barre d'outils, des options de personnalisation et de la manière de l'utiliser correctement. Assurez-vous de nous suivre du début à la fin.
Qu'est-ce que le bloc galerie de WordPress ?
Le bloc WordPress Gallery is a core block in the WordPress block editor. It lets you create and display a collection of images in a grille format. It is perfect for displaying event photos, organizing images into an attractive layout, or presenting images with minimal effort.
Certaines caractéristiques vous sont utiles lorsque vous utilisez le bloc. Découvrez-les ci-dessous.
- Personnalisation: Ajustez les colonnes, l'espacement et les légendes en fonction de votre conception. Vous pouvez également définir différentes résolutions pour les images individuelles de la galerie.
- Conception adaptée: Les images s'adaptent automatiquement aux différentes tailles d'écran pour une expérience transparente sur mobile, tablette et ordinateur de bureau.
- Intégration intégrée: Pas besoin de plugins supplémentaires ; le bloc fonctionne nativement dans WordPress.
- Favorable à l'optimisation des ressources (SEO): Alt text and captions can improve your content’s accessibility and search engine ranking. You can also set ALT text for separate images within the gallery.
Fonctionnalités de la barre d'outils de Gallery Block
Lorsque vous insérez le bloc de la galerie, une barre d'outils apparaît en haut du bloc de la galerie avec diverses fonctions permettant de personnaliser votre galerie. Ces fonctions sont présentées ci-dessous.
- Transformer : Vous pouvez transformer ce bloc en bloc d'images, de colonnes, de détails et de groupes.
- Traînée : Permet de glisser-déposer le bloc dédié à n'importe quel endroit de l'éditeur.
- Poignée mobile : Vous pouvez déplacer votre bloc de haut en bas.
- Aligner : L'option d'alignement vous permet de définir l'alignement de l'image sur Aucun, Largeur large, Largeur complète, Gauche, Centre et Droite.
- Lien : Cette option vous permet d'ajouter des liens pour le contenu sélectionné dans le bloc.
- Légende : Vous pouvez ajouter des légendes en utilisant l'option d'édition pour chaque image.
- Ajouter : L'option d'ajout vous permet d'ajouter ou de télécharger de nouvelles images dans la galerie.
- Plus d'options : Offre plus d'options liées à la section du bloc, telles que dupliquer, copier, grouper, etc.
Comment utiliser le bloc de galerie dans WordPress
Using the Gallery block in WordPress is simple. Just follow the below steps:
Étape 1 : Ajouter un bloc de galerie dans l'éditeur
Ouvrez le message ou la page, cliquez sur l'icône "+" pour ajouter un bloc et recherchez "Galerie". Sélectionnez le bloc "Galerie" pour l'insérer dans votre article ou votre page.
Étape 2 : Télécharger vos images
Vous pouvez télécharger vos images ou les sélectionner dans la médiathèque.
Comment insérer des images via l'option de téléchargement
Pour insérer des fichiers images, cliquez sur le bouton de téléchargement, sélectionnez vos images à l'aide de votre curseur alors que en maintenant la touche CTRL enfoncée de votre clavier, et cliquez sur ouvrir. Le tour est joué. Vous pouvez voir vos images dans l'éditeur.
Comment insérer une image via l'option Bibliothèque multimédia
Cliquez sur le bouton Bibliothèque multimédia, sélectionnez vos images et cliquez sur les boutons Créer une nouvelle galerie et Insérer une galerie pour insérer les images dans l'éditeur.
Lorsque vous avez inséré toutes les images dans la galerie, vous pouvez voir toutes les fonctions de la barre d'outils du bloc d'images. Vous pouvez vérifier ces fonctionnalités ici.
Étape 3 : Personnalisation de la galerie
Pour la personnalisation de la galerie, naviguez vers Réglages (1) > Bloc (2) > Réglages (3). Vous y trouverez les options de sélection des colonnes, de la résolution et d'autres options.
- Colonnes : Les colonnes vous permettent de déterminer le nombre d'images que vous souhaitez afficher dans votre éditeur. Plus vous ajoutez d'images, plus de colonnes seront ajoutées à la galerie. (4)
- Résolution : Vous pouvez régler la résolution de l'image sur Miniature et Pleine taille. (5)
- Recadrer les images pour les adapter : Cette fonction permet de conserver le ratio de chaque image et d'adapter leur taille.
- Ordre aléatoire : Cette fonction ne maintient pas la série, mais affiche les images selon une série aléatoire.
L'option Styles propose les options suivantes.
- Couleur : L'option de couleur vous permet de modifier la couleur d'arrière-plan de votre bloc Galerie.
- Dimensions : L'option Dimensions permet de modifier l'espacement des blocs (espace entre deux blocs tels que des images), la marge et le remplissage.
- Bordure et rayon : En utilisant cette fonctionnalité, vous pouvez ajouter une bordure, une couleur de bordure et un rayon de bordure à votre galerie.
Voici la démo complète de la galerie que j'ai créée.
Create an Interactive Gallery with Galleryberg
While the default Gallery block is excellent for simple grids, it lacks features such as a lightbox, hover effects, and diverse layouts.
If you want a more engaging gallery without writing code, the Galleryberg plugin is a free alternative that extends the block editor with extra tools. It lets you switch between tile, masonry, justified, and square layouts, and adds a built‑in lightbox for zooming and navigation.
Galleryberg also includes subtle hover effects and responsive controls so your galleries feel modern on desktop and mobile.
Now let’s see how to use the Galleryberg plugin.
Étape 1 : Installer le plugin Galleryberg
Go to your WordPress dashboard and navigate to Plugins → Add New and search for Galleryberg. Then install and activate the plugin.
Step 2: Insert the Galleryberg Gallery Block
Create a new post/page or edit an existing one. Click the “+” button, search for Galleryberg, and add the block.
Step 3: Add Your Images
Upload new images or select them from the Media Library and click Select.
Étape 4 : Choisir une mise en page
By default, the block uses a Tiles layout. In the block’s sidebar, you can switch to Maçonnerie, Justifiéou Carré to better match your design.
Each layout automatically rearranges the images, and you can adjust the columns, spacing, and borders.
Step 5: Enable the lightbox
Toggle Enable Lightbox in the block settings to let visitors click an image and view it in a pop‑up with zoom and slide navigation.
The lightbox includes keyboard and touch controls, so it works smoothly on desktops and phones.
Step 5: Explore hover effects and captions
Use the Caption settings to display text below images or as an overlay that appears on hover. Galleryberg’s hover animations (zoom in/out and overlays) make the gallery feel interactive without distracting the
Étape 6 : Prévisualisation et publication
Once satisfied, preview your gallery and publish or update the post. Your gallery will be responsive and performance‑optimised thanks to server‑side rendering.
Why Use Galleryberg Instead of the Core Block?
The core Gallery block offers basic grid layouts but lacks features such as a lightbox, hover animations, and varied layouts. Galleryberg provides four different gallery styles, a responsive lightbox with zoom and keyboard navigation, and intuitive controls for spacing, colors, and captions. It even supports responsive hover effects to add subtle animations. If you need a gallery that encourages visitors to interact with your images and fits seamlessly into the block editor, Galleryberg is a lightweight, user‑friendly solution.
Dernières réflexions !
Le bloc Galerie est un outil puissant avec l'éditeur de blocs Gutenberg. Il vous permet d'afficher vos collections d'images sans plugin supplémentaire.
C'est un excellent choix pour tous en raison de sa flexibilité, de ses options de personnalisation et de son intégration transparente avec WordPress.
Essayez-le et voyez comment il peut transformer la façon dont vous présentez les images sur votre site web.
Laissez-moi savoir ce que vous pensez de ce tutoriel dans la section des commentaires ci-dessous. N'hésitez pas non plus à le faire connaître à vos amis sur vos réseaux sociaux.
En savoir plus !
