Comment rendre une galerie WordPress responsive (2 méthodes) 

Lorsque j'ai ajouté pour la première fois une galerie à mon site WordPress, elle était correcte sur ordinateur mais complètement désordonnée sur mobile. C'est à ce moment-là que j'ai appris à quel point il est important de rendre ma galerie WordPress responsive.

Dans ce guide, je vais vous montrer les deux méthodes les plus simples que j'utilise pour créer des galeries adaptées aux mobiles qui s'ajustent automatiquement à n'importe quelle taille d'écran sans ralentir votre site.

Qu'il s'agisse de photos de produits, d'images de portfolio ou de visuels de blog, ces étapes vous donneront une galerie qui sera superbe partout et qui améliorera également votre référencement.

Pourquoi rendre une galerie WordPress responsive ?

De nos jours, près de 60 % de tout l'accès à Internet se fait via un smartphone. Ainsi, lorsque vous ajoutez de nouvelles fonctionnalités à votre site web, vous devez vous assurer qu'elles fonctionnent correctement sur les appareils mobiles.

Qu'il s'agisse d'une tablette, d'un smartphone, d'un ordinateur portable ou d'un ordinateur de bureau, votre nouvelle mise en page de galerie de photos doit être suffisamment flexible pour s'adapter à chaque taille d'écran. Ainsi, vos visiteurs auront une meilleure expérience utilisateur.

Plus important encore, une conception responsive est cruciale pour le référencement (SEO).

Les moteurs de recherche comme Google considèrent la facilité d'utilisation mobile comme un facteur dans le classement de votre site dans les résultats de recherche. L'ajout d'images de galerie responsives à votre site peut vous aider à obtenir de meilleurs classements et, par conséquent, à générer plus de trafic organique vers votre petite entreprise.

En fin de compte, apprendre à rendre une galerie WordPress responsive peut grandement contribuer à la croissance de votre entreprise. Dans cette optique, voici 2 méthodes faciles que vous pouvez suivre.

WordPress rend-il les images de galerie responsives automatiquement ?

Oui. WordPress génère automatiquement plusieurs tailles d'images et ajoute des attributs srcset et sizes à chaque image de galerie que vous téléchargez, les rendant responsives par défaut.

La plupart des thèmes modernes gèrent cela nativement. Mais les galeries basées sur des plugins vous offrent un contrôle de la mise en page, une personnalisation des colonnes et des paramètres d'affichage spécifiques au mobile que le bloc de galerie par défaut n'a pas.

Quelle est la manière la plus simple de rendre une galerie WordPress adaptée aux mobiles ?

Vous trouverez ci-dessous 2 méthodes pour ajouter une galerie d'images responsive à votre site WordPress. Premièrement, nous utiliserons SeedProd, un constructeur de site web par glisser-déposer avec des outils de galerie intégrés. Deuxièmement, nous utiliserons l'un des meilleurs plugins de galerie d'images WordPress responsive du marché.

Cliquez sur l'une des méthodes ci-dessous pour voir les étapes d'ajout d'une nouvelle galerie.

Méthode 1. Utiliser le bloc WordPress de galerie avancée SeedProd

Pour la première solution, nous utiliserons SeedProd, le meilleur constructeur de site web WordPress. Avec son constructeur par glisser-déposer, ses modèles responsives et ses blocs WordPress personnalisables, c'est de loin le moyen le plus simple de personnaliser votre site web sans code HTML, PHP ou CSS personnalisé.

Vous pouvez utiliser les Blocs WordPress de SeedProd pour ajouter des galeries à votre thème WordPress, vos pages et vos zones prêtes pour les widgets. C'est aussi simple que de glisser, déposer et cliquer pour créer des galeries qui fonctionnent avec n'importe quelle taille d'écran.

Les fonctionnalités faciles à utiliser de SeedProd incluent :

• Constructeur de thèmes WordPress
• Kits de sites web préconçus
• Constructeur de pages de destination
• Modèles de page de destination responsive
• 4 modes de page : Bientôt disponible, Maintenance, 404 et Connexion
• Intégrations de marketing par e-mail
• Gestion des abonnés
• Prise en charge de WooCommerce
• Contrôles d'accès
• Texte dynamique
• Mappage de domaine
• Et plus encore.

Suivez les étapes ci-dessous pour créer des galeries WordPress responsives avec SeedProd.

Étape 1. Installer et activer SeedProd

