Añadir efecto Parallax en dispositivos móviles en Elementor

En Elementor existe un problemilla con las imágenes de fondo fijas (efecto Parallax) en secciones y contenedores, y es que el efecto no funciona en dispositivos móviles.

Pero existe una manera para forzar esto y que sí funcione, a través de un pequeño fragmento de código CSS.

Vamos a ver cómo conseguir esto rápidamente y sin esfuerzo.

Configura la imagen de fondo en la configuración de la sección o contenedor de Elementor

Lo primero que tenemos que hacer es crear la sección o contenedor donde queremos tener la imagen de fondo.

Una vez hecho, tendremos que activar la opción ‘Capa de fondo’, haciendo clic en el pincelito: Sección/Contenedor > Estilo > Capa de fondo (OJO AL DATO: no es la pestaña ‘Fondo’ la que debemos activar).

Una vez activada, podemos configurar todas las opciones disponibles a nuestro gusto, pero dejando activada la opción ‘Por defecto’ en ‘Adjunto’ (no marques la opción ‘Fijo’), pues será el código el que se encargue de hacerlo.

Agrega el CSS que forzará el efecto Parallax en dispositivos móviles

Una vez hayas configurado el fondo de la sección o contenedor, ve a la pestaña Avanzado > CSS personalizado y agrega el siguiente CSS, que sirve para fijar la imagen de fondo de Elementor en tablet y móvil:

Código para secciones (y columnas)

@supports (-webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0) ) or (clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0) ) {
selector{
    -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
    overflow:hidden;
}
selector .elementor-background-overlay{
    position: fixed;
    top:0;
    left:0;
    height:100vh;
    pointer-events:none;
}
}

Código para contenedores (Flexbox y Grid)

@supports (-webkit-clip-path: polygon(0 0, 0 10%, 10% 10%)) or (clip-path: polygon(0 0, 0 10%, 10% 10%) ) {
selector {
-webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
overflow:hidden;
}
selector::before{
position: fixed;
top:0;
left:0;
height:100vh;
pointer-events:none;
}
}

Código adicional para evitar problemas al rotar el dispositivo

Opcionalmente, puedes añadir este código en un widget HTML en la misma página, para evitar un error -poco común- en los iPads y algunos iPhones recientes, que provoca que, cuando el usuario cambia la orientación de la pantalla, las imágenes se desborden por toda la página.

Te recomiendo agregar esto solo si tienes el tipo de página donde es probable que los usuarios giren sus dispositivos (por ejemplo, si hay videos):

¡Y listo!

Ya tienes tus fondos con efecto Parallax en dispositivos móviles funcionando.

¿Qué te ha parecido la cosa?

Si te ha servido, déjame 5 estrellitas y un comentario aquí debajo. Se agradece 🙂