Ajout de Lightbox au site WordPress : Guide ultime pour les débutants

Lightbox est l'une des nombreuses fonctionnalités intéressantes et populaires pour un site Web basé sur des images. Mais tout le monde ne sait pas comment ajouter une lightbox à un site WordPress, en particulier un débutant. Par conséquent, nous apportons ce guide pour les débutants pour les aider à ajouter une lightbox aux sites Web WordPress.

Qu'est-ce que Lightbox et comment l'ajouter ?

Lightbox est une galerie d'images modale qui affiche votre image et votre vidéo en créant une fenêtre contextuelle en plein écran et en assombrissant le reste de la page . Par example:

Cet effet magnifique et fantaisiste est extrêmement utile pour un portfolio, une photographie ou tout autre site Web basé sur des images. Il vous permet de voir l'image clairement et rend votre site Web plus remarquable .

Normalement, il existe 3 façons d'avoir une lightbox pour un site WordPress :

• Ajout de shortcode
• Installer un plugin
• Utilisation d'un thème prenant en charge la lightbox.

Pour les débutants, nous vous suggérons d'utiliser un plugin ou de trouver un thème avec cette fonctionnalité en tête, car l'ajout de shortcode est réservé aux utilisateurs avancés.

Afficher la Lightbox si votre thème le prend en charge

Il n'y a rien à dire si votre thème affiche déjà la lightbox pour galerie/images. Mais nous savons que de nombreux thèmes ont besoin de quelques étapes supplémentaires pour le montrer. Par exemple, ce thème ePortfolio prend en charge la lightbox, mais vous devez lier la galerie au fichier multimédia pour afficher la lightbox.

Normalement, il y a deux options : un lien vers un fichier multimédia ou une page de pièce jointe . Lorsque vous liez une image/une galerie à une page de pièce jointe, une nouvelle page distincte contenant uniquement l'image s'ouvrira lorsque vous cliquerez sur l'image. Si vous créez un lien vers un fichier multimédia, il affichera uniquement l'image, pas la page, comme ceci :

Voici le guide pour le faire.

Tout d'abord, accédez à l' éditeur de messages , puis cliquez sur la galerie.

Si vous utilisez l'éditeur Gutenberg, regardez dans la barre latérale droite, vous verrez la section Lien vers .

Comme pour une seule image, vous devez cliquer sur cette icône dans la barre d'outils :

Dans l'éditeur classique, la section Lien vers apparaît lorsque vous créez ou modifiez une galerie et une seule image.

Ensuite, choisissez Fichier multimédia et cliquez sur Insérer une galerie pour terminer. Lorsque vous mettez à jour ou publiez la publication, cliquez sur cette galerie/image, vous verrez que la visionneuse est en cours d'exécution.

Si votre thème prend en charge la lightbox, cette action peut activer la lightbox pour la galerie/l'image que vous souhaitez. Sinon, il n'y aura pas de lightbox du tout.

Cependant, la configuration peut être différente avec des thèmes différents. Par exemple, certains peuvent nécessiter que vous travailliez dans le Customizer, certains peuvent nécessiter que vous insériez un lien vers la page de pièce jointe au lieu du fichier multimédia. Par conséquent, vous devriez vérifier le thème attentivement .

Quel que soit le thème que vous utilisez, encore, il est nécessaire de savoir comment lier une galerie/image à un fichier multimédia car il sera utile d'ajouter une lightbox à l'aide d'un plugin ci-dessous.

Ajouter une Lightbox à l'aide d'un plugin

En effet, ajouter une lightbox n'est pas difficile du tout. En recherchant le mot-clé « lightbox plugin », vous verrez une multitude de plugins pour cet effet. En ce qui concerne nos recherches, nous trions les plugins en deux sortes : les plugins compliqués et les plugins simples pour ajouter une lightbox.

En ce qui concerne les plugins compliqués, il existe des options beaucoup plus sophistiquées pour personnaliser fortement la lightbox, telles que la taille de l'image, la couleur de la bordure, les styles de lightbox, … Par exemple, Responsive Lightbox & Gallery et FooBox Image Lightbox ont plus d'outils de personnalisation. Mais il est plus difficile à utiliser si vous êtes débutant. D'ailleurs, le résultat n'est pas si différent d'un simple plugin. C'est pourquoi nous préférons utiliser un plugin simple comme Simple Lightbox .

Ce plugin est facile à utiliser, très populaire avec plus de 200 000 installations actives et évalué à 160 cinq étoiles. De plus, la conception de la lightbox est bonne.

Étape 1 : Installer et activer le plugin Simple Lightbox

Dans votre Tableau de bord > Plugin > Ajouter un nouveau , il vous suffit de taper « simple lightbox » et de cliquer sur Installer le plugin, puis sur Activer le.

Étape 2 : Configurer le plug-in Simple Lightbox

Dans Plugin > Plugins installés , cliquez sur Paramètre dans l'onglet Simple Lightbox .

Onglet Activation du paramètre Simple Lightbox

L'onglet Activation vous permet d'activer/désactiver certains paramètres. La case la plus importante que vous devez cocher est Activer la fonctionnalité Lightbox , qui active la lightbox pour votre galerie. Si vous ne cochez pas cette case, les autres sections n'ont toutes aucun sens.

