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.
Hola! como están? hay alguna manera de hacer una portada en Fullpage.js en horizontal? quedo atento, muchas gracias.
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.
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.
¿Intentaste darle las animaciones a los módulos desde las opciones de Divi?
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.
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.
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
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.
Jefferson, estaré pendiente por si consiguen que funcionen las animaciones. gracias por avisar.
Un saludo
Me ha servido el tutorial, pero cuando intento hacerlo en otro sitio web, hago exactamente lo mismo y no me funciona, por que será?
Pueden ser muchas cosas. Puedes comenzar comprobando los posibles errores de Divi y como resolverlos con está guía: https://uxdivi.com/blog/guias/guia-para-solucionar-los-problemas-mas-comunes-en-divi
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
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 😉🖐