How to disable page scrolling when Elementor Lightbox is opened via CSS

Elementor Lightbox is aPop-up display function, which allows websites to display relevant content in a pop-up window on the current page when an image, video or link is clicked. In this tutorial, you will be shown in detail how to disable page scrolling when Elementor Lightbox is open. This will provide a better experience for the user as it avoids the situation where the background page can still be scrolled while the Lightbox is open.

This effect can be easily achieved by following the steps below to enhance the interactivity and usability of your website.

Why disable page scrolling?

By default, when Elementor's Lightbox feature is triggered, the background content of the page can still be viewed by scrolling. This situation sometimes affects the user's ability to Lightbox The background scrolling can be a distraction to the user, especially if the page is long and contains a complex layout.

Disabling page scrolling allows users to focus more on the image or video content they are viewing and improves the quality of user interaction. By removing scroll bars, the page also becomes visually cleaner, giving the site an overall more polished and professional feel.

How to disable page scrolling when Elementor Lightbox is open

To achieve this effect, we will use simple CSS code. Just add this code to your WordPress site'sGlobal CSS ZonesThis will automatically disable page scrolling when Elementor's Lightbox opens.

Step 1: Locate where you want to add the CSS

There are several places in WordPress where you can add custom CSS:

• The style.css file of the child theme: If you are using a child theme, you can add custom CSS to the child theme's style file.
• Elementor Global CSS: With the Elementor editor, it is possible to directly add the "global setting" to add CSS so that it applies to the entire site.
• Theme Customizer > Additional CSS: In the WordPress dashboard's "exterior condition">"customizable">"Additional CSS" region, or you can add custom CSS globally.

Step 2: Add CSS code to disable scrolling

Here is the custom CSS code to disable page scrolling. This code will prevent the page background from scrolling when Lightbox is open:

.elementor-lightbox__container {
    overflow: hidden;
    overflow: hidden; position: fixed;
    top: 0;
    overflow: hidden; position: fixed; top: 0; left: 0; right: 0;
    right: 0;
    top: 0; left: 0; right: 0; bottom: 0; }
}

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

Explain the code:

• First code .elementor-lightbox__container Ensure that the Lightbox container is fixed to the screen when opened and does not move as a result of scrolling.
• Second code body.elementor-lightbox-open disables the scrolling behavior of the page completely, forcing the page to not scroll when Lightbox is open.

Code implementation: disabling page scrolling in Elementor

1. Open the Elementor editor: Enter the desiredDisable page scrolling(used form a nominal expression)web pageThe
2. Go to Global Settings: In the bottom left corner of the Elementor editor, click "Site Settings", then select "Custom CSS".

2. Paste code: Paste the above code into the custom CSS area.
3. Save Changes: click "save (a file etc) (computing)" to apply the changes.

With these steps, users will not be able to scroll through background pages when Lightbox is open, enhancing the browsing experience.

Further optimization: Enabling custom CSS placement

Depending on your site's needs, you can choose to add this CSS in different places:

• If you only need to disable scrolling on a specific pageYou can add custom CSS to this page in the Elementor editor.

• If you need to disable Lightbox scrolling for the entire siteThis can be accomplished bythematicThe global style file (e.g. style.css) or in the WordPress customizer "Additional CSS"Add code to the area.

summarize

Disabling page scrolling when the Elementor Lightbox opens is a simple but effective technique to enhance the user experience and avoid distracting background content when viewing images. This effect can be easily implemented throughout the site or on specific pages by adding custom CSS code.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: [email protected]
④ Working hours: Monday to Friday, 9:30-18:30, holidays off