Les autres cases sont facultatives pour vous. Vous pouvez cocher pour afficher la lightbox sur votre page d'accueil, les articles uniques, les pages, les pages d'archives, les widgets et les menus.

Assurez-vous que vous voulez vraiment une lightbox pour les bonnes sections, car trop de lightbox peut rendre votre site Web un peu fastueux.

Onglet Regroupement du paramètre Simple Lightbox

En défilant vers le bas, il y a l'onglet Groupement . Il décidera de la façon dont vous affichez la lightbox sous la forme d'un curseur ou d'une seule image.

Grouper les éléments : cochez-la pour afficher votre image/galerie comme un curseur, ce qui vous permet de passer d'une image à l'autre. Ce n'est que lorsque vous activez cette fonctionnalité que les autres sections de cet onglet prennent effet. Sinon, les autres sections de regroupement ne fonctionnent pas.

Grouper les éléments par publication : en cochant cette case, vous regroupez tous les éléments d'une même publication dans un slider lightbox . Faites-le lorsque vous souhaitez regrouper uniquement les images/galeries à l'intérieur d'une publication et exclure d'autres images/galeries d'autres publications, widgets et menus.

Grouper les éléments de la galerie séparément, Grouper les éléments du widget séparément et Grouper les éléments du menu séparément : cochez chacun d'eux pour regrouper les éléments dans une galerie d'un seul article, les éléments d'un widget ou les éléments de menu respectivement . Cela signifie que vous pouvez simplement naviguer vers les éléments suivants dans la même galerie, widget ou menu dans le curseur de la visionneuse. Nous pensons que vous devriez le faire lorsque vous ne voulez pas gâcher les visionneuses dans différentes parties, ce qui pourrait dérouter vos visiteurs.

Onglet UI du paramètre Simple Lightbox

L'onglet UI contient des sections pour modifier le style de la lightbox. Faites attention à cela si vous souhaitez personnaliser l'affichage de votre lightbox.

Thème : Il existe 2 styles pour votre lightbox. Choisissez simplement celui qui correspond à votre goût.

Style sombre

Style léger

Redimensionner la lightbox pour l'adapter à la fenêtre : il est fortement recommandé d'activer cette section pour avoir un bel affichage. Sinon, l'image est en plein écran et vous ne pouvez pas voir l'image entière comme ça.

Activer les animations : cochez pour activer l'effet de chargement.

Décochez pour désactiver l'effet, rendant la navigation plus rapide.

Démarrer automatiquement le diaporama : laissez-le passer automatiquement à l'image suivante lorsque vous activez cette section.

Durée de la diapositive : si vous activez la section diaporama automatique ci-dessus, vous pouvez choisir la durée de la diapositive ici.

Parcourez les éléments en boucle : voulez-vous répéter les éléments après un tour de diapositive ? Si oui, cochez cette case.

Opacité de la superposition (0 – 1) : Vous pouvez modifier l'opacité de la superposition de l'arrière-plan. Plus l'opacité est faible, plus vous pouvez voir clairement le message derrière. Par exemple, nous définissons l'opacité sur 0,1 pour que l'arrière-plan soit très clair.

Activer le titre par défaut : vous pouvez choisir d'afficher le titre de l'image en cliquant sur cette case. Voici comment le titre est affiché.

Onglet Étiquette de la Lightbox simple

Enfin, cet onglet vous permettra de modifier le libellé de chaque bouton. Mais ces sections ne prennent effet que si vous ajoutez un shortcode lors de la modification du thème. Donc dans ce tutoriel pour débutant, vous n'avez pas besoin de vous occuper de cet onglet.

Lorsque vous avez terminé avec tous les paramètres du plugin Simple Lightbox, cliquez sur Enregistrer les modifications juste sous l'onglet Étiquette .

Étape 3 : Liez les images/la galerie au fichier multimédia pour afficher la Lightbox

Pour décider quelle image/galerie ajouter une lightbox, vous devez insérer un lien de fichier multimédia vers cette image/galerie. Si vous n'ajoutez pas de lien vers le fichier multimédia, la lightbox ne peut pas être affichée.

Suivez simplement le guide que nous avons mentionné dans la partie « Afficher la Lightbox si votre thème le supporte ». Vous voyez, nous avons dit que vous devez absolument savoir comment le faire si vous souhaitez utiliser le plugin Simple Lightbox.

Les derniers mots

Vous trouverez ci-dessus le moyen le plus simple d'ajouter une lightbox à votre site Web WordPress. Surtout si vous êtes débutant, l'utilisation du plugin Simple Lightbox est un moyen simple et efficace. En fonction de votre demande, de votre site web et de votre esthétique, vous pouvez choisir différents plugins lightbox pour avoir le résultat le plus souhaitable. Ou vous pouvez choisir de trouver un thème WordPress qui prend en charge la lightbox et le configurer pour afficher cet effet.

Si vous voulez plus d'instructions sur les plugins lightbox compliqués, laissez un commentaire ci-dessous et continuez à nous suivre.