Comment ajouter une lightbox dans WordPress (3 méthodes, y compris celle intégrée et gratuite) 

Vous déposez quelques images sur une page, et cliquer sur l’une d’elles ne fait rien ou envoie le visiteur sur une page de pièce jointe disgracieuse. Ce que vous voulez vraiment, c’est une lightbox, où l’image s’ouvre dans une fenêtre contextuelle propre et où le reste de la page s’assombrit derrière.

J’ai tenu un blog de décoration intérieure pendant des années, donc je sais à quel point un portfolio vit ou meurt en fonction de la façon dont les images s’affichent. Dans ce guide, je vais vous montrer trois façons de créer une lightbox dans WordPress, en commençant par l’option intégrée gratuite que la plupart des guides ignorent.

Qu’est-ce qu’une lightbox (et quand devriez-vous en utiliser une) ?

Une lightbox dans WordPress est une superposition contextuelle qui agrandit une image, une vidéo ou un contenu lorsque le visiteur clique dessus, assombrissant le reste de la page pour que le contenu soit au centre de l’attention.

Utilisez une lightbox chaque fois que vous souhaitez que les visiteurs se concentrent sur un élément de contenu sans quitter la page. Cela maintient l’engagement des visiteurs et évite des chargements de page supplémentaires.

Les utilisations courantes d'une lightbox WordPress incluent :

• Présenter des portfolios de photographie ou de création
• Afficher des images de produits avec plus de détails
• Mettre en évidence des captures d'écran, des maquettes de conception ou des exemples de travaux
• Lire des vidéos de YouTube ou Vimeo de manière sans distraction

Vous pouvez également utiliser des lightboxes pour les formulaires d’inscription ou les annonces importantes. Comme l’arrière-plan s’assombrit, les visiteurs sont plus susceptibles de remarquer le message et d’agir en conséquence.

Quelle méthode de lightbox devriez-vous utiliser ?

Si vous avez juste besoin d’une lightbox sur une seule galerie, l’option intégrée gratuite est généralement suffisante. Choisissez SeedProd lorsque vous créez des pages ou un thème visuellement, et Envira lorsque vous souhaitez des contrôles de galerie avancés comme les légendes et les effets de transition.

Méthode	Idéal pour	Plugin nécessaire ?
Lightbox intégrée à WordPress	Une lightbox rapide sur une seule image ou galerie	Non
SeedProd	Création de pages ou d’un thème complet visuellement	Oui (SeedProd)
Galerie Envira	Contrôle et personnalisation avancés de la galerie	Oui (Envira)

Méthode 1 : Utiliser la lightbox intégrée à WordPress (sans plugin)

La façon la plus rapide d’ajouter une lightbox est celle intégrée à WordPress. Depuis la version 6.4, le bloc d’image dispose d’une option intégrée Agrandir au clic qui ouvre les images dans une lightbox native, sans plugin.

Vous aurez besoin de WordPress 6.4 ou une version ultérieure et de l’éditeur de blocs. L’éditeur classique n’a pas cette option.

Voici la partie qui pose problème : il s’agit d’une option de lien, et non d’un basculement de barre latérale. Ajoutez un bloc Image, sélectionnez l’image, puis cliquez sur l’icône de lien (chaîne) dans la barre d’outils du bloc.

Dans la fenêtre contextuelle qui s’ouvre, activez Agrandir au clic.

Enregistrez la page, et cette image s’ouvre maintenant dans une lightbox agrandie.

Un inconvénient honnête : c’est fiable pour les images uniques, mais pas pour le bloc Galerie. WordPress a ajouté l’option au bloc Image en premier, et sur de nombreuses versions, elle est toujours absente des galeries.

Donc, si vous voulez une lightbox pour toute une galerie, ne vous battez pas avec l’option intégrée. Utilisez l’une des méthodes de plugin ci-dessous, qui gèrent correctement les galeries.

Je l’utilise chaque fois que j’ai juste besoin qu’une seule image s’agrandisse, car il n’y a rien à installer, mettre à jour ou ralentir la page. La limite est le contrôle que vous avez.

