Cómo desactivar el desplazamiento de página cuando se abre Elementor Lightbox mediante CSS

Elementor Lightbox es unFunción de pantalla emergenteque permite a los sitios web mostrar contenido relevante en una ventana emergente en la página actual cuando se hace clic en una imagen, vídeo o enlace. En este tutorial, se le mostrará en detalle cómo desactivar el desplazamiento de página cuando Elementor Lightbox está abierto. Esto proporcionará una mejor experiencia para el usuario, ya que evita la situación en la que la página de fondo todavía se puede desplazar mientras el Lightbox está abierto.

Este efecto puede conseguirse fácilmente siguiendo los pasos que se indican a continuación para mejorar la interactividad y usabilidad de su sitio web.

¿Por qué desactivar el desplazamiento de página?

Por defecto, cuando se activa la función Lightbox de Elementor, el contenido de fondo de la página puede seguir viéndose haciendo scroll. Esta situación a veces afecta a la capacidad del usuario para Caja de luz El desplazamiento en segundo plano puede distraer al usuario, sobre todo si la página es larga y contiene un diseño complejo.

Desactivar el desplazamiento por la página permite a los usuarios centrarse más en el contenido de imagen o vídeo que están viendo y mejora la calidad de la interacción con el usuario. Al eliminar las barras de desplazamiento, la página también se vuelve visualmente más limpia, lo que da al sitio una sensación general más pulida y profesional.

Cómo desactivar el desplazamiento de página cuando Elementor Lightbox está abierto

Para conseguir este efecto, utilizaremos un sencillo código CSS. Sólo tiene que añadir este código a su sitio de WordPressÁrea global CSSEsto desactivará automáticamente el desplazamiento de la página cuando se abra el Lightbox de Elementor.

Paso 1: Localiza dónde quieres añadir el CSS

Hay varios lugares en WordPress donde se puede añadir CSS personalizado:

• El archivo style.css del tema hijoSi está utilizando un tema hijo, puede añadir CSS personalizado al archivo de estilo del tema hijo.
• CSS global de Elementor: Con el editor Elementor, es posible añadir directamente el "configuración global" para añadir CSS de modo que se aplique a todo el sitio.
• Personalizador de temas > CSS adicionalen el panel de control de WordPress en "estado exterior">"personalización">"CSS adicional", o puede añadir CSS personalizado de forma global.

Paso 2: Añadir código CSS para desactivar el desplazamiento

Aquí está el código CSS personalizado para desactivar el desplazamiento de la página. Este código evita que el fondo de la página se desplace cuando Lightbox está abierto:

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

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

Explica el código:

• Primer código .elementor-lightbox__container Asegúrese de que el contenedor Lightbox se fija a la pantalla cuando se abre y no se mueve como resultado del desplazamiento.
• Segundo código body.elementor-lightbox-open Esto desactiva completamente el comportamiento de desplazamiento de la página, forzando a la página a no desplazarse cuando Lightbox está abierto.

Implementación de código: desactivación del desplazamiento de página en Elementor

1. Abra el editor de Elementor: Introduzca elDesactivar el desplazamiento de página(utilizado como expresión nominal)página web.
2. Ir a Ajustes globalesEn la esquina inferior izquierda del editor de Elementor, haga clic en "Configuración del sitio", luego seleccione "CSS personalizado".

2. Pegar códigoPegue el código anterior en el área de CSS personalizado.
3. Guardar cambios: pulse "guardar (un archivo, etc.) (informática)" para aplicar los cambios.

Con estos pasos, los usuarios no podrán desplazarse por las páginas de fondo cuando Lightbox esté abierto, lo que mejorará la experiencia de navegación.

Optimización adicional: colocación personalizada de CSS

Dependiendo de las necesidades de tu sitio, puedes elegir añadir este CSS en diferentes lugares:

• Si sólo necesita desactivar el desplazamiento en una página concretaPuedes añadir CSS personalizado a esta página en el editor de Elementor.

• Si necesita desactivar el desplazamiento de Lightbox para todo el sitio webEsto puede hacerse a través deltemáticaEl archivo de estilo global (por ejemplo style.css) o en el personalizador de WordPress "CSS adicional"Añadir código a la zona.

resúmenes

Deshabilitar el desplazamiento de página cuando se abre Elementor Lightbox es una técnica sencilla pero eficaz para mejorar la experiencia del usuario y evitar distracciones con el contenido de fondo al visualizar imágenes. Este efecto puede implementarse fácilmente en todo el sitio o en páginas específicas añadiendo código CSS personalizado.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres