Seleccionar página

Crear Slider con desplazamiento Vertical a pantalla completa en Divi

En este vídeo tutorial premium aprenderás a crear un slider con desplazamiento Vertical a pantalla completa en Divi. Es un nuevo vídeo tutorial...

Contenido Premium

Puedes acceder a este y otros +700 contenidos suscribiéndote en cualquiera de  nuestros planes o accediendo con tu cuenta.

Profesor: Ameth Cruz

Publicación: 3 agosto 2020

En este vídeo tutorial premium aprenderás a crear un slider con desplazamiento Vertical a pantalla completa en Divi. Es un nuevo vídeo tutorial 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.

Objetivo del profesor:

En esta ocasión les enseñaré a implementar una librería de javascript llamada FullPage 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 «fullpage» 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 premium.

11 Comentarios

  1. Piero Roque

    Hola! como están? hay alguna manera de hacer una portada en Fullpage.js en horizontal? quedo atento, muchas gracias.

    Responder
    • Jefferson M.

      Qué tal Piero. Me parece que sí se puede hacer, solo por favor déjalo en la pestaña de ideas como idea para contenido: uxdivi.com/ideas y así lo podemos poner en cola de producción.

      Responder
  2. Larry Ollarve

    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.

    Responder
    • Jefferson M.

      ¿Intentaste darle las animaciones a los módulos desde las opciones de Divi?

      Responder
      • Larry Ollarve

        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.

        Responder
        • Jefferson M.

          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.

          Responder
          • Larry Ollarve

            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

            Responder
            • Jefferson M.

              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.

              Responder
              • Larry Ollarve

                Jefferson, estaré pendiente por si consiguen que funcionen las animaciones. gracias por avisar.

                Un saludo

                Responder
  3. Juan Devis

    Me ha servido el tutorial, pero cuando intento hacerlo en otro sitio web, hago exactamente lo mismo y no me funciona, por que será?

    Responder

Enviar un comentario

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