Comment ajouter Lightbox dans WordPress avec Elementor

En intégrant une fonctionnalité LightBox dans votre site Web WordPress, vous pouvez transformer la façon dont les visiteurs s'engagent avec votre contenu visuel. Cette solution élégante est parfaite pour présenter des images de haute qualité, créer des galeries captivantes et présenter des informations détaillées sur les produits, sans perturber l'expérience utilisateur. En fait, il peut élever l'expérience utilisateur à de nouveaux sommets.

Que vous soyez un photographe qui cherche à afficher votre portfolio ou un propriétaire de site de commerce électronique souhaitant présenter les détails du produit, la fonctionnalité Lightbox pourrait être une excellente option. Si votre site est construit avec Elementor, l'ajout de Lightbox n'est qu'à un pas.

Dans cet article, nous fournirons un guide complet et étape par étape sur la façon d'ajouter LightBox dans WordPress avec Elementor. Assurez-vous de lire jusqu'à la fin pour tirer le meilleur parti de cet outil puissant!

Qu'est-ce qu'une Lightbox dans WordPress?

Un Lightbox est une superposition contextuelle. Il affiche des images, des vidéos et d'autres visuels médiatiques sur un site Web dans une vue plus grande et plus ciblée. Chaque fois que les utilisateurs cliquent sur un bouton, un lien ou une miniature connexe, la fonctionnalité Lightbox présente les visuels connectés dans une vue plus grande tout en graissant l'arrière-plan.

Il aide à mettre en évidence le contenu. Cette fonctionnalité est idéale pour les galeries, les portefeuilles et les affichages de produits qui peuvent être mieux visualisés à partir de plus près. En incorporant la fonction LightBox, vous ne pouvez pas seulement rendre votre contenu visuel attrayant, mais aussi que votre public reste sur le site Web pendant longtemps.

Avantages de l'ajout de Lightbox à un site Web

Avant de sauter dans le tutoriel, jetez un coup d'œil à certains des principaux avantages de l'ajout de la fonction LightBox à un site Web à partir des points décrits ci-dessous.

• Expérience utilisateur améliorée

Un Lightbox affiche du contenu aux utilisateurs sans interrompre la session de navigation de leur site Web. Les visiteurs peuvent se concentrer sur le contenu en vedette car il apparaît au-dessus des autres éléments du site Web. Explorez les secrets de l'amélioration de l'expérience utilisateur.

• Appel visuel amélioré

Lightbox utilise des animations lisses et des mises en page contemporaines qui rendent les sites Web plus attrayants pour les utilisateurs. Cela rend un site Web plus professionnel.

• Navigation plus facile pour les images et les vidéos

Lightboxes permet aux utilisateurs d'afficher les éléments multimédias sur une seule page avec une navigation fluide et des transitions faciles entre eux. Si vous souffrez avec vos fichiers multimédias, utilisez HappyMedia pour gérer votre bibliothèque de médias et vos fichiers.

• Augmente l'engagement et l'interaction

Lightboxes aide les utilisateurs à mieux voir le contenu visuel, ce qui peut leur donner envie d'explorer davantage votre site Web. Leurs séances croissantes peuvent passer un signal positif au moteur de recherche.

• Permet une meilleure présentation de contenu

Lightbox vous aide à mieux afficher le contenu sans rendre vos pages Web occupées. C'est idéal pour présenter du contenu comme des graphiques et des collections d'événements aux côtés d'images de produits.

Comment ajouter Lightbox dans WordPress avec Elementor

Nous sommes maintenant dans la partie tutoriel. Dans cette section, nous vous montrerons comment ajouter une LightBox dans WordPress avec Elementor. Pour commencer le tutoriel, vous devez vous assurer que les plugins suivants sont installés et activés sur votre site.

• Élémentor
• Happyaddons

HappyAddons est un addon proéminent du plugin Elementor. Il est livré avec plus de 130 widgets supplémentaires et des dizaines de fonctionnalités qui peuvent aider à embellir davantage votre site Web. Une fois qu'ils sont prêts sur votre site, commencez à suivre les tutoriels expliqués ci-dessous.

Étape 01: Faites glisser et déposez le widget Lightbox sur la toile

Ouvrez un message ou une page avec le canevas Elementor. Trouvez le widget Lightbox sur le panneau Elementor. Faites glisser et déposez-le sur la toile.

Par défaut, le widget Lightbox est ajouté au canevas comme bouton.

Étape 02: Sélectionnez un type Lightbox

Le widget est livré avec deux types Lightbox - bouton et image . Choisissez le type de LightBox que vous souhaitez pour le widget. Pour ce tutoriel, nous allons avec le type de bouton.

