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 l'afficher dans une fenêtre contextuelle sans distraction, au lieu d'un nouvel onglet. Cela donne à vos galeries un aspect plus professionnel, améliore l'expérience des utilisateurs et les incite à rester plus longtemps sur votre site.
Dans ce guide, je vous montrerai deux façons simples d'ajouter une lightbox WordPress, étape par étape, afin que vous puissiez choisir la méthode qui convient le mieux à votre site.
Etapes rapides pour créer une boîte à lumière dans WordPress :
Qu'est-ce qu'une boîte à lumière dans WordPress ?
Une lightbox est une fenêtre contextuelle qui apparaît en haut de votre page lorsqu'un visiteur clique sur une image, une vidéo ou un lien. Le reste de la page est masqué en arrière-plan, ce qui permet de mettre l'accent sur le contenu de la fenêtre.
Cette fonction est très appréciée parce qu'elle
- Permet aux utilisateurs de visualiser des versions plus grandes des images sans quitter la page
- Réduit les distractions en gardant l'arrière-plan grisé
- Crée une expérience de galerie plus professionnelle et plus soignée
Les boîtes lumineuses sont souvent utilisées pour les galeries d'images, les photos de produits, les vidéos et même les formulaires d'opt-in. Une fois que les visiteurs ont terminé, il leur suffit de cliquer sur le bouton de fermeture pour revenir à la page principale.
Quand utiliser une boîte lumineuse dans WordPress ?
Une boîte lumineuse est un bon choix chaque fois que vous souhaitez que les visiteurs se concentrent sur un élément de contenu sans quitter la page. C'est particulièrement utile si vous souhaitez maintenir l'attention des visiteurs et réduire le nombre de pages chargées.
Les utilisations courantes d'une boîte à lumière WordPress sont les suivantes
- Présentation de photographies ou de portfolios créatifs
- Afficher les images des produits avec plus de détails
- Mise en évidence de captures d'écran, de maquettes de conception ou d'exemples de travaux
- Lire des vidéos de YouTube ou Vimeo sans se laisser distraire
Vous pouvez également utiliser des boîtes lumineuses pour les formulaires d'inscription ou les annonces importantes. Comme le reste de la page s'estompe en arrière-plan, les visiteurs sont plus susceptibles de remarquer le message et d'interagir avec lui.
Comment créer une boîte à lumière dans WordPress en utilisant SeedProd
Tout d'abord, nous allons vous montrer comment créer une image lightbox dans WordPress avec SeedProd, le meilleur constructeur de sites web WordPress.
| Outil : Constructeur de pages WordPress |
| Prix : Variable (options gratuites et payantes disponibles) |
| Version gratuite : Oui |
| Caractéristiques : 🔹 Éditeur visuel par glisser-déposer 🔹 Basculement facile de la boîte à lumière 🔹 Rapide et convivial pour les débutants |
| Le meilleur pour : Les débutants qui veulent un moyen sans code d'ajouter une lightbox WordPress |
SeedProd est livré avec des kits de sites web et des modèles de pages d'atterrissage prédéfinis qui vous permettent de créer un site web WordPress en quelques clics. Vous pouvez ensuite personnaliser votre site web grâce à son constructeur de pages drag-and-drop et à ses blocs et sections WordPress personnalisables.
Avec le bloc Image de SeedProd, vous pouvez activer une boîte à lumière pour afficher des versions agrandies des images de votre galerie WordPress, et ce sont ces fonctionnalités que nous allons présenter dans le tutoriel suivant.
Avant de poursuivre, voici ce que vous pouvez faire d'autre avec SeedProd :
- Créer des pages d'atterrissage qui convertissent, y compris (404, ventes, squeeze, webinaire, merci, et connexion)
- Créez un site WooCommerce personnalisé pour votre boutique en ligne
- Contrôler qui peut contourner votre page " bientôt" ou "en mode maintenance".
- Personnalisez vos pages d'atterrissage avec du texte dynamique
- Développez votre liste d'adresses électroniques grâce aux intégrations de marketing par courriel et au tableau de bord de gestion des abonnés.
- Et bien d'autres choses 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 que vous êtes dans le tableau de bord de votre 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 prochainement.
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 ne l'avez jamais fait auparavant.
Lorsque le plugin SeedProd est actif sur votre site, naviguez vers SeedProd " Settings et collez la clé de licence que vous avez copiée plus tôt 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 WordPress ou une page d'atterrissage
L'étape suivante est de commencer à construire votre thème WordPress ou votre page d'atterrissage. Le plugin SeedProd vous permet de faire les deux, mais si vous n'êtes pas sûr de l'option à utiliser, voici une explication :
- Theme Builder - Avec le Theme Builder, 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é-faits et installer votre design en 1 clic. SeedProd créera alors toutes les parties de votre thème, vous permettant de les personnaliser visuellement avec son constructeur de pages.
- Landing Page Builder - Le Landing Page Builder vous permet de créer des pages d'atterrissage autonomes qui fonctionnent avec votre thème WordPress actuel. Vous pouvez choisir parmi différents modèles de pages d'atterrissage réactives, puis les personnaliser à l'aide du constructeur de pages par glisser-déposer.
Les deux solutions vous permettent d'ajouter des boîtes lumineuses à votre design, alors choisissez celle qui répond 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 construction d'une page d'atterrissage avec SeedProd.
Une fois que vous avez choisi vos modèles et construit le cadre de votre page d'atterrissage ou de votre thème, vous pouvez suivre l'étape 3 ci-dessous pour ajouter une image lightbox à votre design.
Étape 3. Décidez de l'emplacement de votre Image Lightbox
Il est maintenant temps de décider où vous souhaitez ajouter votre boîte à lumière WordPress.
Pour ce guide, nous créons un site web de décoration d'intérieur avec une page de portfolio personnalisée en utilisant le constructeur de thème, nous allons donc éditer la page avec SeedProd pour ouvrir le constructeur par glisser-déposer.
Lorsque vous ouvrez votre dessin ou modèle, vous voyez une disposition en deux colonnes avec des blocs et des sections sur la gauche et un aperçu du dessin ou modèle sur la droite. Vous pouvez déplacer les éléments dans l'aperçu en cliquant, en faisant glisser et en déposant.
Commençons par ajouter une nouvelle colonne pour les images de notre portfolio. Dans la barre latérale, faites glisser le bloc Colonnes sur votre page et choisissez une mise en page.
Ensuite, faites glisser le bloc Image vers chaque colonne de la section de la page.
De là, vous pouvez cliquer sur chaque bloc d'image et télécharger une image depuis votre ordinateur ou la bibliothèque multimédia de WordPress.
Vous pouvez désormais ajouter une boîte lumineuse à chaque image de votre galerie. Pour ce faire, il vous suffit de cliquer sur n'importe quel bloc d'image, de trouver la rubrique "Type de lien" et de sélectionner 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 enregistrer vos modifications.
Étape 4. Publier vos modifications
La dernière étape consiste à publier votre galerie lightbox responsive sur votre site web WordPress. Pour faire cela avec un thème WordPress personnalisé, allez dans SeedProd " Theme Builder depuis votre administrateur WordPress, et mettez l'interrupteur "Enable SeedProd Theme" sur la position "Yes".
Si vous publiez une page d'atterrissage, ouvrez-la dans le constructeur de pages, cliquez sur la flèche déroulante du bouton Enregistrer et sélectionnez Publier.
Vous pouvez à présent visualiser votre nouveau dessin pour voir à quoi il ressemble.
Et lorsque vous cliquez sur une image de votre galerie, vous ouvrez une boîte lumineuse réactive en plein écran.
Comment créer une boîte lumineuse à l'aide d'un plugin de galerie
Une autre façon d'ajouter une image lightbox à 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 : Envira Gallery Plugin |
| Prix : A partir de 26 $/an |
| Version gratuite : Oui |
| Caractéristiques : 🔹 Constructeur de galerie par glisser-déposer 🔹 Paramètres de lightbox intégrés 🔹 Modèles adaptés aux mobiles |
| Le meilleur pour : Les utilisateurs qui ont besoin d'une personnalisation avancée de la galerie |
Avec ce plugin de galerie d'images léger, 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 sa vitesse est optimisée, de sorte que vos images se chargent rapidement pour les visiteurs du site web.
Commencez par installer et activer le plugin Envira Gallery sur votre site web WordPress. Ensuite, naviguez vers Envira Gallery " Add New pour créer une nouvelle galerie d'images.
Vous pouvez ajouter des images à votre galerie en cliquant sur le bouton Sélectionner des fichiers à partir de votre ordinateur. Toutefois, si vous souhaitez utiliser des images de votre bibliothèque multimédia, cliquez sur le bouton Sélectionner des fichiers à partir d'autres sources.
Après avoir ajouté des images à votre galerie, vous pouvez les réorganiser en faisant glisser les vignettes.
Cliquez maintenant sur l'onglet Configuration pour configurer les paramètres de votre galerie.
Sur cet écran, vous pouvez
- Modifier le nombre de colonnes de la galerie
- Activer le chargement paresseux 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 rognage
- Modifier le thème de la galerie
- Ajuster les marges et les encadrements
Cliquez ensuite sur l'onglet Lightbox, qui permet de personnaliser les paramètres de la boîte à lumière.
Assurez-vous d'abord que l'option Activer la boîte lumineuse est cochée, puis réglez les paramètres pour modifier le thème de votre boîte lumineuse, afficher des légendes, ajouter des effets de transition, etc.
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 du 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 le bloc Envira Gallery ou faites-le défiler jusqu'à ce qu'il apparaisse, puis 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 l'afficher dans une galerie responsive lightbox comme celle-ci :
Bonus : Ajouter la galerie Envira aux pages SeedProd
Si vous construisez vos pages WordPress avec SeedProd, vous pouvez facilement ajouter vos galeries lightbox Envira Gallery directement dans n'importe quelle page ou modèle. Cela vous permet de présenter vos images de manière professionnelle sans utiliser de shortcodes ou d'étapes supplémentaires.
- Ouvrez votre page ou votre modèle SeedProd dans l'éditeur de 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 réglez les paramètres d'affichage.
Cette intégration vous permet de combiner le constructeur de pages flexible de SeedProd avec les puissantes fonctionnalités de lightbox d'Envira Gallery, afin que vous puissiez créer de belles galeries d'images à fort taux de conversion sur n'importe quelle page de votre site.
FAQ sur la création d'une boîte lumineuse dans WordPress
L'ajout d'une lightbox à votre site WordPress est l'un des moyens les plus simples de donner à vos images, vidéos ou galeries un aspect plus professionnel. Elle permet aux visiteurs de rester concentrés sur votre contenu et les empêche de quitter la page inutilement.
Que vous utilisiez un constructeur de pages ou un plugin de galerie, l'installation ne prend que quelques minutes. Choisissez la méthode qui convient le mieux à votre site, suivez les étapes et vous aurez un lightbox WordPress fonctionnel prêt à l'emploi.
Voici d'autres tutoriels utiles qui pourraient vous intéresser :
- Comment ajouter une galerie aux articles et pages de WordPress
- Comment créer des onglets dans WordPress pour un contenu époustouflant
- Comment ajouter un bouton Tweet à WordPress (3 façons)
- Comment ajouter un bouton d'ajout au panier personnalisé dans WooCommerce
Merci de votre lecture ! Nous aimerions connaître votre avis, alors n'hésitez pas à laisser un commentaire pour nous faire part de vos questions et de vos réactions.
Vous pouvez également nous suivre sur YouTube, X (anciennement Twitter) et Facebook pour obtenir d'autres contenus utiles au développement de votre entreprise.
