Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coupe WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Comment afficher les photos WordPress en colonnes et en lignes

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.

How to display WordPress photos in columns and rows

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.

Add a column block

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.

Choose column ratio and layout

Ensuite, vous pouvez ajouter un bloc d’images à chaque colonne.

Il suffit de cliquer sur le bouton « + » et de sélectionner le bloc « Image ».

Add image block to column

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.

Upload image to column block

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.

Select an image from media library

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.

Add more images to column block

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.

Add a gallery block in content editor

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 ».

Upload or select images from media library

À 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 ».

Click the create a new gallery button

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 ».

Insert your gallery

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.

Adjust column settings in the gallery

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.

Images in columns manually

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.

Add the Envira Gallery license key

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.

Add new gallery

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.

View images in your gallery

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.

Choose gallery layout and number of columns

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.

Publish your image gallery

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 « .

Add the Envira Gallery block

À 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.

Preview of gallery

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.

Add the Column Block in SeedProd

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.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons gagner une commission. Consultez comment WPBeginner est financé, pourquoi cela compte et comment vous pouvez nous soutenir. Voici notre processus éditorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

L'ultime WordPress Toolkit

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tous les professionnels devraient avoir !

Reader Interactions

18 commentairesLaisser une réponse

  1. 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

  2. Asad

    This was the complete beginner’s guide

    • WPBeginner Support

      Glad you think so :)

      Administrateur

  3. 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

  4. 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.

  5. 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

  6. 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?

  7. 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.

  8. Cathrine

    My gallery still won’t post in multiple columns, any idea why that might be?

    • Vasilis

      That’s my problem also…
      Anybody there?

  9. Eileen

    Wow – the gallery button function is a hidden gem I didn’t know about! Thank you.

Laisser une réponse

Merci d'avoir choisi de laisser un commentaire. Veuillez garder à l'esprit que tous les commentaires sont modérés selon notre politique de commentaires, et votre adresse e-mail ne sera PAS publiée. Veuillez NE PAS utiliser de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.