Comment désactiver le défilement de la page lorsque Elementor Lightbox est ouvert via CSS

Elementor Lightbox est unFonction d'affichage contextuelElementor Lightbox est un outil qui permet aux sites Web d'afficher un contenu pertinent dans une fenêtre contextuelle sur la page actuelle lorsqu'une image, une vidéo ou un lien est cliqué. Dans ce tutoriel, vous apprendrez en détail comment désactiver le défilement de la page lorsque Elementor Lightbox est ouvert. L'utilisateur bénéficiera ainsi d'une meilleure expérience, car il n'aura pas à faire défiler la page d'arrière-plan lorsque le Lightbox est ouvert.

Cet effet peut être facilement obtenu en suivant les étapes ci-dessous pour améliorer l'interactivité et la convivialité de votre site web.

Pourquoi désactiver le défilement des pages ?

Par défaut, lorsque la fonction Lightbox d'Elementor est activée, le contenu de fond de la page peut toujours être visualisé en faisant défiler la page. Cette situation affecte parfois la capacité de l'utilisateur à Boîte à lumière Le défilement en arrière-plan peut distraire l'utilisateur, surtout si la page est longue et contient une mise en page complexe.

La désactivation du défilement des pages permet aux utilisateurs de se concentrer davantage sur l'image ou la vidéo qu'ils visionnent et améliore la qualité de l'interaction avec l'utilisateur. En supprimant les barres de défilement, la page devient également visuellement plus propre, ce qui donne au site une impression générale plus soignée et plus professionnelle.

Comment désactiver le défilement de la page lorsque Elementor Lightbox est ouvert ?

Pour obtenir cet effet, nous utiliserons un simple code CSS. Il suffit d'ajouter ce code à la sectionZone CSS globaleCela désactivera automatiquement le défilement de la page lorsque la boîte à lumière d'Elementor s'ouvre.

Étape 1 : Localisez l'endroit où vous souhaitez ajouter le CSS

Il y a plusieurs endroits dans WordPress où vous pouvez ajouter des feuilles de style CSS personnalisées :

• Le fichier style.css du thème enfantSi vous utilisez un thème enfant, vous pouvez ajouter des feuilles de style CSS personnalisées au fichier de style du thème enfant.
• Elementor Global CSS: Avec l'éditeur Elementor, il est possible d'ajouter directement l'élément "réglage global"pour ajouter du CSS de manière à ce qu'il s'applique à l'ensemble du site.
• Personnalisateur de thème > CSS supplémentairesdans le tableau de bord de WordPress sous "état extérieur">"personnalisation">"CSS supplémentaire"ou vous pouvez ajouter des feuilles de style CSS personnalisées de manière globale.

Étape 2 : Ajouter un code CSS pour désactiver le défilement

Voici le code CSS personnalisé pour désactiver le défilement de la page. Ce code empêchera le défilement de l'arrière-plan de la page lorsque Lightbox est ouvert :

<code>.elementor-lightbox__container {
    overflow : hidden ;
    overflow : hidden ; position : fixed ;
    top : 0 ;
    overflow : hidden ; position : fixed ; top : 0 ; left : 0 ;
    right : 0 ;
    bottom : 0 ; }
}
body.elementor-lightbox-open {
    overflow : hidden !important ; } body.elementor-lightbox-open {
}</code>
<code>.elementor-lightbox__container {
    overflow : hidden ;
    overflow : hidden ; position : fixed ;
    top : 0 ;
    overflow : hidden ; position : fixed ; top : 0 ; left : 0 ;
    right : 0 ;
    bottom : 0 ; }
}

body.elementor-lightbox-open {
    overflow : hidden !important ; } body.elementor-lightbox-open {
}</code>
.elementor-lightbox__container {
    overflow : hidden ;
    overflow : hidden ; position : fixed ;
    top : 0 ;
    overflow : hidden ; position : fixed ; top : 0 ; left : 0 ;
    right : 0 ;
    bottom : 0 ; }
}
body.elementor-lightbox-open {
    overflow : hidden !important ; } body.elementor-lightbox-open {
}
.elementor-lightbox__container {
    overflow : hidden ;
    overflow : hidden ; position : fixed ;
    top : 0 ;
    overflow : hidden ; position : fixed ; top : 0 ; left : 0 ;
    right : 0 ;
    bottom : 0 ; }
}

body.elementor-lightbox-open {
    overflow : hidden !important ; } body.elementor-lightbox-open {
}
.elementor-lightbox__container {
    overflow : hidden ;
    overflow : hidden ; position : fixed ;
    top : 0 ;
    overflow : hidden ; position : fixed ; top : 0 ; left : 0 ;
    right : 0 ;
    bottom : 0 ; }
}

body.elementor-lightbox-open {
    overflow : hidden !important ; } body.elementor-lightbox-open {
}

Expliquer le code :

• Premier code .elementor-lightbox__container Veillez à ce que le conteneur Lightbox soit fixé à l'écran lorsqu'il est ouvert et qu'il ne se déplace pas sous l'effet du défilement.
• Deuxième code body.elementor-lightbox-open Cela désactive complètement le comportement de défilement de la page, forçant la page à ne pas défiler lorsque Lightbox est ouvert.

Mise en œuvre du code : désactiver le défilement de la page dans Elementor

1. Ouvrez l'éditeur Elementor: Entrer le numéro de téléphone souhaité.Désactiver le défilement des pages(utilisé comme expression nominale)page web.
2. Accéder aux paramètres globauxDans le coin inférieur gauche de l'éditeur Elementor, cliquez sur "Paramètres du site", puis sélectionnez "CSS personnalisé".

2. Coller le codeColler le code ci-dessus dans la zone CSS personnalisée.
3. Enregistrer les modifications: cliquez "enregistrer (un fichier, etc.) (informatique)"pour appliquer les modifications.

Grâce à ces mesures, les utilisateurs ne pourront plus faire défiler les pages d'arrière-plan lorsque Lightbox est ouvert, ce qui améliorera l'expérience de navigation.

Optimisation supplémentaire : activation du placement personnalisé des feuilles de style CSS

En fonction des besoins de votre site, vous pouvez choisir d'ajouter ce CSS à différents endroits :

• Si vous ne souhaitez désactiver le défilement que sur une page particulièreVous pouvez ajouter un CSS personnalisé à cette page dans l'éditeur Elementor.

• Si vous souhaitez désactiver le défilement Lightbox pour l'ensemble du site webCela peut se faire par l'intermédiaire de l'optionthématiqueLe fichier de style global (par exemple style.css) ou dans le personnalisateur de WordPress "CSS supplémentaire"Ajouter un code à la zone.

résumés

Désactiver le défilement de la page lorsque la Lightbox d'Elementor s'ouvre est une technique simple mais efficace pour améliorer l'expérience de l'utilisateur et éviter un contenu d'arrière-plan distrayant lors de la visualisation d'images. Cet effet peut être facilement mis en œuvre sur l'ensemble du site ou sur des pages spécifiques en ajoutant un code CSS personnalisé.