Tout d'abord, allez sur le site web de SeedProd et téléchargez le plugin. Nous vous suggérons d'obtenir la version Pro de SeedProd pour suivre ce tutoriel car elle offre les meilleures fonctionnalités à des prix compétitifs.

Ensuite, connectez-vous à votre compte SeedProd et cliquez sur l'onglet Téléchargements pour télécharger le fichier du plugin sur votre ordinateur. Vous pouvez également copier votre clé de licence en même temps, dont vous aurez besoin sous peu.

Maintenant, téléchargez et activez le plugin sur votre site web WordPress. Si vous avez besoin d'aide pour cette étape, vous pouvez suivre ce guide sur l'installation d'un plugin WordPress (s'ouvre dans un nouvel onglet).

Après avoir installé et activé SeedProd, naviguez vers SeedProd » Paramètres depuis votre administration WordPress et collez la clé de licence que vous avez copiée précédemment. Assurez-vous de cliquer sur le bouton Vérifier la clé, puis passez à l'étape suivante.

Étape 2. Créer un thème ou une page de destination WordPress

Étant donné que ce plugin offre 2 façons d'utiliser son constructeur par glisser-déposer, l'étape suivante consiste à créer un thème WordPress ou une page de destination.

Le Theme Builder est le moyen le plus simple de créer un thème WordPress personnalisé sans engager de développeur. Il remplace votre thème actuel par des modèles entièrement personnalisables pour chaque partie de votre site web.

Alternativement, le constructeur de pages de destination est un excellent moyen de créer des pages individuelles visuellement sans modifier votre thème WordPress.

Vous pouvez suivre ces tutoriels étape par étape sur la création d'un thème WordPress et la création d'une page de destination avec SeedProd. Ensuite, après avoir choisi un modèle et créé vos pages initiales, vous pouvez suivre l'étape 3 de ce guide pour ajouter une galerie réactive à votre site.

Note : Pour ce guide, nous utilisons la méthode Theme Builder.

Étape 3. Ajouter le bloc WordPress de galerie avancée

Pour cette étape, ouvrez n'importe quelle page avec SeedProd pour la personnaliser avec le constructeur glisser-déposer. Par exemple, vous pouvez ouvrir le modèle de page d'accueil depuis le tableau de bord du constructeur de thèmes pour ajouter des galeries réactives à votre page d'accueil.

Si vous créez une page de destination, allez dans SeedProd » Pages de destination et cliquez sur Modifier sur le design choisi.

Lorsque vous ouvrez votre design, vous verrez une mise en page similaire à celle ci-dessous :

Sur la gauche se trouvent les blocs et sections pour ajouter du contenu à votre design, et sur la droite se trouve un aperçu en direct. Cliquer sur n'importe quel élément de votre aperçu ouvrira ses paramètres sur la gauche, et toutes les modifications que vous apporterez se feront automatiquement en temps réel.

Certains des blocs que vous pouvez utiliser incluent :

• Boutons de partage social
• Icônes de profil de médias sociaux
• Bloc vidéo (Lien vers une vidéo YouTube ou Vimeo)
• Carrousel de témoignages
• Formulaires de contact
• Et plus encore

Pour ce guide, nous utiliserons le bloc Galerie avancée.

Création d'une galerie WordPress réactive unique

Supposons que vous souhaitiez ajouter une galerie réactive unique pour afficher les meilleurs exemples de votre portfolio. Pour ce faire, choisissez le bloc Galerie avancée dans le panneau de gauche et faites-le glisser sur le design de votre page.

À partir de là, vous pouvez ouvrir les options de la galerie et ajuster les paramètres jusqu'à ce que votre galerie ressemble exactement à ce que vous voulez. Vous pouvez modifier le nombre de colonnes et l'espacement, ou lier votre galerie au fichier image, à un lien personnalisé ou à aucun.

Par exemple, l'option Fichier média affichera votre galerie dans une lightbox d'image pleine grandeur réactive lorsque les visiteurs cliqueront dessus.

Vous pouvez également modifier le rapport hauteur/largeur de vos miniatures d'image et définir la taille de l'image sur miniature, moyenne ou grande.

Vous souhaitez ajouter des informations à chaque image de la galerie ? Cliquez ensuite sur l'onglet Superposition, où vous pouvez ajouter une couleur de superposition d'arrière-plan, un effet de survol, des titres et des descriptions à chaque image.

Chaque fois qu'un visiteur du site web survolera une image, celle-ci s'assombrira et affichera une description de votre choix.

