Il peut être frustrant de passer du temps à capturer de belles photos, pour ensuite les afficher dans une galerie basique qui ne leur rend pas justice. La galerie par défaut de WordPress semble souvent plate et oblige les utilisateurs à cliquer pour voir une version plus grande.
Un effet Lightbox résout ce problème en permettant aux visiteurs de voir vos images dans une superposition magnifique sans jamais quitter la page. Chez WPBeginner, nous utilisons Envira Gallery sur nos sites de test et nos projets clients car c'est le moyen le plus simple et le plus fiable de créer des galeries d'aspect professionnel.
Dans cet article, nous vous guiderons à travers les étapes simples pour ajouter un effet Lightbox à vos propres galeries WordPress.
Voici un aperçu rapide de ce que vous apprendrez dans ce tutoriel.
- Pourquoi ajouter l'effet Lightbox aux galeries WordPress ?
- Comment ajouter une galerie WordPress avec un effet Lightbox
- Alternative : Utiliser NextGen Gallery pour créer des portfolios et des galeries d'images dans WordPress
- Questions fréquemment posées sur les galeries Lightbox WordPress
Pourquoi ajouter l'effet Lightbox aux galeries WordPress ?
En ajoutant un effet Lightbox réactif aux galeries de votre site Web WordPress, vous pouvez présenter vos images de manière plus professionnelle. Cet effet vous permet d'afficher vos photos dans une fenêtre pop-up sur votre site Web lorsqu'un utilisateur clique dessus.
Les Lightboxes contribuent à créer une expérience de visionnage plus immersive pour vos visiteurs et leur permettent même de partager plus facilement vos images sur les réseaux sociaux ou de les télécharger sur leurs ordinateurs.
Si vous avez un site Web de photographie, l'ajout d'un effet Lightbox permettra aux utilisateurs de visualiser vos images haute résolution dans un mode sans distraction, augmentant ainsi l'engagement.
De même, si vous avez une boutique WooCommerce, l'ajout d'un effet lightbox à vos galeries de produits peut aider les clients à visualiser le produit de près et à prendre une décision éclairée.
Cela dit, voyons comment ajouter facilement une galerie d'images WordPress avec un effet lightbox, étape par étape.
Comment ajouter une galerie WordPress avec un effet Lightbox
La manière la plus simple d'ajouter une galerie lightbox est d'utiliser Envira Gallery. C'est le meilleur plugin de galerie WordPress du marché et celui que nous utilisons pour nos propres projets.
Il est livré avec un constructeur par glisser-déposer, des modèles professionnels et des fonctionnalités puissantes comme le partage social, le filigrane et, bien sûr, les lightboxes. Pour une analyse complète de ses fonctionnalités, vous pouvez lire notre examen complet d'Envira Gallery.
Envira Gallery est également super rapide et dispose d'un constructeur par glisser-déposer, de modèles de galerie professionnels et de nombreuses fonctionnalités, y compris l'ajout de tags, d'audio, le partage social et les lightboxes.
Tout d'abord, vous devez installer et activer le plugin Envira Gallery. Pour des instructions détaillées, consultez notre guide étape par étape sur comment installer un plugin WordPress.
Remarque : Envira Gallery dispose également d'un plugin gratuit que vous pouvez utiliser pour ce tutoriel. Cependant, la mise à niveau vers le plan payant vous donnera accès à plus de fonctionnalités.
Après l'activation, visitez la page Envira Gallery » Paramètres depuis la barre latérale d'administration de WordPress pour entrer la clé de licence.
Vous pouvez obtenir ces informations depuis votre compte sur le site Web d'Envira Gallery.
Ensuite, visitez la page Envira Gallery » Ajouter nouveau depuis le tableau de bord WordPress pour commencer à créer votre propre galerie.
À partir d'ici, tapez un titre pour la galerie d'images. Ensuite, cliquez sur le bouton « Sélectionner des fichiers depuis votre ordinateur » pour télécharger des images. Si vous souhaitez ajouter des images de la médiathèque à votre galerie, cliquez sur le bouton « Sélectionner des fichiers depuis d'autres sources ».
Cela lancera la médiathèque à partir de laquelle vous pouvez télécharger des images de galerie. N'oubliez pas que vous ne pouvez télécharger qu'une seule image de la médiathèque à la fois.
Une fois que vous avez terminé, faites défiler vers le bas jusqu'à la section « Actuellement dans votre galerie ». Ici, vous verrez un aperçu de votre galerie sur la droite avec les paramètres dans la colonne de gauche.
Maintenant, cliquez sur l'icône en forme de crayon en haut de chaque image pour ouvrir l'invite « Modifier les métadonnées » à l'écran.
À partir d'ici, vous pouvez ajouter la légende, le statut, le titre et le texte alternatif pour les images individuelles.
Après cela, n'oubliez pas de cliquer sur le bouton « Enregistrer les métadonnées » pour sauvegarder vos paramètres.
Ensuite, basculez vers l'onglet « Configuration » dans la colonne de gauche pour modifier la mise en page de votre galerie selon vos préférences. À partir d'ici, vous pouvez sélectionner une mise en page, le nombre de colonnes, la taille des images, les dimensions, les thèmes, et plus encore.
Pour des instructions détaillées, consultez notre guide pour débutants sur comment créer une galerie d'images dans WordPress.
Une fois que vous avez fait cela, basculez vers l'onglet « Lightbox » dans la colonne de gauche et cochez l'option « Activer la Lightbox ? ».
Après cela, sélectionnez un thème de lightbox dans le menu déroulant « Thème de la galerie Lightbox ». Si vous choisissez l'option « Héritage », l'invite de la lightbox aura une ancienne mise en page.
En choisissant l'option « Base (Sombre) », l'invite de la lightbox aura une base sombre comme mise en page.
Ensuite, vous devez sélectionner si vous souhaitez afficher le titre de l'image ou sa légende dans l'invite de la lightbox. Vous pouvez également afficher les deux ou aucun d'entre eux si vous le souhaitez.
Une fois que vous avez fait cela, choisissez la taille de l'image pour la lightbox dans le menu déroulant.
Après cela, cochez l'option « Activer les flèches de galerie ». L'invite de la lightbox affichera maintenant deux flèches que les spectateurs pourront utiliser pour passer à différentes images de votre galerie.
Vous pouvez également configurer d'autres paramètres pour votre lightbox, y compris son effet de transition, son effet d'ouverture/fermeture, activer le supersize de la lightbox, et plus encore.
Une fois que vous avez terminé, n'oubliez pas de cliquer sur le bouton « Publier » en haut pour enregistrer vos modifications.
Pour ajouter votre galerie d'images à une page/publication WordPress, ouvrez la page dans l'éditeur de blocs.
Ici, vous devez cliquer sur le bouton « + » pour ajouter un bloc dans le coin supérieur gauche de l'écran pour ouvrir le menu des blocs. Ensuite, ajoutez le bloc Envira Gallery à la page/publication.
Après cela, sélectionnez la galerie d'images que vous venez de créer dans le menu déroulant du bloc lui-même. Enfin, cliquez sur le bouton « Mettre à jour » ou « Publier » pour enregistrer vos paramètres.
Vous pouvez maintenant visiter votre blog WordPress pour voir la galerie d'images, puis cliquer sur n'importe quelle image pour voir l'effet lightbox.
Alternative : Utiliser NextGen Gallery pour créer des portfolios et des galeries d'images dans WordPress
Envira Gallery est la meilleure option pour ajouter des images en lightbox à votre site WordPress. Alternativement, vous pouvez utiliser NextGEN Gallery pour créer des galeries et des portfolios entièrement réactifs et visuellement attrayants sur votre site WordPress.
NextGEN Gallery est la meilleure alternative à Envira Gallery car elle prend en charge une large gamme de types de galeries, dispose de fonctionnalités liées au commerce électronique et vous permet d'ajouter des filigranes, des lightboxes, des commentaires d'images, et plus encore.
De plus, NextGEN Gallery vous permet d'accepter les paiements en ligne via Stripe ou PayPal, ce qui facilite la vente de vos images en ligne.
C'est un plugin de galerie avancé avec des fonctionnalités pour les photographes professionnels, les graphistes et les artistes visuels, ce qui en fait l'un des meilleurs plugins de portfolio WordPress sur le marché.
Pour des instructions détaillées, vous pouvez consulter notre tutoriel sur comment ajouter un portfolio à votre site WordPress.
Questions fréquemment posées sur les galeries Lightbox WordPress
Voici les réponses à certaines des questions les plus fréquentes que nous recevons concernant l'ajout d'un effet lightbox aux galeries WordPress.
Qu'est-ce qu'un effet lightbox dans WordPress ?
Un effet lightbox est une fonctionnalité qui affiche vos images dans une superposition qui remplit l'écran. Le reste du contenu de la page est estompé en arrière-plan.
Cela permet aux visiteurs de visualiser les médias en plus grand format sans avoir à naviguer vers une nouvelle page, créant ainsi une expérience utilisateur plus ciblée.
Quel est le meilleur plugin de galerie lightbox pour WordPress ?
D'après notre expérience, Envira Gallery est le meilleur plugin WordPress pour créer des galeries en lightbox. Il est incroyablement convivial pour les débutants, rapide et doté de fonctionnalités puissantes.
Pour les photographes professionnels qui ont besoin de fonctionnalités plus avancées pour les portfolios et les épreuves, NextGEN Gallery est une autre excellente alternative.
Puis-je ajouter une lightbox à la galerie WordPress par défaut sans plugin ?
Le bloc de galerie WordPress standard n'a pas de fonctionnalité de lightbox intégrée. Bien que vous puissiez en ajouter une en utilisant du code personnalisé, cela nécessite des connaissances en CSS et en JavaScript.
Pour la plupart des utilisateurs, l'utilisation d'un plugin dédié est la méthode la plus simple et la plus sûre pour obtenir un résultat professionnel sans toucher au code.
Une galerie en lightbox va-t-elle ralentir mon site web ?
Un plugin bien optimisé comme Envira Gallery est conçu pour la vitesse et ne devrait pas ralentir votre site web. Il utilise des fonctionnalités de performance comme le chargement différé des images.
Cependant, vous devriez toujours optimiser vos images pour le web avant de les télécharger sur WordPress afin d'assurer des temps de chargement les plus rapides possibles.
Nous espérons que cet article vous a aidé à apprendre comment ajouter facilement une galerie WordPress avec un effet lightbox. Vous pourriez également consulter notre guide pour débutants sur comment effectuer des modifications d'image de base dans WordPress et nos meilleurs choix pour les meilleurs outils pour créer de meilleures images pour vos articles de blog.
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.
Jiří Vaněk
Merci d'avoir recommandé Envira Gallery. Je crée des sites web sur Elementor, et à part Elementor, je ne connaissais que NextGen Gallery, qui ne répond pas entièrement à mes besoins. Je vais certainement essayer le plugin et probablement remplacer NextGen Gallery que j'utilise par celui-ci.
Muhammad Danial Emran
Bonjour, je voudrais savoir si l'utilisation d'un effet lightbox affectera la vitesse de mon site web.
Support WPBeginner
Cela ne devrait pas ralentir votre site.
Admin
Ahmed Omar
merci pour l'article, mais voici une question, est-ce que cela ferait une différence si j'utilisais l'éditeur de blocs WordPress pour ajouter une galerie de photos plutôt qu'Envira ?
Support WPBeginner
Envira has more tools and customization options than the default gallery
Admin
E
Je suis tellement contente d'avoir trouvé cet article et ce site. Je vous adore en ce moment !
Lynsey
Je vous aime ! Y a-t-il un moyen de rendre les miniatures plus petites ?
Personnel éditorial
Oui. Allez dans Réglages > Média. Modifiez la taille des miniatures. Ensuite, téléchargez un plugin appelé Regenerate thumbnails. Exécutez ce plugin, et c'est tout.
http://wordpress.org/extend/plugins/regenerate-thumbnails/
Admin
Sandeep Singh
Je suis vraiment reconnaissant pour la suggestion d'ajouter un effet Lightbox à la galerie. J'apprécie vraiment ce genre de soutien et j'espère la même chose pour l'avenir.
Mike
Bonjour,
C'est super, une question cependant : existe-t-il un plugin ou autre chose pour transformer la galerie en diaporama. Par exemple, que la première image jointe s'affiche en grand et qu'en dessous se trouvent les miniatures de toutes les images de la galerie, et que l'on puisse cliquer sur une image pour changer la grande image plutôt qu'un effet lightbox.
Merci,
Mike
Personnel éditorial
Pas sûr qu'un plugin comme celui-ci existe.
Admin
Renee
Je suis à peu près sûr que le plugin Fancybox fait cela. Vous pouvez activer ou désactiver la lightbox et les miniatures.
Emma Beatty Howells
Merci pour cette excellente solution. Je suis novice en tout cela et j'essaie de trouver le moyen le plus simple de gérer les galeries photo en ligne – ceci reste simple et élégant ! Autre chose que j'ai trouvé utile était une application qui ajoute des filigranes aux photos avec un minimum de tracas… ‘ImageBucket’.
Tiaan
Merci, ça marche du tonnerre !
Michael
Ça semble assez simple. Y a-t-il un moyen d'avoir des légendes sous chaque image ? Aussi, quand ça s'ouvre en lightbox, y a-t-il un moyen d'avoir un texte descriptif dans la lightbox avec l'image ?
Personnel éditorial
Ce plugin devrait pouvoir faire ce que vous cherchez : http://wordpress.org/extend/plugins/gallery-and-caption/
Admin
Alex
J'ai une bannière en haut de mon site web qui affiche une image. Quand la lightbox s'ouvre, la bannière apparaît toujours par-dessus. Y a-t-il un moyen, un code ou autre chose, qui arrêtera cela ?
Merci
Alex
Personnel éditorial
Cela se produit probablement parce que votre bannière a une valeur z-index très élevée. Diminuez cette valeur dans votre CSS. Il existe de nombreux tutoriels CSS couvrant le z-index sur le web.
Admin
JulieBozza
C'est une solution vraiment géniale, merci ! Tellement plus rapide et plus propre que ce que je faisais…
Y a-t-il cependant un moyen de choisir quelle image apparaît comme miniature principale ? C'est-à-dire, la miniature qui apparaît dans le « fil d'actualité » avant d'ouvrir la publication individuelle.
Merci d'avance !
wpbeginner
@JulieBozza La miniature du message est sélectionnée en utilisant la fonction Image mise en avant. Dans votre éditeur de message, regardez sur le côté droit, sous le bouton de publication, il devrait y avoir une boîte sur cette ligne appelée Image mise en avant.
JulieBozza
@wpbeginner Bonjour ! Merci pour votre réponse. Malheureusement, lorsque je fais cela, cela change l'image de la bannière, mais n'a aucun effet sur la miniature du message. J'utilise le thème WordPress Twenty Eleven, donc peut-être qu'il donne la priorité à la bannière, pour ainsi dire.
wpbeginner
@JulieBozza Vous faites référence à ces miniatures de galerie, n'est-ce pas ???
JulieBozza
@wpbeginner LOL ! Oui. J'ai créé l'article de la galerie exactement comme décrit ci-dessus.
Je ne sais pas si cela aiderait de visiter l'article lui-même, mais voici l'URL. Gardez à l'esprit que le site est en cours de développement ! http://rupertfyoung.com/2011/09/pierrefonds-september-2011/
wpbeginner
@JulieBozza La galerie fonctionne comme elle le devrait.
http://rupertfyoung.com/category/gallery/ << Si vous faites référence à l'image miniature ici, alors celle-ci est contrôlée par votre image mise en avant ou la première pièce jointe, je crois. Téléchargez une image mise en avant qui a une faible largeur (taille de vignette ou quelque chose comme ça)... Et elle ne prendra pas la place de l'image d'en-tête.
wpbeginner
@ukdazza Le problème vient de votre site plutôt que de ce plugin. Les problèmes de jQuery comme ceux-ci sont très courants. Il y a un autre jQuery qui empêche ce plugin de fonctionner. Vous devrez changer la position de l'autre code jQuery.
C'est un jeu d'essais et d'erreurs lorsque vous rencontrez des problèmes comme ceux-ci.
ukdazza
J'ai un problème où nous utilisons le plugin slickr flickr pour créer des galeries miniatures avec des fonctionnalités de lightbox. Cependant, la lightbox ne fonctionne pas du tout. Selon les notes que je trouve en ligne sur ce type de problème avec ce plugin, il est probable qu'il y ait plus d'une lightbox ou plus d'un jQuery en cours d'exécution - ce qui l'empêche de fonctionner correctement.
La lightbox ne fonctionne pas. Si vous cliquez sur une miniature, l'image s'ouvre dans le navigateur, ce qui est nul.
Des idées ? J'espérais que vous ou quelqu'un d'autre auriez une idée car j'ai essayé d'installer ce plugin et il a dit que la destination était déjà prise.
TGA
Ouah. Merci BEAUCOUP. J'utilisais NextGEN gallery, mais je n'étais pas autorisé à laisser mon client avoir des galeries avec des miniatures de différentes tailles. (Stupide). J'ai donc réalisé qu'en utilisant la galerie native, ce serait possible, mais alors Highslide ne créerait pas de visionneuse de miniatures comme il le ferait avec NextGEN. Le fait est que cela m'a sauvé la vie ! Ce n'est peut-être pas parfait, mais c'est UNE solution et maintenant je peux avancer sur le projet !
wpbeginner
@TejSanusi✔ Ce plugin permet aux utilisateurs de voir l'image suivante dans le cadre de la même lightbox.
TejSanusi✔
Y a-t-il un moyen de créer une galerie lightbox activée à partir d'une seule miniature. Lorsque l'utilisateur clique sur la miniature, la lightbox est créée, avec une série d'images de la galerie ?
cata
Le plugin mentionné dans l'article est assez intéressant. J'ai également testé avec de bons résultats celui-ci http://wordpress.org/extend/plugins/lightbox-gallery/
Chris
Merci pour cette excellente explication. Je l'ai trouvée extrêmement utile. J'ai cependant une question. Qu'en est-il si j'avais une assez grande galerie d'environ 40 ou 50 photos et que je ne voulais que l'une d'entre elles affichée dans l'article et que lorsque quelqu'un clique dessus, il puisse faire défiler toute la galerie ? Est-ce possible ? Je préférerais ne pas avoir les 40 photos affichées dans mon article et je pense que ce serait utile.
Merci !
Keith Davis
Bien joué les gars.
Je ne savais pas que Wordpress avait une fonction galerie... vous savez tout ?
Pourrait l'utiliser un jour.
jonathan perrodin
Merci pour cela, je voulais l'installer sur mon site, mais j'étais trop paresseux pour chercher un plugin qui le faisait simplement. C'était parfait.
Mike Roberts
Je suis artiste et illustrateur et je continue d'être déçu par les options d'affichage d'une galerie d'images dans WordPress. J'espère qu'un jour, un codeur brillant répondra à mon appel !
Gretchen
Je ne me rendais pas compte à quel point il était difficile de trouver un plugin lightbox qui utilise la fonction de galerie native de WordPress jusqu'à ce que je commence à en chercher un ! J'ai fini par utiliser http://wordpress.org/extend/plugins/lightbox-plus/ en raison de sa capacité à spécifier via un shortcode dans chaque galerie de publication/page si elle devait utiliser le réglage lightbox ou non. J'aime parfois utiliser les pages de pièces jointes, et j'avais besoin d'un plugin lightbox qui me permettrait de choisir quand l'utiliser. Je serais curieux de savoir si quelqu'un d'autre a trouvé un autre plugin lightbox avec cette fonctionnalité.
Bronson
Merci pour l'information.
C'est formidable de pouvoir appliquer l'effet lightbox aux galeries natives plutôt que de devoir les recréer manuellement.
Sonu
Comment cela fonctionne-t-il ? et avons-nous besoin d'une classe lightbox pour chaque image de la galerie ?
Personnel éditorial
Non, vous n'avez pas besoin d'ajouter la classe lightbox à chaque image de la galerie. Elle le fait automatiquement pour toutes les images de la galerie. La classe doit être ajoutée à toute autre image que vous avez en dehors de la galerie.
Admin
Binoy
Le problème ici est que toutes les images dans la publication apparaissent dans la galerie. Y a-t-il des options pour sélectionner les images ?
Personnel éditorial
Non, ce n'est pas encore possible.
Admin
Leo
Salut ! Pour sélectionner les images à afficher dans la galerie, essayez ce plugin : Multiple Galleries, vous pouvez le trouver ici > http://goo.gl/kNFer
Au revoir !
Personnel éditorial
Thanks for sharing this plugin. Updating the article to add this
Preston
Chaque image devrait avoir une sorte de numéro WordPress associé. J'exclus les images de la galerie avec ce code, j'espère que cela fonctionnera pour vous :
[gallery link="file" exclude="Photo#, Photo#, Photo#"]