Voulez-vous créer une lightbox dans WordPress sans ralentir votre site web ou écrire du code ?
Une lightbox permet aux visiteurs de cliquer sur une image ou une vidéo et de la visualiser dans une fenêtre contextuelle sans distraction, au lieu d'un nouvel onglet. Cela rend vos galeries plus professionnelles, améliore l'expérience utilisateur et maintient les visiteurs plus longtemps sur votre site.
Dans ce guide, je vais vous montrer deux méthodes simples pour ajouter une lightbox WordPress étape par étape afin que vous puissiez choisir celle qui convient le mieux à votre site.
Étapes rapides pour créer une lightbox dans WordPress :
Qu'est-ce qu'une lightbox dans WordPress ?
Une lightbox est une fenêtre contextuelle qui apparaît par-dessus votre page lorsqu'un visiteur clique sur une image, une vidéo ou un lien. Le reste de la page est assombri en arrière-plan, faisant du contenu à l'intérieur de la lightbox le point central.
Cette fonctionnalité est populaire car elle :
- Permet aux utilisateurs de visualiser des versions plus grandes des images sans quitter la page
- Réduit les distractions en maintenant l'arrière-plan grisé
- Crée une expérience de galerie plus professionnelle et soignée
Les lightboxes sont souvent utilisées pour les galeries d'images, les photos de produits, les vidéos et même les formulaires d'inscription. Une fois que les visiteurs ont terminé, ils cliquent simplement sur le bouton de fermeture pour revenir à la page principale.
Quand devriez-vous utiliser une lightbox dans WordPress ?
Une lightbox est un bon choix chaque fois que vous souhaitez que les visiteurs se concentrent sur un élément de contenu sans quitter la page. Ceci est particulièrement utile si vous souhaitez maintenir l'engagement des visiteurs et réduire les chargements de pages 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 le reste de la page s'assombrit en arrière-plan, les visiteurs sont plus susceptibles de remarquer et d'interagir avec le message.
Comment créer une lightbox dans WordPress avec SeedProd
Tout d'abord, nous allons vous montrer comment créer une lightbox d'image dans WordPress avec SeedProd, le meilleur constructeur de sites web WordPress.
| Outil : Constructeur de pages WordPress |
| Tarifs : Variable (options gratuites et payantes disponibles) |
| Version gratuite : Oui |
| Fonctionnalités remarquables : 🔹 Éditeur visuel glisser-déposer 🔹 Activation facile de la lightbox d'image 🔹 Rapide et adapté aux débutants |
| Idéal pour : Les débutants qui souhaitent un moyen sans code d'ajouter une lightbox WordPress |
SeedProd est livré avec des kits de site web et des modèles de pages de destination préconçus qui vous permettent de créer un design de site web WordPress en quelques clics. Vous pouvez ensuite personnaliser votre site web avec son constructeur de pages glisser-déposer et ses blocs et sections WordPress personnalisables.
Avec le bloc d'images de SeedProd, vous pouvez activer une lightbox pour afficher de grandes versions de vos images de galerie WordPress, et ce sont ces fonctionnalités que nous allons présenter dans le tutoriel suivant.
Avant de continuer, voici ce que vous pouvez faire d’autre avec SeedProd :
- Créez des pages de destination qui convertissent, y compris (404, ventes, squeeze, webinaire, remerciement et connexion)
- Créez un site WooCommerce personnalisé pour votre boutique en ligne
- Contrôlez qui peut contourner votre page de mode « en construction » ou « maintenance »
- Personnalisez vos pages de destination avec du texte dynamique
- Développez votre liste d’e-mails grâce aux intégrations de marketing par e-mail et au tableau de bord de gestion des abonnés
- Et bien plus encore.
É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, accédez à 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 WordPress. Vous pouvez suivre ce tutoriel sur l’installation d’un plugin WordPress si vous n’avez jamais fait cela auparavant.
Lorsque le plugin SeedProd est actif sur votre site, accédez à SeedProd » Paramètres et collez la clé de licence que vous avez copiée précédemment dans le champ approprié. Cliquez maintenant sur le bouton Vérifier la clé et passez à l’étape suivante.
Étape 2. Créer un thème ou une page de destination WordPress
L’étape suivante consiste à commencer à créer votre thème WordPress ou votre page de destination. Le plugin SeedProd vous permet de faire les deux, mais si vous n’êtes pas sûr de l’option à utiliser, voici une explication :
- Constructeur de thème – Avec le constructeur de thème, vous pouvez remplacer votre thème WordPress actuel par un nouveau thème personnalisé. Vous pouvez choisir parmi de nombreux kits de sites Web préconçus et installer votre conception en 1 clic. SeedProd créera ensuite toutes les parties de votre thème, vous permettant de les personnaliser visuellement avec son constructeur de pages.
- Constructeur de pages de destination – Le constructeur de pages de destination vous permet de créer des pages de destination autonomes qui fonctionnent avec votre thème WordPress actuel. Vous pouvez choisir parmi divers modèles de pages de destination réactifs, puis les personnaliser avec le constructeur de pages par glisser-déposer.
Les deux solutions vous permettent d’ajouter des lightboxes d’images à votre conception, alors choisissez celle qui correspond le mieux à vos besoins. Si vous avez besoin d’aide pour commencer, voici quelques tutoriels sur la création d’un thème WordPress personnalisé et la création d’une page de destination avec SeedProd.
Une fois que vous avez choisi vos modèles et créé le cadre de votre page de destination ou de votre thème, vous pouvez suivre l’étape 3 ci-dessous pour ajouter une lightbox d’image à votre conception.
Étape 3. Décidez où ajouter votre lightbox d'image
Il est maintenant temps de décider où vous souhaitez ajouter votre lightbox d’image WordPress.
Pour ce guide, nous créons un site Web de design d’intérieur avec une page de portfolio personnalisée à l’aide du constructeur de thème, nous allons donc modifier la page avec SeedProd pour ouvrir le constructeur par glisser-déposer.
Lorsque vous ouvrez votre conception, vous verrez une disposition à 2 colonnes avec des blocs et des sections à gauche et un aperçu de la conception à droite. Vous pouvez déplacer des éléments dans votre aperçu en cliquant, en faisant glisser et en déposant.
Commençons par ajouter une nouvelle colonne pour les images de notre portfolio. Depuis la barre latérale, faites glisser le bloc Colonnes sur votre page et choisissez un design de mise en page.
Ensuite, faites glisser le bloc Image dans chaque colonne de la section de la page.
À partir de là, vous pouvez cliquer sur chaque bloc d'image et télécharger une image depuis votre ordinateur ou votre médiathèque WordPress.
Vous pouvez maintenant ajouter une lightbox à chaque image de votre galerie. Pour ce faire, cliquez simplement sur n'importe quel bloc d'image, trouvez le titre « Type de lien » et sélectionnez l'option Média – Lightbox dans le menu déroulant.
Répétez cette opération pour chaque lien d'image de votre galerie, puis cliquez sur le bouton Enregistrer dans le coin supérieur droit pour sauvegarder vos modifications.
Étape 4. Publiez vos modifications
La dernière étape consiste à publier votre galerie lightbox réactive sur votre site Web WordPress. Pour ce faire avec un thème WordPress personnalisé, allez dans SeedProd » Theme Builder depuis votre administration WordPress, et activez le bouton « Activer le thème SeedProd » sur « Oui ».
Si vous publiez une page de destination, ouvrez-la dans le constructeur de pages, cliquez sur la flèche déroulante du bouton Enregistrer et sélectionnez Publier.
Vous pouvez maintenant afficher votre nouvelle conception pour voir à quoi elle ressemble.
Et lorsque vous cliquerez sur une image de votre galerie, vous ouvrirez une lightbox d'image plein écran réactive.
Comment créer une lightbox d'image à l'aide d'un plugin de galerie
Une autre façon d'ajouter une lightbox d'image à votre site WordPress est d'utiliser un plugin de galerie d'images WordPress. Pour cette méthode, nous utiliserons Envira Gallery, l'un des plugins de galerie les plus populaires pour WordPress.
| Outil : Plugin Envira Gallery |
| Tarifs : À partir de 26 $/an |
| Version gratuite : Oui |
| Fonctionnalités remarquables : 🔹 Constructeur de galerie par glisser-déposer 🔹 Paramètres de lightbox intégrés 🔹 Modèles réactifs pour mobile |
| Idéal pour : Les utilisateurs qui ont besoin d'une personnalisation avancée de la galerie |
Avec ce plugin de galerie d'images léger et par glisser-déposer, vous pouvez créer des galeries d'images optimisées pour les articles, les pages, les zones de widgets et les barres latérales. Le plugin est également facile à utiliser et optimisé pour la vitesse, de sorte que vos images se chargeront rapidement pour les visiteurs du site Web.
Commencez par installer et activer le plugin Envira Gallery sur votre site Web WordPress. Ensuite, accédez à Envira Gallery » Ajouter nouveau pour créer une nouvelle galerie d'images.
Vous pouvez ajouter des images à votre galerie en cliquant sur le bouton Sélectionner des fichiers sur votre ordinateur. Cependant, si vous souhaitez utiliser des images de votre médiathèque, cliquez sur le bouton Sélectionner des fichiers d'autres sources.
Après avoir ajouté des images à votre galerie, vous pouvez les réorganiser en faisant glisser les miniatures.
Cliquez maintenant sur l'onglet Configuration pour configurer les paramètres de 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
- Ajuster les marges et les espacements
Ensuite, cliquez sur l'onglet Lightbox, qui sert à personnaliser les paramètres de la lightbox.
Tout d'abord, assurez-vous que l'option Activer la Lightbox est cochée, puis ajustez les paramètres pour modifier votre thème de lightbox, afficher les légendes, ajouter des effets de transition, et plus encore.
Lorsque vous êtes satisfait des paramètres de votre galerie, cliquez sur le bouton Publier dans le coin supérieur droit.
Pour afficher votre galerie aux visiteurs de 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 WordPress.
Recherchez ou faites défiler jusqu'à ce que vous voyiez le bloc Envira Gallery, et cliquez dessus pour l'ajouter à votre page.
Ensuite, choisissez votre galerie dans le menu déroulant pour prévisualiser votre galerie lightbox.
Vous pouvez ensuite cliquer sur le bouton Mettre à jour ou Publier pour enregistrer vos modifications.
Lorsque vous prévisualisez votre page, votre galerie devrait ressembler à cet exemple :
Vous pouvez ensuite cliquer 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 vos pages WordPress avec SeedProd, vous pouvez facilement ajouter vos galeries lightbox Envira Gallery directement dans n'importe quelle page ou modèle. Cela permet de présenter facilement vos images de manière professionnelle sans utiliser de shortcodes ou d'étapes supplémentaires.
- Ouvrez votre page ou modèle SeedProd dans l'éditeur glisser-déposer.
- Recherchez le bloc Envira Gallery dans la barre latérale et faites-le glisser sur votre page.
- Choisissez votre galerie dans le menu déroulant et ajustez les paramètres d'affichage.
Cette intégration vous permet de combiner l'éditeur de pages flexible de SeedProd avec les puissantes fonctionnalités de lightbox d'Envira Gallery, afin que vous puissiez créer de magnifiques galeries d'images qui convertissent sur n'importe quelle page de votre site.
FAQ sur la création d'une lightbox dans WordPress
Ajouter une lightbox à votre site WordPress est l'un des moyens les plus simples de rendre vos images, vidéos ou galeries plus professionnelles. Cela permet aux visiteurs de se concentrer sur votre contenu et les empêche de quitter la page inutilement.
Que vous utilisiez un constructeur de pages ou un plugin de galerie, la configuration ne prend que quelques minutes. Choisissez la méthode qui convient le mieux à votre site, suivez les étapes, et vous aurez une lightbox WordPress fonctionnelle prête à l'emploi.
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.