Création de plusieurs galeries WordPress dynamiques

Vous pouvez également utiliser le bloc Galerie avancée sur toute autre page de votre site web. Par exemple, vous pouvez créer une page de portfolio et ajouter plusieurs galeries d'images que les utilisateurs peuvent filtrer par des paramètres spécifiques.

Pour ce faire, cliquez sur le menu déroulant Type et choisissez l'option Multiple. Ensuite, vous pouvez commencer à ajouter autant de galeries que vous le souhaitez.

Si vous avez besoin de plus d'options de personnalisation, vous pouvez cliquer sur l'onglet Avancé. À partir de là, vous pouvez modifier les couleurs des onglets de filtre, la typographie, les ombres, les bordures d'image, et bien plus encore.

Rendre votre galerie WordPress réactive

Toute galerie que vous créez avec SeedProd est responsive par défaut. Cependant, vous pouvez vérifier la compatibilité mobile de vos galeries avec l'option d'aperçu mobile.

Cliquez sur l'icône d'aperçu mobile de la barre d'outils inférieure, et vous verrez à quoi ressemble votre galerie sur les appareils mobiles.

Vous pouvez ensuite modifier votre conception pour qu'elle soit superbe sur n'importe quel appareil.

Dans l'onglet Visibilité des appareils, vous pouvez également masquer des éléments spécifiques sur mobile ou sur ordinateur pour améliorer l'expérience mobile.

Lorsque vous êtes satisfait de votre galerie d'images, cliquez sur le bouton Enregistrer dans le coin supérieur droit de la page.

Étape 4. Publier votre galerie d'images responsive

Vous êtes maintenant prêt à publier votre galerie. Pour ce faire, retournez au tableau de bord du Theme Builder et activez le bouton "Activer le thème SeedProd" sur "Oui".

Alternativement, pour les pages de destination, cliquez sur la flèche déroulante du bouton Enregistrer, puis cliquez sur Publier.

Vous pouvez maintenant prévisualiser votre galerie responsive pour voir à quoi elle ressemble.

Méthode 2. Utiliser le plugin WordPress Envira Gallery

Nous utiliserons Envira Gallery pour créer une galerie WordPress responsive pour la méthode suivante. Contrairement à d'autres plugins de galerie WordPress, Envira Gallery est rapide, responsive et léger tout en offrant des fonctionnalités étendues et faciles à utiliser.

Par exemple, il offre des options de redimensionnement d'images, des diaporamas, des mises en page flexibles et plusieurs sources d'images.

Tout d'abord, installez et activez le plugin Envira Gallery sur votre site Web WordPress. Ensuite, allez dans Envira Gallery » Ajouter une nouvelle pour créer une nouvelle galerie d'images.

Pour ajouter des images à votre galerie, cliquez sur l'un des boutons ci-dessous :

La première option vous permet de télécharger des fichiers image depuis votre ordinateur, tandis que le second bouton vous permet de choisir des images dans votre bibliothèque de médias WordPress.

Après avoir choisi vos images, vous pouvez les réorganiser par glisser-déposer. Vous pouvez également cliquer sur l'icône en forme d'œil pour mettre des images spécifiques en mode brouillon et les masquer de votre galerie publiée.

De plus, cliquer sur l'icône en forme de crayon vous permet de modifier les métadonnées de votre image. Par exemple, vous pouvez modifier le titre de l'image, le texte alternatif et la légende, et modifier l'URL source de la page de pièce jointe.

Ensuite, cliquez sur l'onglet Configuration où vous pouvez :

• Changer le nombre de colonnes de la galerie
• Activer le chargement différé des images
• Afficher les descriptions de la galerie
• Afficher les légendes et les titres
• Définir la taille en pixels, la position de recadrage de l'image et l'espacement
• Changer les modèles de galerie

Dans l'onglet Lightbox, vous pouvez activer une lightbox responsive lorsque les utilisateurs cliquent sur une image. Il vous permet également d'ajuster les paramètres pour changer votre thème de lightbox, afficher les légendes, ajouter des effets de transition, et plus encore.

En plus des paramètres ci-dessus, Envira Gallery dispose d'un onglet de paramètres de galerie mobile. Ce panneau vous permet de générer automatiquement des images spécifiques pour les appareils mobiles.

Vous pouvez définir des dimensions d'image mobile personnalisées et des hauteurs de ligne, et même ajuster les paramètres de la lightbox mobile.