Vous obtenez une fenêtre contextuelle propre, mais pas de légendes, de thèmes ou d’effets de transition, et pas de véritable support de galerie. Pour ceux-là, vous voudrez l’une des deux méthodes suivantes.

Méthode 2 : Créer une lightbox dans WordPress avec SeedProd

Si vous concevez une page ou un thème entier, SeedProd vous permet d’activer la lightbox pendant que vous construisez, afin que vous puissiez la voir fonctionner en direct sans toucher au code. SeedProd est un constructeur de sites Web WordPress par glisser-déposer, et son bloc Image a une option de lightbox intégrée.

Outil	constructeur de site Web WordPress
Tarifs	Options gratuites et payantes disponibles
Version gratuite	Oui
Fonctionnalités remarquables	Éditeur visuel par glisser-déposer, bascule de lightbox d’image intégrée, convivial pour les débutants
Idéal pour	Débutants qui veulent un moyen sans code d’ajouter une lightbox WordPress

SeedProd est livré avec des kits de site Web et des modèles de page de destination pré-faits, vous pouvez donc créer un design en quelques clics et le personnaliser avec le constructeur par glisser-déposer.

Avec le bloc Image de SeedProd, vous pouvez activer une lightbox pour afficher de grandes versions de vos images de galerie, et c’est la fonctionnalité que nous allons configurer ensuite.

Étape 1 : Installer et activer SeedProd

Tout d’abord, rendez-vous sur la page de tarification de SeedProd, choisissez un plan de licence et créez votre compte SeedProd. Une fois dans votre tableau de bord de compte, allez dans l’onglet Téléchargements et téléchargez le fichier du plugin SeedProd sur votre ordinateur.

Pendant que vous y êtes, copiez la clé de licence, car vous en aurez besoin sous peu.

Après avoir téléchargé le plugin, installez-le et activez-le sur votre site Web WordPress. Vous pouvez suivre ce tutoriel sur l'installation d’un plugin WordPress si vous n’avez jamais fait cela auparavant.

Lorsque SeedProd est actif, allez dans SeedProd » Paramètres et collez la clé de licence que vous avez copiée précédemment. Cliquez sur le bouton Vérifier la clé et passez à l’étape suivante.

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

L’étape suivante consiste à commencer à créer votre thème WordPress ou votre page de destination. SeedProd vous permet de faire les deux, voici donc la différence :

• Constructeur de thème : Le Constructeur de thème remplace votre thème WordPress actuel par un thème personnalisé. Choisissez parmi de nombreux kits de site Web, installez un design en un clic, puis personnalisez chaque partie visuellement.
• Générateur de pages de destination : Le Générateur de pages de destination crée des pages autonomes qui fonctionnent en parallèle avec votre thème actuel. Choisissez un modèle réactif, puis personnalisez-le avec le générateur par glisser-déposer.

Les deux vous permettent d'ajouter des galeries d'images, alors choisissez celui qui correspond à vos besoins. Si vous avez besoin d'aide pour commencer, voici des tutoriels sur la création d'un thème WordPress personnalisé et la création d'une page de destination avec SeedProd.

Étape 3 : Décidez où ajouter votre galerie

Décidez maintenant où vous souhaitez placer la galerie d'images. Pour ce guide, je crée une page de portfolio de design d'intérieur avec le générateur de thème, donc je vais modifier la page avec SeedProd pour ouvrir le générateur par glisser-déposer.

Lorsque votre design s'ouvre, vous verrez des blocs et des sections à gauche et un aperçu en direct à droite. Vous pouvez déplacer des éléments en cliquant, en faisant glisser et en déposant.

Commencez par ajouter une nouvelle colonne pour vos images de portfolio. Dans la barre latérale, faites glisser le bloc Colonnes sur votre page et choisissez une disposition.

Ensuite, faites glisser le bloc Image dans chaque colonne.

Cliquez sur chaque bloc d'image et téléchargez une image depuis votre ordinateur ou votre médiathèque.

