L'effet "lightbox" est une fonction très pratique, en particulier lorsqu'il s'agit deAgrandissement de l'image affichéeElementor permet de créer facilement des images de type lightbox sans utiliser d'autres plugins. Dans cet article, nous allons voir en détail comment ajouter un effet lightbox dans Elementor et expliquer les étapes de configuration en détail.

Qu'est-ce que l'effet "lightbox" ?

L'effet lightbox fait référence au fait que lorsqu'un utilisateur clique sur une image, celle-ci est affichée au centre de l'écran sous forme d'agrandissement, tandis que l'arrière-plan est atténué pour permettre à l'utilisateur de se concentrer sur l'image qu'il visualise. Cet effet est très populaire sur de nombreux sites web car il offre une expérience plus immersive à l'utilisateur.

Lecture :Comment ajouter un diaporama pleine largeur dans Elementor

Comment créer un effet de boîte à lumière dans Elementor

Étape 1 : Créer ou modifier une page

Tout d'abord, une nouvelle page doit être créée ou une page existante doit être modifiée afin d'y ajouter un effet de boîte à lumière.
Les étapes :

1. Allez dans le tableau de bord de WordPress et cliquez sur "page web">"Ajouter une nouvelle page"pour créer une nouvelle page, ou allez dans la liste "Pages" et sélectionnez la page que vous souhaitez modifier.

2. Si vous souhaitez modifier un message, vous pouvez cliquer sur "écrits">"Ajouter un nouvel article"pour créer un nouveau message.

Étape 2 : Passer à l'éditeur Elementor

Après avoir créé ou sélectionné une page, cliquez sur "Utilisation de l'éditeur ElementorPour accéder à l'interface de l'éditeur d'Elementor, cliquez sur le bouton "Éditer". À partir de là, vous pouvez utiliser le boutonGlisser-déposer des widgetspour modifier le contenu d'une page.

Étape 3 : Ajouter un widget d'image

1. Dans l'éditeur Elementor, trouvez et faites glisser la balise "imagerieà l'endroit de la page où l'effet "lightbox" est affiché.

2. Après avoir placé le widget image sur la page, vous pouvez accéder aux paramètres de l'image.

Étape 4 : Ajout d'une image

Après avoir ajouté un widget image, vous devez sélectionner une image dans la bibliothèque multimédia ou télécharger une nouvelle image.
Les étapes :

1. Cliquez sur le bouton "Sélectionner une image"Bouton.

2. Sélectionnez les images que vous souhaitez afficher dans la médiathèque ou téléchargez directement des fichiers images locaux.

Étape 5 : Configurer l'effet "lightbox

Ensuite, l'effet "lightbox" doit être activé pour l'image.
Les étapes :

1. Dans la section "lien (sur un site web)"Sélectionnez l'option "fichier média". Cela permet de s'assurer que l'image s'affiche en grand lorsqu'on clique dessus.

2. Activer l'effet lightbox : dans "boîte lumineuse"Dans les options, remplacez "boîte lumineuse"Régler sur"être". Une fois ce paramètre défini, l'effet "lightbox" sera déclenché lorsque vous cliquerez sur l'image, celle-ci sera présentée sous forme d'agrandissement et l'arrière-plan de la page sera assombri.

Étape 6 : Prévisualisation et publication de la page

Après avoir effectué les étapes ci-dessus, prévisualisez la page pour vous assurer que l'effet "lightbox" a bien été appliqué.

1. Cliquez sur l'image pour voir si l'effet de boîte à lumière est normal.
2. Si les résultats sont conformes aux attentes, la page peut être enregistrée et publiée.

Dans l'aperçu, un clic sur l'image devrait déclencher l'effet "lightbox" et provoquer l'affichage de l'image agrandie. Si l'effet "lightbox" fonctionne correctement, vous pouvez enregistrer ou publier la page en toute sécurité.

remarques finales

L'implémentation d'effets lightbox dans Elementor est très simple et ne nécessite pas l'utilisation de plugins supplémentaires. Cela permet non seulement d'économiser les ressources du plugin, mais aussi d'améliorer les performances de votre site. Si votre site a besoin d'afficher la possibilité de zoomer sur une image, l'effet lightbox est un bon choix, et j'espère que les étapes détaillées de cet article vous aideront à mettre en œuvre cette fonctionnalité avec succès.