Lorsque vous êtes satisfait de la conception de votre galerie, cliquez sur le bouton Publier dans le coin supérieur droit.

Pour ajouter votre galerie adaptée aux mobiles à votre site web, créez ou modifiez un article ou une page, puis cliquez sur l'icône plus (+) dans l'éditeur de blocs WordPress pour ajouter un nouveau bloc.

Recherchez jusqu'à ce que vous voyiez le bloc Envira Gallery, puis cliquez dessus pour l'ajouter à votre page.

Dans le menu déroulant, sélectionnez la galerie que vous venez de créer pour l'intégrer dans l'éditeur WordPress.

Vous pouvez maintenant cliquer sur le bouton Mettre à jour ou Publier pour rendre votre galerie visible sur votre site web.

Note : Si vous utilisez toujours l'éditeur classique de WordPress, vous pouvez copier votre shortcode Envira Gallery et le coller dans un article ou une page.

Ensuite, prévisualisez votre page et voyez à quoi ressemble votre nouvelle galerie WordPress réactive.

Comment rendre une galerie de produits WooCommerce responsive

Si vous gérez une boutique WooCommerce, vos galeries d'images de produits doivent également être superbes sur mobile. Les blocs WooCommerce intégrés de SeedProd rendent les galeries d'images de produits réactives par défaut, donc aucun plugin de galerie séparé n'est requis.

Lorsque vous créez vos pages de produits WooCommerce avec SeedProd, les images s'adaptent automatiquement pour s'ajuster à toute taille d'écran. Vous pouvez personnaliser les mises en page en colonnes et les tailles d'images directement dans l'éditeur glisser-déposer.

Pour un guide étape par étape, consultez notre guide sur la création d'une galerie d'images de produits dans WooCommerce.

FAQ sur la responsivité des galeries WordPress

Comment rendre une image réactive dans WordPress ?

WordPress ajoute automatiquement les attributs srcset et sizes aux images, ce qui indique au navigateur quelle taille d'image charger en fonction de la largeur de l'écran. Pour la plupart des sites, cela fonctionne dès le départ si vous utilisez un thème moderne. Si les images débordent de leur conteneur, l'ajout de max-width: 100%; height: auto; à votre CSS résout le problème.

Pourquoi ma galerie n'est-elle pas cliquable dans WordPress ?

La plupart des plugins de galerie sont configurés par défaut pour ne pas avoir de comportement de lien, ce qui signifie que les images ne s'ouvriront pas lorsqu'elles seront cliquées. Dans SeedProd, allez dans les paramètres de votre bloc de galerie et changez l'option 'Lien vers' en 'Fichier média' ou 'URL personnalisée'. Dans Envira Gallery, activez la lightbox sous l'onglet Lightbox pour rendre les images cliquables.

Puis-je rendre la galerie WordPress par défaut réactive sans plugin ?

Oui. Le bloc de galerie natif de WordPress génère déjà des images réactives à l'aide de srcset, et la plupart des thèmes modernes gèrent la mise à l'échelle automatiquement. Si les images ne s'affichent toujours pas correctement sur mobile, l'ajout de max-width: 100%; height: auto; en tant que CSS personnalisé résout généralement le problème sans nécessiter de plugin.

Une galerie réactive ralentira-t-elle mon site ?

Pas si vous activez le chargement différé dans votre plugin de galerie. Dans Envira Gallery, activez le chargement différé sous l'onglet Configuration. Les galeries SeedProd prennent également en charge le chargement différé par défaut. Garder les images en dessous de 200 Ko et utiliser le format WebP réduira davantage les temps de chargement.

En rendant votre galerie WordPress réactive, vos photos sont superbes sur tous les appareils et le référencement de votre site s'améliore en même temps. Les deux méthodes de ce guide vous donnent une conception prête pour le mobile en quelques minutes.

Commencez avec SeedProd et ayez votre galerie réactive en ligne dès aujourd'hui.

Vous pourriez également aimer les tutoriels WordPress suivants pendant que vous êtes ici :

• Comment ajouter une galerie aux pages et articles WordPress
• Page de destination vs Microsite : lequel convient le mieux à votre marque
• Comment personnaliser les extraits d'articles WordPress (sans code)
• Comment ajouter un bouton Tweet à WordPress (3 méthodes)

Merci de votre lecture ! Nous serions ravis d'entendre vos réflexions, alors n'hésitez pas à rejoindre la conversation sur YouTube, X et Facebook pour plus de conseils et de contenu utiles pour développer votre entreprise.