Ajoutez maintenant la galerie à chaque image. Cliquez sur un bloc d'image, trouvez l'en-tête Type de lien et sélectionnez Média – Galerie dans le menu déroulant.

Répétez cette opération pour chaque image de votre galerie, puis cliquez sur le bouton Enregistrer dans le coin supérieur droit.

Étape 4 : Publiez vos modifications

La dernière étape consiste à publier votre galerie. Pour un thème personnalisé, allez dans SeedProd » Générateur de thème et activez le bouton « Activer le thème SeedProd » sur « Oui ».

Si vous publiez une page de destination, ouvrez-la dans le générateur de pages, cliquez sur la flèche déroulante du bouton Enregistrer et sélectionnez Publier.

Affichez maintenant votre nouveau design pour voir à quoi il ressemble.

Cliquez sur n'importe quelle image de votre galerie, et elle s'ouvre dans une galerie plein écran réactive.

Méthode 3 : Créer une lightbox à l’aide d’un plugin de galerie

Pour plus de contrôle sur l'apparence et le comportement de votre galerie, utilisez un plugin de galerie WordPress. J'utiliserai Envira Gallery, l'un des plugins de galerie les plus populaires pour WordPress et un outil que je connais bien dans l'écosystème WordPress.

Outil	Plugin Envira Gallery
Tarifs	À partir de 39,50 $/an (normalement 79 $)
Version gratuite	Oui, Envira Gallery Lite
Fonctionnalités remarquables	Générateur de galerie par glisser-déposer, paramètres de galerie intégrés, modèles réactifs pour mobile
Idéal pour	Utilisateurs ayant besoin d'une personnalisation avancée de la galerie

Avec ce plugin de galerie d'images léger, vous pouvez créer des galeries optimisées pour les articles, les pages, les zones de widgets et les barres latérales. Il est également optimisé pour la vitesse, de sorte que vos images se chargent rapidement pour les visiteurs.

Commencez par installer et activer le plugin Envira Gallery. Ensuite, allez dans Envira Gallery » Ajouter nouveau pour créer une nouvelle galerie.

Ajoutez des images en cliquant sur Sélectionner des fichiers sur votre ordinateur. Pour utiliser des images déjà présentes dans votre médiathèque, cliquez plutôt sur Sélectionner des fichiers d’autres sources.

Après avoir ajouté des images, vous pouvez les réorganiser en faisant glisser et déposer les miniatures. Cliquez ensuite sur l’onglet Configuration pour configurer votre galerie.

Sur cet écran, vous pouvez :

• Changer le nombre de colonnes de la galerie
• Activer le chargement différé des images
• Afficher la description de la galerie
• Activer les titres et les légendes
• Définir la taille de l'image et la position du recadrage
• Changer le thème de la galerie
• Ajustez les marges et le remplissage

Ensuite, cliquez sur l’onglet Lightbox pour configurer la lightbox elle-même.

Assurez-vous que l’option Activer la Lightbox est cochée. À partir de là, vous pouvez changer le thème de la lightbox, afficher les légendes, ajouter des effets de transition, et plus encore.

Lorsque vous êtes satisfait des paramètres, cliquez sur le bouton Publier dans le coin supérieur droit.

Pour montrer la galerie aux visiteurs, modifiez un article ou une page, cliquez sur l’icône plus (+) dans l’éditeur de blocs, recherchez le bloc Envira Gallery et ajoutez-le.

Choisissez votre galerie dans le menu déroulant pour la prévisualiser.

Cliquez sur Mettre à jour ou Publier pour enregistrer vos modifications. Lorsque vous prévisualisez la page, votre galerie devrait ressembler à ceci :

Cliquez sur n’importe quelle image pour la voir dans une galerie lightbox réactive comme celle-ci :

Bonus : Ajouter Envira Gallery aux pages SeedProd

Si vous créez des pages avec SeedProd, vous pouvez intégrer directement vos lightboxes Envira Gallery dans n’importe quelle page ou modèle. Cela signifie pas de shortcodes et pas d’étapes supplémentaires.

