Crear Slider con desplazamiento Vertical a pantalla completa en Divi

slider de desplazamiento vertical en Divi

Contenido Restringido 🖐
Accede a este y otros contenidos siendo premium. ¿Aún no eres premium? Adquiere una membresía aquí ⭐

En este videotutorial prémium aprenderás a crear un slider con desplazamiento vertical a pantalla completa en Divi. Es un nuevo videotutorial de nuestro profesor Ameth Cruz, programador experto en uxdivi, donde nos enseñará a través de la integración de una librería JS a transformar las secciones de nuestro sitio web hecho con Divi en un slider de desplazamiento vertical.

Recuerda que puedes ver el código usado en la sección de recursos de este tutorial, así como también recuerda que puedes descargar el JSON usado en la misma sección.

Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros. Accede a todo nuestro contenido desde $12/mes*
Transforma tu carrera con UXDIVI
Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros

Accede a todo nuestro contenido desde US $12/mes*
Transforma tu carrera con UXDIVI

Objetivo del profesor:

En esta ocasión les 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 usual 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 como crear un carrusel de testimonios con otra librería de Slick y finalmente como 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 “full page” al contenedor de las secciones de Divi, posteriormente añadiremos un par de opciones para que nuestro slider vertical se vea bien.

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

Así que 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.

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 ⭐

Artículos relacionados

Comentarios

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

  1. Hola, he seguido el tutorial y el resultado ha salido a la primera, ahora me gustaría agregar animaciones a algunos módulos, pero no funcionan con la librería de fullpage 😞 ¿sabéis alguna forma de poder hacerlo? Gracias de antemano.

      1. Hola Jefferson, sí lo intenté, desde los módulos aplique animaciones, scroll effect, incluso, animaciones de DIVI supreme, cuando estás en el builder se ven, pero las animaciones no se ven en la página publicada.

        1. Hola Larry, si los efectos funcionan bien en el builder pero no así en el navegador, puedes probar borrando caché y desactivando cualquier sistema de optimización de sitio o código que tengas, como un plugin de caché o similares. Regularmente este tipo de plugins son los que generan estos errores.

          1. Hola Jefferson, he probado de todas las formas posibles, incluso en una web de pruebas que no usa plugins de cache, y nada 🙁
            Buscando en foros de internet, al parecer la solución pasa por integrar la librería Animate (https://webdesign.tutsplus.com/es/tutorials/quick-tip-scroll-animations-with-fullpagejs-and-animatecss–cms-25235), pero eso a mi me queda grande….

            Pero solo por descartar y asegurarme, ¿A ustedes sí les funcionan las animaciones en fullpage?

            Un saludo

            1. Hola Larry, lo hemos comprobado y tienes razón, las animaciones no funcionan en la página multiscroll. Vamos a revisar el código para buscar mejorarlo y ver si podemos hacer que funcione. Un saludo.

  2. Hola Jeff, he hecho el tutorial y me ha funcionado sin problemas, te cometo que para este momento las librerías ya fueron actualizadas y que el archivo .Json para descarga aún tiene las anteriores.

    Me gustaría saber la forma en que puedo cambiar de color y posición las flechas y puntos de navegación que aparecen por defecto ¿Hay algún tutorial al que pueda echarle un ojo sobre el tema?

    Gracias

    1. Gracias por comentarnos estimado Jaime. Hemos actualizado las librerías, aunque no estoy seguro de que funcionen mejor que antes. Para cambiar los colores y posición de los puntos, puedes usar el inspeccionador de código de Chrome, buscar la clase, cambiarla allí, y luego copiar el código en la página donde hayas hecho el slider, te dejo un ejemplo: https://snipboard.io/qwYpPO.jpg
      Recuerda agregar la etiqueta ” !important ” si no te toma los cambios.
      Espero que esta info te sea de ayuda. Para cualquier otra cosa, aquí me tienes 😉🖐

¡Registrate en nuestro próximo Live!
24 de noviembre de 2023 9:30 hrs (CDMX)
En este evento exclusivo, abordaremos las preguntas más frecuentes que los usuarios hacen sobre Divi, además de responder a cualquier otra pregunta que nuestros suscriptores de la academia tengan en mente.
10
días
10
horas
10
minutos
10
segundos
¡Registrate en nuestro próximo Live!
24 de noviembre de 2023 9:30 hrs (CDMX)
10
días
10
hrs
10
min
10
seg
25% OFF BLACK FRIDAY SALE!
Del 24 al 30 de noviembre 2023 descuentos por:
¿Aún no eres miembro Premium ⭐ de UXDivi? ¡Esta es tu oportunidad de oro! Únete a nuestra comunidad de expertos en Divi y disfruta de recursos exclusivos, tutoriales avanzados, y una red de profesionales al alcance de tu mano.
10
días
10
horas
10
minutos
10
segundos
25% OFF BLACK FRIDAY SALE!
10
días
10
hrs
10
min
10
seg
Aprovecha un DESCUENTO DEL 25% en tu suscripción Premium. ¡Solo durante Black Friday!
10
días
10
hrs
10
min
10
seg
Aprovecha un DESCUENTO DEL 25% ¡Solo durante Black Friday!