Crear Slider con desplazamiento Vertical a pantalla completa en Divi

En este videotutorial prémium aprenderás a crear un slider con desplazamiento vertical a pantalla completa en Divi. Es un tutorial de nuestro profesor Ameth Cruz, programador experto en UXDivi, donde nos enseña a través de la integración de la librería JavaScript fullPage.js cómo transformar las secciones de un sitio web hecho con Divi en un slider de desplazamiento vertical totalmente funcional, sin necesidad de instalar ningún plugin adicional.

Recuerda que puedes ver el código usado en la sección de recursos de este tutorial, así como también descargar el archivo JSON listo para aplicar directamente en tu sitio.

Objetivo del profesor:

En esta ocasión te enseñaré a implementar una librería de JavaScript llamada Full Page para crear un efecto de slider vertical en secciones a pantalla completa, sin la necesidad de usar ningún tipo de plugin.

Este tipo de efectos es muy habitual a la hora de crear sitios web con secciones en pantalla completa, por ejemplo una página de algún producto en el que la imagen visual o fotografía es lo primordial.

Resultado:

Anteriormente ya te hemos enseñado a cambiar el número de columnas en el módulo de blog de Divi con lo que logramos un excelente nivel de personalización; también te enseñamos cómo crear un carrusel de testimonios con la librería Slick y finalmente cómo crear un carrusel de logos en Divi. En esta ocasión te enseñaremos a crear este slider vertical al que seguro le sacarás excelente provecho.

Lograremos un resultado igual a este:

Para esto vamos a hacer uso de la librería tanto de su JavaScript como de su CSS, así como también añadir un pequeño hack para añadir el ID "fullpage" al contenedor de las secciones de Divi. Posteriormente añadiremos un par de opciones para que nuestro slider vertical se vea y funcione de la mejor manera.

Les compartiré los enlaces a la librería, así como a su gran variedad de opciones para que puedan ir implementándolas y jugando con ellas. Las pueden encontrar en la parte inferior en los recursos de este post.

La próxima vez que quieran crear una página en la que las secciones de tamaño full sean una prioridad, para sacar el máximo potencial de sus visuales, ya podrán hacerlo sin implementar ningún plugin.

¿Qué es fullPage.js y por qué usarla con Divi?

fullPage.js es una librería JavaScript creada por Álvaro Trigo que permite crear presentaciones de una sola página o scroll vertical/horizontal donde cada sección ocupa exactamente el 100% del viewport. Es una de las librerías más utilizadas en el mundo del diseño web para crear páginas de presentación de productos, portfolios con impacto visual y landing pages de alto nivel.

La ventaja de integrarla con Divi es que no necesitas un plugin específico para esto. Divi te permite insertar módulos de código directamente en las páginas, lo que hace que la integración sea limpia, sin dependencias extra y sin riesgo de conflictos con actualizaciones. Además, una vez que la librería está cargada vía CDN, el peso adicional sobre tu página es mínimo.

fullPage.js funciona detectando el evento de scroll del usuario y animando el movimiento entre secciones con una transición suave controlada por JavaScript. No hay trucos de CSS complicados: es la librería quien gestiona toda la lógica de navegación.

Paso a paso: cómo implementar el slider vertical en Divi

El proceso completo tiene cuatro etapas: preparar las secciones de Divi, cargar las librerías CSS y JS via CDN, añadir el ID de contenedor necesario para que fullPage.js reconozca las secciones, e inicializar la librería con las opciones que necesitas.

Etapa 1 — Preparar las secciones en Divi

Crea una nueva página en WordPress y ábrela con el constructor visual de Divi. Añade las secciones que quieres que funcionen como "diapositivas" del slider. Cada sección debe tener una imagen de fondo diferente para que el efecto sea visualmente impactante. Una vez que tengas las secciones listas, entra en las opciones avanzadas de cada una y en el campo de clase CSS escribe: section. Esto es fundamental: la librería busca esa clase para identificar qué elementos son las diapositivas.

Etapa 2 — Cargar las librerías via CDN

Agrega dos módulos de código en la página. El primero carga el CSS de fullPage.js; el segundo carga el JavaScript. Ambas librerías se sirven desde un CDN de Cloudflare, por lo que no necesitas descargar ni subir ningún archivo a tu servidor.