Étape 03: Sélectionnez le type de contenu que vous souhaitez afficher

Le widget LightBox vous permet d'afficher un contenu d'image ou de vidéo. Choisissez le type de contenu que vous souhaitez afficher dans l'option marquée ci-dessous.

Si l'option vidéo est sélectionnée, vous pouvez ajouter du contenu vidéo à partir de trois sources - YouTube, Vimeo et auto-hébergé .

Si la source YouTube ou Vimeo est choisie, vous pouvez ajouter le lien vidéo souhaité à la boîte respective indiquée dans la capture d'écran ci-dessous.

Vous pouvez même activer le type d'image pour la Lightbox et télécharger une image pour cela.

Étape 04: Ajoutez une copie au bouton Lightbox

Écrivez une copie appropriée qui rend le bouton vraiment significatif et intéresse les utilisateurs à cliquer dessus.

Étape 05: Configurer les paramètres du widget Lightbox

En plus de ceux ci-dessus, utilisez les autres options pour optimiser le widget. Par exemple, alignez-le de manière centralisée ou partout où cela est beau.

Étape 06: styliser le widget Lightbox

Maintenant, venez à l' onglet Style . À partir de cet onglet, vous pouvez personnaliser le rembourrage, le type de bordure, le rayon de bordure, l'ombre de la boîte, la typographie, la couleur et la couleur d'arrière-plan pour le widget. Faites-le vous-même si nécessaire.

Étape 07: Aperçu de la Lightbox

Cliquez simplement sur le bouton. Si la Lightbox apparaît comme le clip vidéo ci-dessous, c'est bien. Vous pouvez voir que notre Lightbox fonctionne très bien.

Étape 08: rendre le widget mobile Lightbox réactif

Cliquez sur l'icône de mode réactif sur le pied de page du panneau Elementor. Cela montrera une barre supérieure sur la toile avec des options pour basculer entre différentes tailles d'écran.

Vérifiez si le widget a l'air bien sur tous les appareils en changeant la toile entre différentes tailles d'écran. S'il ne semble pas bon sur une taille d'écran spécifique, vous pouvez le personnaliser uniquement pour cette taille d'écran.

Ainsi, vous pouvez créer une LightBox dans WordPress à l'aide du plugin Elementor.

Choses à considérer dans la création d'un LightBox dans WordPress

J'espère que vous avez apprécié ce tutoriel. Maintenant, dans cette section, nous couvrirons les points que vous devez considérer lors de la création d'une Lightbox dans WordPress pour obtenir les meilleurs résultats.

• But du Lightbox

Décidez de la fonction Lightbox dont vous avez besoin dans la LightBox, comme afficher des images, des vidéos, des formulaires ou des galeries. Planifiez le contenu qui vous aide à atteindre les objectifs de votre site Web et répond aux besoins des visiteurs.

• Images de compression

L'ajout d'images lourdes peut ralentir votre vitesse Web. Alors, assurez-vous de compresser toutes vos images avant de les ajouter à la LightBox. Utilisez Happymeida pour compresser les fichiers multimédias.

• Ajouter ALTER Text S

L'ajout de textes alternatifs aux images peut augmenter le score SEO de vos images Lightbox. Ajoutez également une copie attrayante au bouton ou lien Lightbox.

• Fonctionnalité de sortie

La fonctionnalité de sortie est cruciale pour l'expérience utilisateur. Donnez aux utilisateurs des moyens faciles de quitter la Lightbox en affichant un bouton visible et en les laissant le fermer.

• Tests et dépannage

Vérifiez comment la LightBox fonctionne sur divers navigateurs Internet, appareils et tailles d'affichage pour confirmer qu'il fonctionne sur toutes les plates-formes. Ne le publiez pas sans tester et expérimenter.

Conclusion

Un LightBox améliore l'engagement des utilisateurs en affichant les supports dans une superposition en haut de la page principale. Cela permet aux visiteurs de se concentrer sur le contenu sans naviguer. Bien qu'il existe de nombreux plugins disponibles sur wordpress.org pour la création de Lightbox, Elementor se distingue comme l'une des options les plus simples et les plus conviviales. Si vous êtes un fan des constructeurs de pages, Elementor mérite vraiment d'être considéré.

Au-delà du widget Lightbox, vous pouvez également explorer la large gamme de fonctionnalités et de widgets offerts par le plugin HappyAddons . Cet outil puissant vous permet d'ajouter encore plus de fonctionnalités à votre site Web et le rend plus dynamique et interactif.

Si vous avez trouvé ce tutoriel utile, nous serions ravis de vous entendre! N'hésitez pas à partager vos pensées ou vos questions dans la zone de commentaires ci-dessous.