1. Ouvrez votre page ou modèle SeedProd dans l'éditeur glisser-déposer.
2. Recherchez le bloc Envira Gallery dans la barre latérale et faites-le glisser sur votre page.
3. Choisissez votre galerie dans le menu déroulant et ajustez les paramètres d’affichage.

Cela combine le constructeur de pages flexible de SeedProd avec les fonctionnalités de lightbox d’Envira, vous permettant de créer des galeries d’images soignées sur n’importe quelle page de votre site.

Pourquoi ma lightbox ne fonctionne-t-elle pas ?

Si vous cliquez sur une image et que la lightbox ne s’ouvre pas, la cause est généralement l’une des choses courantes. Effectuez ces vérifications :

• Cible de lien incorrecte : Chaque image doit pointer vers son fichier média, pas vers sa page d’attachement. Un lien vers une page d’attachement renvoie les visiteurs vers une page séparée au lieu d’ouvrir la fenêtre contextuelle.
• Conflit de thème ou de plugin : Si votre thème ou un autre plugin de galerie ajoute également une lightbox, les deux scripts peuvent entrer en conflit. Désactivez l’un et testez à nouveau.
• Mise en cache : Un plugin de mise en cache ou un CDN peut servir une ancienne version de la page. Videz votre cache, puis rechargez.
• Comportement mobile : Testez toujours la lightbox sur un téléphone ou une tablette, car le comportement tactile peut différer des clics sur ordinateur.

FAQ sur la création d'une lightbox dans WordPress

WordPress a-t-il une lightbox intégrée ?

Oui. Depuis WordPress 6.4, les blocs d’image et de galerie de base incluent un interrupteur « Agrandir au clic » dans le panneau des paramètres. Activez-le et vos images s’ouvriront dans une lightbox native sans avoir besoin de plugin.

Comment ajouter une lightbox à une galerie WordPress sans plugin ?

Ajoutez un bloc de galerie de base à votre article ou page et téléchargez vos images. Sélectionnez le bloc, ouvrez le panneau des paramètres et activez « Agrandir au clic ». Enregistrez la page, et cliquer sur n’importe quelle image l’ouvre dans une lightbox plein écran.

Pourquoi ma lightbox WordPress ne fonctionne-t-elle pas ?

La cause la plus fréquente est que l'image renvoie à sa page de pièce jointe au lieu de son fichier multimédia. Configurez chaque image pour qu'elle renvoie au fichier multimédia. Un conflit de thème ou de plugin, ou une ancienne page mise en cache, peut également l'arrêter, désactivez donc les scripts de lightbox conflictuels et videz votre cache.

Puis-je utiliser une lightbox pour les vidéos ainsi que pour les images ?

Oui. De nombreux outils de lightbox ouvrent les vidéos YouTube ou Vimeo dans une fenêtre contextuelle, tout comme les images. C'est un bon moyen de montrer des démonstrations de produits ou des tutoriels sans envoyer les visiteurs hors de votre site.

Quel est le meilleur plugin de lightbox WordPress gratuit ?

Les options gratuites populaires incluent Envira Gallery Lite, Simple Lightbox et WP Featherlight. Elles sont faciles à utiliser et couvrent les paramètres de base de la lightbox. Vous pouvez passer à une version payante plus tard pour des fonctionnalités avancées.

Ajoutez votre lightbox WordPress dès aujourd'hui

Cette page de pièce jointe disgracieuse est maintenant une fenêtre contextuelle épurée qui maintient les visiteurs sur votre contenu. Choisissez la méthode qui convient à votre site, qu'il s'agisse du basculement intégré gratuit, de SeedProd ou d'Envira, et vous aurez une lightbox fonctionnelle en quelques minutes.

Voici d'autres tutoriels utiles que vous pourriez aimer :

• Comment ajouter une galerie aux articles et pages WordPress
• Comment créer des onglets dans WordPress pour un contenu tabulé époustouflant
• Comment ajouter un bouton Tweet à WordPress (3 méthodes)
• Comment ajouter un bouton d'ajout au panier personnalisé dans WooCommerce

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.