Crear Slider con desplazamiento Vertical a pantalla completa en Divi

Profesor: Ameth Cruz

Publicación: 3 agosto 2020
Categorías: Snippets | Tutorial Premium

Contenido Premium

Desbloquea este contenido suscribiéndote o accediendo con tu cuenta.

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.

Recursos, snippets y descargas

Aquí podrás descargar los recursos que usamos en el tutorial: plugins, código, snippets, layouts, .json, etc. Para ver los recursos debes acceder con tu cuenta de suscriptor.

0 comentarios

Enviar un comentario

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

¡Valóranos!

¿Te han gustado nuestros tutoriales y cursos? por favor, déjanos una valoración de 5 estrellas en truspilot, nos ayudará mucho su calificación ¡Gracias!