Comment afficher des photos WordPress en colonnes et en lignes

Voulez-vous afficher des photos WordPress en colonnes et en lignes ?

Par défaut, WordPress ajoute les images dans une colonne verticale les unes au-dessus des autres. Cependant, si vous ajoutez plusieurs photos à un article de blog, cela ne donne pas très bonne impression et demande beaucoup de défilement à vos utilisateurs.

Dans cet article, nous vous montrerons comment afficher facilement des photos WordPress en colonnes et en lignes.

Pourquoi vous avez besoin de photos WordPress en colonnes et en lignes

Par défaut, lorsque vous ajoutez plusieurs images à un article de blog WordPress, elles apparaissent juste les unes à côté des autres ou les unes au-dessus des autres.

Cela ne donne pas très bonne impression, et vos utilisateurs doivent faire défiler beaucoup pour voir plusieurs images et photos.

Vous pouvez facilement résoudre ce problème en affichant les photos en lignes et en colonnes à l'aide d'une mise en page basée sur une grille. De cette façon, les images apparaîtront dans une mise en page compacte et amélioreront l'expérience utilisateur sur votre site Web.

Si vous avez un site Web de photographie, vous pouvez présenter votre portfolio de manière plus attrayante. Ou vous pouvez montrer plus d'images de produits sur une boutique en ligne en les affichant en lignes et en colonnes.

Cela dit, regardons comment afficher les photos WordPress en colonnes et en lignes manuellement ou à l'aide d'un plugin WordPress. Cliquez simplement sur les liens ci-dessous pour accéder à votre section préférée.

1. Afficher les photos en colonnes et en lignes sans plugins

Cette méthode ne nécessite pas l'installation d'un plugin sur votre site WordPress. Si vous n'ajoutez pas plusieurs photos trop souvent, cela vous conviendra parfaitement.

Vous pouvez ajouter manuellement des images à un bloc de colonnes ou utiliser le bloc de galerie par défaut dans WordPress.

Ajouter des images à un bloc de colonnes

Tout d'abord, vous devez créer un nouvel article ou modifier un article existant où vous souhaitez afficher vos photos. Une fois sur l'écran de l'éditeur de contenu, cliquez sur le bouton '+' pour ajouter un bloc de colonnes.

Ensuite, vous pouvez choisir le nombre de colonnes souhaité et sa disposition.

Par exemple, vous pouvez choisir un ratio 50/50, 33/66, 25/50/25, et plus encore.

Après cela, vous pouvez ajouter un bloc d'image à chaque colonne.

Cliquez simplement sur le bouton '+' et sélectionnez le bloc 'Image'.

Ensuite, vous devrez ajouter une image au bloc.

Vous pouvez cliquer sur le bouton 'Télécharger' pour ajouter une image depuis votre ordinateur ou sélectionner l'option 'Bibliothèque de médias' pour utiliser une image existante.

Une fois la bibliothèque de médias ouverte, sélectionnez simplement votre image préférée et cliquez sur le bouton 'Sélectionner'.

L'une des meilleures pratiques d'optimisation d'images consiste à ajouter un texte alternatif à votre image. Cela permet aux robots des moteurs de recherche de comprendre votre image et de l'afficher dans les résultats de recherche d'images.

Vous devriez maintenant voir votre image dans l'un des blocs de colonnes.

Vous pouvez maintenant faire de même pour les autres blocs de la colonne et ajouter d'autres images.

Ajouter des images dans un bloc de galerie

WordPress propose également un bloc de galerie par défaut que vous pouvez utiliser pour afficher des images en colonnes et en lignes.

Pour commencer, cliquez sur le bouton « + » et ajoutez un bloc Galerie dans l'éditeur de contenu.

Ensuite, vous devrez télécharger des images ou choisir dans la médiathèque.

Pour ce tutoriel, nous choisirons l'option « Médiathèque ».

Ensuite, sélectionnez simplement les images que vous souhaitez ajouter à votre galerie et affichez-les en lignes et en colonnes.

Une fois que vous avez choisi les images, cliquez sur le bouton « Créer une nouvelle galerie ».

Ensuite, WordPress vous demandera d'entrer des légendes pour chaque image et de réorganiser l'ordre des photos.

Après cela, cliquez simplement sur le bouton « Insérer la galerie ».

Vous devriez maintenant voir vos images dans le bloc galerie.

Vous pouvez ajuster le nombre de lignes en cliquant sur le curseur dans le panneau des paramètres à droite.

Une fois que vous avez terminé, publiez simplement votre article pour voir les images en colonnes et en lignes.