Etapa 3 — Añadir el ID de contenedor y el hack de jQuery

fullPage.js necesita que todas las secciones estén contenidas dentro de un div con el ID fullpage. En Divi, el contenedor que envuelve todas las secciones del builder tiene una clase específica de Divi (.et_builder_inner_content). El siguiente snippet de jQuery le añade ese ID dinámicamente sin tocar el código del tema:

Etapa 4 — Inicializar fullPage.js con las opciones de tu proyecto

Una vez que las secciones tienen la clase correcta y el contenedor tiene el ID requerido, inicializas la librería con jQuery y configuras las opciones que necesitas. Entre las más útiles están navigation (muestra puntos de navegación laterales), autoScrolling (activa el scroll automático entre secciones), scrollingSpeed (controla la velocidad en milisegundos) y scrollHorizontally (permite scroll horizontal dentro de una sección con slides).

Si después de implementar la librería el efecto no funciona, lo primero que debes revisar son las opciones de performance de Divi. Las optimizaciones de CSS/JS combinado pueden interferir con la inicialización de fullPage.js. Desactívalas temporalmente para confirmar que ahí está el conflicto.

Opciones de fullPage.js más útiles para Divi

La documentación oficial de fullPage.js en GitHub lista decenas de opciones de configuración. Para la mayoría de los proyectos con Divi, estas son las que más vas a usar:

• autoScrolling: true — activa el desplazamiento automático entre secciones al hacer scroll. Sin esta opción, la página funciona como un scroll normal.
• scrollHorizontally: true — permite el scroll horizontal dentro de una sección que tenga slides internos.
• navigation: true — muestra puntos de navegación en el lado derecho de la pantalla, uno por cada sección, para que el usuario pueda saltar directamente a cualquier sección.
• slidesNavigation: false — desactiva la navegación de slides horizontales dentro de una sección. Útil cuando solo necesitas el scroll vertical.
• scrollingSpeed: 1000 — define la velocidad de la animación en milisegundos. 1000 ms equivale a 1 segundo, que es una transición suave y agradable.

La librería también es compatible con navegación por teclado (flechas arriba/abajo) y con scroll táctil en dispositivos móviles, lo que la hace completamente usable en cualquier dispositivo.

Solución de problemas frecuentes

Si el efecto de slider no se activa después de seguir todos los pasos, estos son los puntos que debes revisar en orden:

Primero, verifica que cada sección tiene la clase CSS section añadida correctamente en las opciones avanzadas del módulo de sección en Divi. Es el paso que más frecuentemente se olvida.

Segundo, desactiva las opciones de performance de Divi en Divi → Opciones del Tema → Builder → Opciones Avanzadas de Builder. El CSS y JS combinados o diferidos pueden bloquear la inicialización de la librería. Una vez que confirmes que sin esas opciones funciona, puedes reactivarlas de una en una para identificar cuál genera el conflicto.

Tercero, asegúrate de que los módulos de código estén en el orden correcto: primero el CSS, luego el JS de la librería con el hack del ID, y finalmente el script de inicialización.

Conclusión

Integrar fullPage.js con Divi es una de las técnicas más efectivas para crear páginas de presentación de alto impacto visual. El resultado —secciones a pantalla completa con transiciones suaves— es exactamente el tipo de experiencia que generalmente se asocia con sitios premium, y puedes lograrlo sin comprar un solo plugin adicional.

El código completo, los enlaces a la librería y el archivo JSON del tutorial están disponibles en la sección de recursos de abajo para usuarios premium. Si tienes alguna duda sobre la implementación, recuerda que puedes usar la caja de comentarios o la pestaña de soporte en la intranet.

¿Te gustaría ver un tutorial sobre fullPage.js con slides horizontales dentro de cada sección, o con animaciones de entrada para el contenido? Déjame tu sugerencia en los comentarios.

Si te ha gustado este contenido no olvides compartirlo con tus amigos y conocidos, además recuerda que puedes compartirnos el enlace de tu creación en los comentarios de este contenido, así todos veamos los resultados maravillosos que conseguiste con este contenido prémium.

Descarga los recursos mencionados en este tutorial acá abajo 👇 siendo premium ⭐