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.
Hace poco un cliente me pidió:
– Quiero un bloque de 4 columnas con Elementor que, solo en mobile, sea slider. Las columnas tienen links en los Hx.Tardé 2 semanas en pensar cómo se hacía y 3 minutos en implementarlo.
Si alguien lo necesita me curro un post.#wordpress
— Marcos Séculi (@marcosseculi) January 16, 2021
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.
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 🚀
