Les Bloc d'images WordPress est super utile pour insérer et présenter une seule image sur votre site web. Mais si vous voulez afficher plusieurs photos à la fois, le bloc Galerie est le bon choix.
Par conséquent, vous devez apprendre à utiliser le bloc galerie dans WordPress. Une fois que vous maîtrisez les fonctionnalités du bloc galerie, vous pouvez l'utiliser pour améliorer les visuels de votre site Web, le rendant plus professionnel et attrayant.
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 est un bloc principal dans le Éditeur de blocs WordPress. Il vous permet de créer et d'afficher une collection d'images dans un grille format. Il est parfait pour afficher des photos d'événements, organiser des images dans une mise en page attrayante ou présenter des images avec un minimum d'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)Le texte alternatif et les légendes peuvent améliorer l’accessibilité de votre contenu et son classement dans les moteurs de recherche. Vous pouvez également définir un texte ALT pour des images distinctes au sein de la galerie.
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
L'utilisation du bloc Galerie dans WordPress est simple. Suivez simplement les étapes ci-dessous :
É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.
Créez une galerie interactive avec Galleryberg
Bien que le bloc Galerie par défaut soit excellent pour les grilles simples, il manque de fonctionnalités telles qu'une lightbox, des effets de survol et des mises en page diverses.
Si vous souhaitez une galerie plus attrayante sans écrire de code, la Galleryberg plugin est une alternative gratuite qui étend l'éditeur de blocs avec des outils supplémentaires. Il vous permet de basculer entre les mises en page en mosaïque, en maçonnerie, justifiées et carrées, et ajoute une boîte lumineuse intégrée pour le zoom et la navigation.
Galleryberg inclut également des effets de survol subtils et des commandes réactives pour que vos galeries aient un aspect moderne sur ordinateur et mobile.
Voyons maintenant comment utiliser le plugin Galleryberg.
Étape 1 : Installer le plugin Galleryberg
Allez dans votre tableau de bord WordPress et naviguez vers Extensions → Ajouter une nouvelle extension, puis recherchez Galleryberg. Installez et activez ensuite l'extension.
Étape 2 : Insérer le bloc Galerie Galleryberg
Créez un nouveau message/une nouvelle page ou modifiez-en un existant. Cliquez sur le bouton “ + ”, recherchez Galleryberg et ajoutez le bloc.
Étape 3 : Ajoutez vos images
Téléchargez de nouvelles images ou sélectionnez-les dans la médiathèque et cliquez sur Sélectionner.
Étape 4 : Choisir une mise en page
Par défaut, le bloc utilise une mise en page de vignettes. Dans la barre latérale du bloc, vous pouvez passer à Maçonnerie, Justifiéou Carré pour mieux correspondre à votre design.
Chaque mise en page réarrange automatiquement les images, et vous pouvez ajuster les colonnes, l'espacement et les bordures.
Étape 5 : Activer la fenêtre modale
Basculer Activer la Lightbox dans les paramètres du bloc pour permettre aux visiteurs de cliquer sur une image et de la visualiser dans une fenêtre contextuelle avec zoom et navigation par curseur.
La boîte lumineuse comprend des commandes au clavier et tactiles, elle fonctionne donc parfaitement sur les ordinateurs de bureau et les téléphones.
Étape 5 : Explorer les effets de survol et les légendes
Utilisez les paramètres de la légende pour afficher du texte sous les images ou en superposition qui apparaît au survol. Les animations de survol de Galleryberg (zoom avant/arrière et superpositions) rendent la galerie interactive sans la distraire.
Étape 6 : Prévisualisation et publication
Une fois satisfait, prévisualisez votre galerie et publiez ou mettez à jour votre article. Votre galerie sera réactive et optimisée pour la performance grâce au rendu côté serveur.
Pourquoi utiliser Galleryberg plutôt que le bloc de base ?
Le bloc Galerie de base offre des mises en page de grille basiques mais manque de fonctionnalités telles qu'une fenêtre contextuelle (lightbox), des animations au survol et des mises en page variées. Galleryberg propose quatre styles de galerie différents, une fenêtre contextuelle réactive avec zoom et navigation au clavier, ainsi que des contrôles intuitifs pour l'espacement, les couleurs et les légendes. Il prend même en charge des effets de survol réactifs pour ajouter des animations subtiles. Si vous avez besoin d'une galerie qui encourage les visiteurs à interagir avec vos images et s'intègre parfaitement à l'éditeur de blocs, Galleryberg est une solution légère et conviviale.
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 !
