• Home
  • Wordpress
  • Bloquear un slider de Elementor y mantener elementos clicables

Bloquear un slider de Elementor y mantener elementos clicables

Muy buenas y bienvenido, bienvenida, a un artículo más dentro de la sección de WordPress. Debo reconocer que esta sección es una de las que más me gusta del blog, porque explico cómo solucionar asuntos que me encuentro diariamente trabajando webs propias y de clientes y, si te hago ganar tiempo dándote la solución, los dos conseguimos lo que queremos :).

Es posible que estéis leyendo esto a partir del hilo de Twitter que generé la semana pasada en la que Henry me pidió que explicase cómo bloquear un slider de Elementor en Destkop.

Si eres lector recurrente, ya habrás visto que me apasiona el SEO, por lo que voy a poner una long tail y tratar de atraer tráfico internacional a este artículo. Básicamente lo hago porque no supe encontrar ningún blog de habla inglesa que explique «How to disable an slider in desktop Elementor «. Ya está 👍.

Cómo bloquear un slider de Elementor en Desktop

La mayoría de sliders de Elementor, ya sea el propio carousel de sus módulos u otros que puedas usar a través de plguins como PowerPackElements, Dynamic o UAE, usan la propiedad transform de CSS para generar el movimiento de scroll lateral.

Por lo tanto, para desactivar el scroll lateral debemos aplicar la siguiente regla de CSS al selector adecuado.

.swiper-wrapper {
   transform: inherit !important;
}

¿Qué estoy haciendo?

Básicamente fuerzo que el selector swiper-wrapper -que es el CONTENEDOR del slider- mantenga el mismo valor heredado de su elemento padre, para la propiedad transform.

Vale, hasta aquí bien, pero entonces el !important va a machacar cualquier otra regla de CSS que esté tratando de aplicar el slider.

¡Bien visto!

Entonces, lo que debemos hacer es aplicar dicha regla dentro de un media-query para que afecte únicamente a determinados dispositivos:

@media screen and (min-width: 1024px)
   .swiper-wrapper {
      transform: inherit !important;
   }
}

Et voilà.

Con la regla anterior decimos que para dispositivos de mínimo 1024px de ancho de pantalla (un poco más que tablets) la propiedad transform sea siempre heredada de su elemento padre.

Por cierto, no olvides ocultar la navegación por puntos y la navegación por flechas en desktop.

Cómo NO bloquear un slider de Elementor

Leí en una web que, gracias a ::before y la propiedad content: » « de CSS se podría crear una capa transparente justo encima del slider y así bloquear los elementos del DOM que se encuentran debajo de dicha capa.

Esto podría haber sido una solución, pero no lo fue.

El cliente quería que, dentro de ese slider, hubieran elementos clicables, por lo que, al poner una capa transparente, se bloquearían también los enlaces y dichos elementos dejarían de ser clicables.

Si este es tu caso, aquí tienes el código que puedes usar:

.elemento-que-quieres-bloquear:before{
    content: "";
    background: rgba(0,0,0,0);
    position: absolute;
    width: 100%;
    height: calc(100% - 30px); // deja 30px para la navegación por puntos, si tiene.
    z-index: 9999;
}

Con el código anterior podrás eliminar el swipe lateral o, como se dice en inglés «disable swiping in mobile/desktop slider».

Sí, lo he vuelto a hacer 🙂.

Y hasta aquí otro pequeño tutorial de WordPress preparado con mucho cariño para los fieles lectores del blog.

Sígueme en Twitter si te ha gustado este contenido: https://twitter.com/marcosseculi 🚀

Marcos Séculi
Picture of Marcos Séculi
Marcos Séculi
Me encanta crear, probar y aprender cosas nuevas, sobre todo en el mundo digital. Llevo creando y monetizando páginas web en WordPress desde 2013. Actualmente estoy especializado en SEO para WordPress y en el desarrollo de páginas webs escalables para mis clientes. He trabajado en agencias, consultorías y también como freelance.