Voulez-vous afficher les photos de 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 à une publication de blog, cela n’a pas l’air très propre et nécessite beaucoup de défilement pour vos utilisateurs/utilisatrices.
Dans cet article, nous allons vous montrer comment afficher facilement les 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 à une publication de blog WordPress, elles apparaissent les unes à côté des autres ou les unes sur les autres.
Cela n’est pas très esthétique et vos utilisateurs/utilisatrices doivent 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 disposition compacte et amélioreront l’expérience de l’utilisateur sur votre site.
Si vous avez un site de photographie, vous pouvez afficher votre portfolio de manière plus attrayante. Vous pouvez également afficher davantage d’images de produits sur une boutique en ligne en les présentant en lignes et en colonnes.
Cela dit, voyons comment afficher les photos WordPress en colonnes et en lignes manuellement ou utiliser une extension WordPress. Cliquez simplement sur les liens ci-dessous pour passer à la section de votre choix.
1. Afficher les photos en colonnes et en lignes sans extension
Cette méthode ne nécessite pas l’installation d’une extension sur votre site WordPress. Si vous n’ajoutez pas trop souvent plusieurs photos, cette méthode vous conviendra parfaitement.
Vous pouvez ajouter manuellement des images à un bloc de colonnes ou utiliser le bloc de galerie par défaut de WordPress.
Ajout de publicités à un bloc de colonnes
Tout d’abord, vous devez créer une nouvelle publication ou modifier une publication existante dans laquelle vous souhaitez afficher vos photos. Une fois que vous êtes dans 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 que vous souhaitez et leur disposition.
Par exemple, vous pouvez choisir un rapport 50/50, un rapport 33/66, un rapport 25/50/25, etc.
Ensuite, vous pouvez ajouter un bloc d’images à chaque colonne.
Il suffit de cliquer sur le bouton « + » et de sélectionner le bloc « Image ».
Ensuite, vous devez ajouter une image au bloc.
Vous pouvez cliquer sur le bouton « Téléverser » pour ajouter un téléversement des médias à partir de votre ordinateur ou sélectionner l’option « Médiathèque » pour utiliser une image existante.
Une fois la médiathèque ouverte, il vous suffit de sélectionner l’image de votre choix et de cliquer sur le bouton « Sélectionné ».
L’une des meilleures pratiques en matière d’optimisation des images consiste à ajouter un texte alt à votre image. Cela permet aux 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 la colonne.
Vous pouvez maintenant faire de même pour les autres blocs de la colonne et ajouter d’autres images.
Ajout de publicités dans un bloc galerie
WordPress propose également un bloc de galerie par défaut que vous pouvez utiliser pour afficher les 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éverser des images ou en choisir dans la médiathèque.
Pour ce tutoriel, nous choisirons l’option « Bibliothèque des médias ».
À partir de là, il vous suffit de sélectionner les images que vous souhaitez ajouter à votre galerie et de les afficher en lignes et en colonnes.
Une fois les images choisies, cliquez sur le bouton « Créer une nouvelle galerie ».
Ensuite, WordPress vous demandera de saisir des légendes pour chaque image et de trier l’ordre des photos.
Cliquez ensuite sur le bouton « Insérer une galerie ».
Vous devriez maintenant voir vos images dans le bloc de la galerie.
Vous pouvez ajuster le nombre de lignes en cliquant sur le Diaporama dans le panneau Réglages à droite.
Une fois que vous avez terminé, il vous suffit de publier votre publication pour voir les images en colonnes et en lignes.
Il suffit de visiter votre site pour les voir à l’œuvre.
Cette méthode convient à la plupart des débutants. Toutefois, si vous tenez un blog de photographie ou si vous partagez souvent des photos sur votre site, cette méthode est dépourvue de plusieurs fonctionnalités importantes.
Par exemple, l’apparence des photos dépend de votre thème WordPress et vous êtes limité à cette mise en page et à ce style particuliers.
Vos images ne s’ouvriront pas dans une fenêtre surgissante de type « lightbox » et les utilisateurs/utilisatrices devront les charger dans une nouvelle page, puis appuyer sur le bouton « back » pour revenir à la page d’origine.
Pour une expérience utilisateurs/utilisatrices plus professionnelle et plus belle, vous devriez essayer la méthode des extensions.
2. Afficher les photos en colonnes et en lignes à l’aide d’une extension
La meilleure extension pour ajouter des photos en colonnes et en lignes est Envira Gallery. C’est l’extension de galerie WordPress la plus populaire qui est super facile à utiliser et offre beaucoup de fonctionnalités.
Tout d’abord, vous devez installer et activer l’extension Envira Gallery. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.
Lors de l’activation, vous devez vous rendre sur la page Envira Gallery » Réglages pour saisir votre clé de licence. Vous pouvez obtenir cette clé à partir de votre compte sur le site d’Envira Gallery.
Vous êtes maintenant prêt à créer de magnifiques galeries d’images.
Il vous suffit de vous rendre dans Envira Gallery » Add New à partir du Tableau de bord WordPress pour créer votre première galerie.
Tout d’abord, vous devrez saisir un nom pour votre galerie en haut de la page. À partir de là, vous pouvez sélectionner et téléverser des fichiers à partir de votre ordinateur, ou vous pouvez sélectionner à partir de la médiathèque de WordPress.
Après avoir téléversé vos photos, vous les verrez apparaître dans la boîte de réglages de la galerie ci-dessous.
Ensuite, vous devez cliquer sur l’onglet » Configuration » pour personnaliser l’affichage de vos photos.
Envira Gallery vous permet de choisir différentes mises en page pour la galerie. Pour afficher les images en lignes et en colonnes, vous pouvez sélectionner les mises en page grille, maçon et Square.
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 défilez vers le bas, alors vous verrez plus d’options pour personnaliser votre galerie. Par exemple, il y a des réglages pour modifier les dimensions et la taille de votre galerie.
Ensuite, vous pouvez cliquer sur le bouton « Publier » pour que votre galerie de photos soit prête à être ajoutée à votre site WordPress.
Maintenant, vous devez modifier une publication ou en créer une nouvelle. Une fois que vous êtes dans l’éditeur de contenu, il vous suffit de cliquer sur le bouton » + » pour ajouter le bloc » Galerie Envira « .
À 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 désormais enregistrer votre publication et la prévisualiser pour voir vos photos en colonnes et en lignes dans une magnifique galerie photo responsive mobile.
Désormais, lorsque vos utilisateurs/utilisatrices cliqueront sur une miniature de photo, celle-ci s’ouvrira dans une fenêtre surgissante. Ils pourront également parcourir les images sans quitter la page.
Bonus : Créer un thème personnalisé avec des colonnes et des lignes d’images
Vous pouvez également créer des thèmes WordPress personnalisés qui disposent d’un espace réservé pour l’ajout d’images en colonnes et en lignes.
La meilleure façon de créer un thème personnalisé est d’utiliser un SeedProd. C’est le meilleur constructeur de site par glisser-déposer qui offre des thèmes préconstruits et de nombreuses options de personnalisation.
Vous pouvez ajouter un bloc de colonnes à vos conceptions de pages d’atterrissage en utilisant SeedProd et ajouter des images aux lignes et aux colonnes. SeedProd est même livré avec un bloc de galerie intégré que vous pouvez utiliser pour cela.
Pour en savoir plus, veuillez consulter notre guide sur la façon de créer un thème WordPress personnalisé sans aucun code.
Nous espérons que cet article vous a aidé à apprendre comment afficher des photos WordPress en colonnes et en lignes. Vous pouvez également consulter notre guide sur la façon de corriger les problèmes d’image courants sur WordPress et le meilleur logiciel de conception pour les petites entreprises.
Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.
Syed Balkhi
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Muhammad Hammad
I believe custom theme creation is time taking and the EnviraGallery plugin is a more favorable option.
However, I am wondering if you can create custom layouts within the EnviraGallery plugin or just select from the pre-installed gallery templates?
WPBeginner Support
Envira Gallery does not have a custom placement of images if that is what you are wanting from the plugin but there are many different gallery options that would scale to the user’s browser.
Administrateur
Asad
This was the complete beginner’s guide
WPBeginner Support
Glad you think so
Administrateur
Chris Thom
Using the default gallery is there a way to control the margin/padding between images?
WPBeginner Support
You would need to manually modify the CSS for your content.
Administrateur
Chris Thom
Good information but on the stock WP galley how can I adjust the padding between images? Right now they’re butted right up against each other.
WPBeginner Support
You would need some knowledge of CSS, for a better understanding, we would recommend taking a look at our article below:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Administrateur
gedi
problem is u can’t put url behind image – wp won’t give option – can’t be edited execpt in html which is drawn out… good though if you dont want someone to cliick thru
WPBeginner Support
At the moment WordPress does not have the option to add individual links by default to the gallery which is why we show Envira Gallery which does have that option
Administrateur
Agnieszka
Hi!
I tried to set up a gallery and even though I set the number of columns when I eventually update and preview my page all images show in just 1 column..no matter what I do!!
I tried to change the layout and number of columns but every time it is just 1 column and I have no idea how to fix it. Could you please help?
Shannon Ball
I would like to have a grid of images so that when a reader clicks on an image it takes them to an external url with more info. (like a grid of ads/sponsors) at the bottom of a post…
Any suggestions?
Isaiah Hammons
I want the same exact thing you’re talking about..
sean sewell
I am desperately after the same thing! If you ever find out please let me know!
Michelle
Just curious… I am sure you have already tried this, but on the media tab inside of wordpress have you clicked on the photo and under the information there is a spot to put a URL so someone can click on it. I know it is kind of hidden and not that intuitive, but that might work for you.
Cathrine
My gallery still won’t post in multiple columns, any idea why that might be?
Vasilis
That’s my problem also…
Anybody there?
Eileen
Wow – the gallery button function is a hidden gem I didn’t know about! Thank you.