Visitez simplement votre site pour les voir en action.

Cette méthode conviendrait à la plupart des débutants. Cependant, si vous gérez un blog de photographie ou partagez souvent des photos sur votre site Web, cette méthode manque de plusieurs fonctionnalités importantes.

Par exemple, l'apparence des photos dépend de votre thème WordPress et vous êtes limité à cette seule mise en page et ce style particuliers.

Vos images ne s'ouvriront pas dans une fenêtre contextuelle Lightbox et les utilisateurs devront les charger comme une nouvelle page, puis appuyer sur le bouton retour pour revenir à la page d'origine.

Pour une expérience utilisateur plus professionnelle et plus belle, vous devriez essayer la méthode du plugin.

2. Afficher les photos en colonnes et en lignes à l'aide d'un plugin

Le meilleur plugin pour ajouter des photos en colonnes et en lignes est Envira Gallery. C'est le plugin de galerie WordPress le plus populaire, super facile à utiliser et offrant de nombreuses fonctionnalités.

Tout d'abord, vous devez installer et activer le plugin Envira Gallery. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Après l'activation, vous devez visiter la page Envira Gallery » Settings pour saisir votre clé de licence. Vous pouvez obtenir cette clé depuis votre compte sur le site Web d'Envira Gallery.

Maintenant, vous êtes prêt à créer de magnifiques galeries d'images.

Rendez-vous simplement sur Envira Gallery » Add New depuis le tableau de bord WordPress pour créer votre première galerie.

Tout d'abord, vous devrez entrer un nom pour votre galerie en haut. À partir de là, vous pouvez sélectionner et télécharger des fichiers depuis votre ordinateur, ou vous pouvez sélectionner dans la bibliothèque de médias WordPress.

Après avoir téléchargé vos photos, vous les verrez apparaître dans la boîte des paramètres de la galerie ci-dessous.

Ensuite, vous devez cliquer sur l'onglet « Configuration » pour personnaliser la façon dont vous souhaitez afficher vos photos.

Envira Gallery vous permet de choisir différents agencements de galerie. Pour afficher les images en lignes et en colonnes, vous pouvez sélectionner les agencements grille, maçon et carré.

Après avoir sélectionné la mise en page, vous pouvez cliquer sur le menu déroulant « Nombre de colonnes de la galerie » et choisir le nombre de colonnes que vous souhaitez afficher.

Si vous faites défiler vers le bas, vous verrez plus d'options pour personnaliser votre galerie. Par exemple, il existe des paramètres pour modifier les dimensions et la taille de votre galerie.

Après cela, vous pouvez cliquer sur le bouton « Publier » pour que votre galerie photo soit prête à être ajoutée à votre site WordPress.

Maintenant, vous devez modifier un article ou en créer un nouveau. Une fois dans l'éditeur de contenu, cliquez simplement sur le bouton « + » pour ajouter le bloc « Envira Gallery ».

À partir de là, vous pouvez cliquer sur le menu déroulant et sélectionner la galerie que vous avez créée précédemment.

Vous pouvez maintenant enregistrer votre publication et la prévisualiser pour voir vos photos en colonnes et en lignes dans une magnifique galerie photo responsive pour mobile.

Désormais, lorsque vos utilisateurs cliqueront sur une miniature de photo, elle s'ouvrira dans une magnifique fenêtre contextuelle. Ils pourront également parcourir les images sans quitter la page.

Bonus : Créez un thème personnalisé avec des colonnes et des lignes d'images

Vous pouvez également créer des thèmes WordPress personnalisés qui comportent un espace réservé pour ajouter des images en colonnes et en lignes.

La meilleure façon de créer un thème personnalisé est d'utiliser SeedProd. C'est le meilleur constructeur de sites Web par glisser-déposer qui offre des thèmes préconçus et de nombreuses options de personnalisation.

Vous pouvez ajouter un bloc de colonnes à vos conceptions de pages de destination à l'aide de SeedProd et ajouter des images dans des lignes et des colonnes. SeedProd est même livré avec un bloc Galerie intégré que vous pouvez utiliser à cet effet.

Pour en savoir plus, veuillez consulter notre guide sur comment créer un thème WordPress personnalisé sans code.

Nous espérons que cet article vous a aidé à apprendre comment afficher des photos WordPress en colonnes et en lignes. Vous voudrez peut-être aussi consulter notre guide sur comment résoudre les problèmes d'image courants dans WordPress et le meilleur logiciel de conception pour les petites entreprises.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.