En este tutorial aprenderás a construir un slider vertical fullscreen activado por scroll, exactamente como el que usan sitios de agencias y estudios creativos de alto nivel. Todo desde Divi 5 (compatible con Divi 4), sin plugins adicionales, usando filas nativas como diapositivas y un poco de CSS y JavaScript personalizado.
El resultado es un efecto profesional donde cada scroll del usuario cambia de slide con una transición suave, con miniaturas laterales de navegación, barra de progreso, contador y soporte tanto para imágenes como para videos de fondo.
¿Qué vamos a construir?
Ver el resultado final en vivo
Crearemos un slider fullscreen de diapositivas verticales donde el scroll del usuario controla la navegación. Cada slide ocupa el 100% de la pantalla y puede tener imagen o video de fondo configurado directamente desde las opciones de Divi, sin tocar código.
Este tipo de efecto lo puedes usar para:
- Hero de portafolio — Mostrando tus mejores proyectos uno a uno de forma impactante
- Presentación de servicios — Donde cada slide presenta un servicio diferente con su propio diseño
- Landing page de agencia — Con un hero cinematográfico que impresiona desde el primer segundo
- Página de inicio de producto — Presentando características o casos de uso de forma secuencial
- Sitio de evento o festival — Con fondos de video o imagen para cada sección principal
Lo mejor es que el contenido de cada slide lo diseñas libremente con los módulos nativos de Divi. Títulos, textos, botones, todo con tus propios estilos desde el Visual Builder.
¿Cómo funciona?
La estructura es más sencilla de lo que parece. Una sección de Divi actúa como el contenedor principal, cada fila es una diapositiva, y un módulo Código al final de la sección contiene la UI de navegación junto con el JavaScript que controla todo.
El scroll del usuario es interceptado por el JavaScript mientras el slider está activo. Al llegar al último slide y seguir haciendo scroll, el control regresa al navegador y la página continúa de forma normal hacia el resto del contenido.
Lo que aprenderás en este tutorial
1. Configurar la sección y las filas en Divi
Te mostraré exactamente qué ID y clases CSS necesitas agregar en cada elemento desde el panel de Avanzado del Visual Builder, sin necesidad de tocar código HTML.
2. Agregar fondos de imagen o video por slide
Cada diapositiva puede tener su propio fondo completamente independiente. Lo configuras directamente desde la pestaña Diseño de cada fila en Divi, ya sea una imagen estática o un video en loop. Divi lo renderiza automáticamente y el slider lo toma como fondo fullscreen.
3. Diseñar el contenido de cada slide con módulos Divi
Aquí es donde está la flexibilidad real. Dentro de cada fila puedes colocar los módulos que quieras: título, texto, botones, íconos. Cada cliente puede armar su propio diseño sin restricciones. Además aprenderás a agregar animaciones de entrada al contenido usando solo clases CSS.
4. Construir la UI de navegación
Implementaremos las miniaturas laterales clickeables, la barra de progreso vertical, el contador de slides y el indicador de scroll. En móvil las miniaturas se reemplazan automáticamente por bullets verticales para no ocupar espacio innecesario.
5. El CSS y JavaScript solo para copiar y pegar
Te doy el código CSS y JavaScript listo para copiar y pegar. El único ajuste que te muestro es cómo cambiar un valor entre true o false según si tu página tiene contenido adicional debajo del slider o no.
¿Es difícil?
No. El tutorial está estructurado para que puedas seguirlo sin importar tu nivel con Divi. No necesitas saber JavaScript ni CSS avanzado para implementarlo. Solo sigues los pasos, pegas los códigos donde corresponde y ajustas el contenido a tu proyecto.
Si ya tienes experiencia con Divi, el tutorial también te aporta porque entenderás cómo funciona la lógica detrás del efecto y podrás modificarlo o extenderlo según las necesidades de cada cliente.
Del ejercicio a tus proyectos reales
Una vez que domines la técnica podrás:
- Cambiar el número de slides agregando o quitando filas en Divi
- Usar imagen o video de fondo en cada slide de forma independiente
- Diseñar cada diapositiva con los módulos nativos de Divi sin restricciones
- Activar o desactivar el scroll libre al terminar el slider según el proyecto
- Ajustar las velocidades de transición y los tiempos del throttle
- Adaptar los colores y tamaños de la UI de navegación a cada marca
Accede al tutorial completo
Este tutorial forma parte de mi programa de Tutoriales Exclusivos OV DIVI, donde periódicamente publico contenido nuevo sobre desarrollo con Divi.
Si te interesa llevar tus habilidades con Divi al siguiente nivel y acceder a una biblioteca completa de tutoriales como este, puedes unirte aquí:
👉 Tutoriales Exclusivos OV DIVI
Dentro encontrarás más de 230 tutoriales sobre Divi, plugins custom, módulos exclusivos y técnicas avanzadas que no comparto en ningún otro lugar.
0 comentarios