Configuras un fondo con efecto parallax en Divi, lo admiras en tu pantalla de escritorio... y al revisar el sitio en el celular, el efecto desapareció: la imagen está ahí, estática, como si nunca hubieras activado nada. No es un bug — es una decisión deliberada de Elegant Themes. Divi desactiva el parallax en dispositivos móviles, y no ofrece ninguna opción para reactivarlo.
Por alguna razón, el efecto parallax en móviles parece ser una especie de tabú en el desarrollo web. Personalmente creo que bien usado se ve muy bien, y me hubiera gustado que Divi diera la opción de activarlo o desactivarlo en lugar de simplemente quitarlo. La buena noticia: en este tutorial gratuito te enseño a recuperar el efecto parallax en móvil para el tema Divi con un pequeño snippet de jQuery — liviano, compatible con el parallax nativo del tema y aplicable en minutos.
¿Por qué Divi desactiva el parallax en móvil?
Contexto rápido para decidir con criterio. El parallax CSS clásico usa background-attachment: fixed, una propiedad que históricamente tuvo soporte irregular y costos de rendimiento en navegadores móviles — repintar el fondo en cada scroll consumía batería y generaba lag en equipos de gama baja. La mayoría de los temas, Divi incluido, optaron por la solución conservadora: apagar el efecto en pantallas táctiles.
Los dispositivos actuales son mucho más capaces que los de cuando se tomó esa decisión, y el snippet que usaremos aplica el efecto con transformaciones (la técnica eficiente), no con fondos fijos. Aún así, el criterio final es tuyo: si tu página tiene 8 secciones parallax y tu audiencia navega con equipos modestos, quizá el efecto estático sea la mejor experiencia. Si es un hero y dos secciones, el efecto recuperado se siente premium.
¿Por qué este snippet y no un plugin?
- Es liviano: unas 30 líneas de JavaScript, sin dependencias externas ni peso adicional — jQuery ya viene cargado con Divi.
- Es simple de configurar: copiar, pegar en la integración del tema y listo (ahora lo vemos).
- Cubre todos los casos: funciona con imágenes de fondo configuradas con parallax en secciones, columnas, módulos y secciones de ancho completo.
- Soporta múltiples secciones: si la misma página tiene varios fondos con efecto parallax, el snippet los maneja todos.
- Usa la misma fórmula que Divi: replica el cálculo de desplazamiento del parallax nativo del tema, así el efecto en móvil se siente idéntico al de desktop.
El snippet para activar el parallax en móvil en Divi
Aquí está el código. Para instalarlo, ve a tu administración de WordPress → Divi → Opciones del tema → Integración y pégalo en el cuadro "Añadir código al <head> de tu blog":
<script>
jQuery(document).ready(function($) {
// Mobile device check
$is_mobile_device = null !== navigator.userAgent.match(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/);
if ($is_mobile_device) {
// Function to check if an element is in the Viewport
isInViewport = function(elem) {
elementTop = elem.offset().top, elementBottom = elementTop + elem.outerHeight(), viewportTop = $(window).scrollTop(), viewportBottom = viewportTop + $(window).height();
return elementBottom > viewportTop && elementTop < viewportBottom;
};
// Apply Parallax transform calculations when scrolling
$(window).scroll(function() {
$(".et_parallax_bg").each(function() {
var $this_parent = $(this).parent();
// Check if the parent element is on-screen
var $is_visible = isInViewport($this_parent);
if ($is_visible) {
element_top = $this_parent.offset().top,
parallaxHeight = $(this).parent(".et_pb_fullscreen").length && $(window).height() > $this_parent.innerHeight() ? $(window).height() : $this_parent.innerHeight(),
bg_height = .3 * $(window).height() + parallaxHeight,
main_position = "translate(0, " + .3 * ($(window).scrollTop() + $(window).height() - element_top) + "px)";
$(this).css({height: bg_height,"-webkit-transform": main_position,"-moz-transform": main_position,"-ms-transform": main_position,transform: main_position});
}
});
});
}
});
</script>¡Y eso es todo! Guarda los cambios, abre tu sitio desde un celular (o recarga si ya lo tenías abierto) y haz scroll por las secciones con parallax: el fondo ahora se desplaza a velocidad distinta del contenido, igual que en desktop.
Consejo: recuerda que la sección debe tener el parallax activado en Divi (Fondo → ícono de imagen → "Usar efecto parallax"). El snippet no agrega el efecto a fondos normales — reactiva en móvil el que ya configuraste en el constructor.
¿Cómo trabaja este snippet?
Para que no sea magia negra, el recorrido del código en tres pasos:
- Detecta el dispositivo: comprueba el user agent del navegador y solo ejecuta el código en móviles y tablets. Como usa la misma comprobación que Divi, no interfiere con el parallax estándar de escritorio.
- Verifica visibilidad: la función
isInViewportcomprueba qué elementos parallax están realmente en pantalla, y solo aplica los cálculos a esos. Esto es clave para el rendimiento — las secciones fuera de vista no consumen procesamiento. - Aplica la fórmula de Divi: en cada scroll, recalcula la posición del fondo (
.et_parallax_bg) contransform: translate()— la técnica de animación más eficiente del navegador — usando el mismo factor de desplazamiento (0.3) del parallax nativo del tema.
Rendimiento: lo que debes vigilar
El snippet es eficiente, pero el parallax móvil sigue teniendo un costo: un cálculo por cada evento de scroll por cada sección visible. Mis reglas prácticas:
- Úsalo en pocas secciones por página — el hero y una o dos secciones de quiebre. El parallax pierde impacto cuando está en todos lados (y ahí sí pesa).
- Optimiza las imágenes de fondo: el efecto agranda la imagen para tener espacio de desplazamiento; una imagen de fondo de 2 MB en móvil duele con o sin parallax. WebP y máximo ~1600px de ancho.
- Prueba en un equipo real de gama media, no solo en tu flagship. Si el scroll se siente fluido ahí, estás bien. Para revisar el resultado en distintos tamaños de pantalla, estas herramientas para pruebas de diseño responsive ayudan antes de pasar al dispositivo físico.
¿Y en Divi 5?
Este snippet nació en la era de Divi 4 y los selectores que usa (.et_parallax_bg, .et_pb_fullscreen) corresponden a esa arquitectura. Divi 5 reconstruyó el frontend del constructor, así que si tu sitio ya corre la nueva versión, prueba el snippet primero en staging y verifica con las DevTools que las clases del parallax se mantengan en tu versión. La lógica del código (detectar móvil, viewport, transform en scroll) sigue siendo válida — lo que puede requerir ajuste son los selectores.
Errores comunes
El efecto no se ve en móvil
Tres causas típicas: el código quedó pegado fuera del cuadro del <head> (revisa que esté en Integración y la pestaña correcta), la sección no tiene el parallax activado en Divi, o un plugin de caché/minificación está difiriendo el script — purga la caché después de guardar.
El fondo "salta" o se ve recortado
El snippet agranda la altura del fondo para crear el espacio de desplazamiento. Si tu imagen es muy chica o el contenedor muy alto, puede notarse el borde. Usa imágenes de fondo con resolución suficiente para el alto de la sección más el 30% extra que requiere el efecto.
Conflicto con otro efecto de scroll
Si además usas los efectos de scroll nativos de Divi (transformaciones al desplazar) sobre la misma sección, ambos sistemas compiten por el transform del elemento. Elige uno por sección: o parallax o efecto de scroll, no ambos.
Preguntas frecuentes
- ¿Esto funciona también en tablets?
- Sí. La detección incluye Android, iPad y demás dispositivos táctiles del user agent. Las tablets, con pantallas más grandes, lucen el efecto especialmente bien.
- ¿Afecta el SEO o los Core Web Vitals?
- El snippet es muy liviano y no bloquea el renderizado (corre en el ready de jQuery). El riesgo real para los Web Vitals está en las imágenes de fondo pesadas, no en el script — optimízalas y el impacto es despreciable.
- ¿Por qué no usar CSS puro con background-attachment: fixed?
- Porque iOS Safari históricamente lo ignora o lo renderiza con fallos en fondos. La técnica de transform de este snippet es la misma que usa Divi en desktop: compatible y eficiente en móvil.
- ¿Puedo ajustar la intensidad del efecto?
- Sí: el factor
.3que aparece dos veces en el código controla la velocidad relativa del fondo. Bájalo a.2para un efecto más sutil o súbelo a.4para más dramatismo — mantén ambos valores iguales.
Mis recomendaciones finales
- Activa el parallax móvil solo donde aporta: hero y secciones de transición, no en toda la página.
- Optimiza las imágenes de fondo a WebP antes de activar el efecto — es el factor #1 del rendimiento percibido.
- Prueba en dispositivos reales de gama media y en iOS, no solo en el emulador del navegador.
- Si rediseñas la página, recuerda que el efecto convive con el resto de tus decisiones responsive — revisa también el orden de las columnas en móvil para que la experiencia completa sea coherente.
- Menos es más: el parallax es un acento, no el plato principal. Aplica el mismo criterio de moderación que defienden los principios del minimalismo en diseño web.
Conclusión
Así que ahí lo tienes: un poco de jQuery y todas tus secciones con efecto parallax en Divi ahora funcionan también en dispositivos móviles. El snippet es liviano, usa la misma fórmula del tema y te devuelve una decisión que Divi tomó por ti — ahora el criterio de dónde y cuánto parallax usar vuelve a ser tuyo. Pruébalo en tu próximo proyecto y cuéntame en los comentarios cómo se ve.
🎓 ¿Quieres dominar el diseño responsive en Divi de verdad?
En el curso de ajustes en móvil y responsive con Divi cubrimos el sistema completo: breakpoints, visibilidad por dispositivo, tipografías fluidas, menús móviles y los detalles — como este parallax — que hacen que un sitio se sienta cuidado en cualquier pantalla. Accede como suscriptor.
Comentarios
13 comentariosPara dejar un comentario, accede a tu cuenta de UXDivi.
Acceder a mi cuenta →Excelente, activa el efecto parallax sin causar conflicto con absolutamente nada más. Gracias.
¡Es un gusto que te haya funcionado!
Hola, el código funciona bien, pero a mi se me ve tembloroso, ¿por que puede ser? tengo un hosting potente no debería pasar alguna pista?
Prueba activando el «desplazamiento suave» desde las opciones generales de Divi. Lo otro es que recuerda que al desplazarte lo haces con la ruedita del mouse y ese movimiento no es natural. Prueba que no se vea tembloroso con el desplazamiento desde móvil.
Buenas yo tengo el mismo problema, ya lo configure en desplazamiento suave pero se ve tembloroso,
Excelente código. Funciona perfectamente. ¡Gracias!
¡Gracias a ti por comentar!
Hola Jefferson, el código es excelente para móviles, pero me gustaría aplicar ese mismo efecto a las imágenes del ordenador y no sólo a los dispositivos móviles. Creo que el movimiento es más agradable con este código que con el que trae Divi por defecto. ¿Qué tendría que cambiar en el código? Gracias.
Que tal Juan, un gusto saludarte. Para ordenador puedes usar el efecto CSS Parallax por defecto que trae Divi. De hecho, este código es para que se aplique ese efecto en móviles, pero con Divi lo puedes lograr desde los mismos ajustes del fondo de pantalla, en background Parallax. Allí lo puedes ver.
Buenos días Jefferson, el código funciona perfectamente en móvil, ha sido una gran ayuda y me ha resuelto el problema.
Muchas gracias por la ayuda desinteresada.
Saludos
Gracias por comentar, no olvides suscribirte y visitar de nuevo uxdivi.com 😊🖐
Te agradezco mucho por tu tiempo y aporte. Me funciona perfectamente el código. Muchas gracias por tu trabajo!
Gracias por comentar, no olvides suscribirte y seguir visitando uxdivi.com 😊🖐