Crear Slider con desplazamiento Vertical a pantalla completa en Divi

Inicio / Tutoriales Premium / Tema Divi / Crear Slider con desplazamiento Vertical a pantalla completa en Divi

Contenido Restringido🖐

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

Profesor: Ameth Cruz

  3 de agosto de 2020

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.

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.

13 Comentarios

  1. Piero R

    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 O

    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 O

        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 O

            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 O

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

                Un saludo

                Responder
  3. Juan D

    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
  4. Jaime Abraham P

    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

    Responder
    • Jefferson M

      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 😉🖐

      Responder

Enviar un comentario

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

Iniciar Sesión

¿No tienes cuenta? Registrarse

Otros planes

¡Accede a más de 1330 contenidos especializados en Diseño Web con Divi por un solo precio!

Trimestral

Ahorra 6 USD 🔥

$US 18/ Mes

*Pagando US$ 54 cada 3 meses

¿A qué accedes con este plan?

Lifetime

Un solo pago 🔥

$US 499/ Lifetime

*UN SOLO PAGO DE POR VIDA

¿A qué accedes con este plan?

Con este plan accedes a:

  1. ✅ Todos los cursos
  2. ✅ Todos los tutoriales prémium
  3. ✅ Todos los plugins y layouts
  4. ✅ Soporte prémium vía email
  5. ✅ Acceso a la comunidad en Discord

Con este plan accedes a:

  1. ✅ Todos los cursos
  2. ✅ Todos los tutoriales prémium
  3. ✅ Todos los plugins y layouts
  4. ✅ Soporte prémium vía email
  5. ✅ Acceso a la comunidad en Discord
  6. ✅ Descuentos en Templates para Divi

Solicitud de cancelación de suscripción

Aviso importe

🚩 Debes solicitar la cancelación de tu suscripción al menos 24 horas antes de tu renovación, de otro modo, no podremos procesar a tiempo la cancelación antes de tu renovación.

Al cancelar tu suscripción, perderás el acceso a todo esto:

🚩 A más de mil contenidos especializados en el aprendizaje del diseño web
🚩 El soporte personalizado en Divi
🚩 Acceso al grupo de Discord
🚩 Acceso a la descarga de las actualizaciones de los plugins, el contenido y las descargas de nuestro sitio.
🚩 Puntos y rangos obtenidos en la plataforma

✅ Te ofrecemos la opción de pausar tu suscripción 2 o 3 meses y así no perderás el progreso obtenido en la plataforma.

Lamentamos mucho 😩 que tu experiencia en nuestra plataforma no haya sido la mejor. Para poder procesar tu solicitud y hacerla efectiva, necesitaremos que por favor nos envíes lleno este formato. Esto nos ayudará a poder seguir mejorando nuestra propuesta de valor y siendo útil para todos los usuarios.

Formulario de solicitud de cancelación

¿Por cuál o cuáles razones deseas cancelar tu suscripción?

¿Qué características mejorarías en nuestra web?

¿Cuál es tu nivel de satisfacción en relación con la calidad del soporte que ofrecemos por diferentes medios? donde 1 es insatisfecho y 5 es satisfecho

¿En esta escala que tanto recomendarías a UXDIVI a un amigo o colega? donde 1 es "no lo recomendaría" y 5 es "Lo recomendaría totalmente"

7 + 9 =