Nuestras promociones de aniversario se acaban en:  

Día(s)

:

Hora(s)

:

Minuto(s)

:

Segundo(s)

Seleccionar página

Diseño en vivo de Landing Page multi-scroll en Divi – #UXDiviLiveDesign​

En nuestro 7mo #UXDIVILiveDesign​​ diseñaremos completamente en vivo una landing Page multi-scroll con diferentes elementos de diseño.

Por Jefferson M.

Mar 14, 2021

Accede a más de 500 recursos siendo PREMIUM

Suscríbete a nuestro contenido premium y accede a cientos de recursos para aprender a diseñar web’s fantásticas con Divi

En nuestro 7mo #UXDIVILiveDesign​​ diseñaremos completamente en vivo una landing Page multi-scroll con diferentes elementos de diseños parallax y efectos de typing geniales ¡No te lo puedes perder!

Herramienta recomendada: Canva PRO, ten una prueba de 30 días gratuitos a la herramienta pro desde este enlace: https://bit.ly/3b1IeHl

El código para generar el efecto multi-scroll es el siguiente:

Primero añadimos el JS Library (agrega este código en un módulo de código a final de la página)

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.extensions.min.js"></script>
<script>
jQuery(function($){
$( ".et_builder_inner_content" ).attr( "id", "fullpage" );
});
</script>

Después añadimos el CSS Library: (agrega este código en un módulo de código a final de la página)

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.css" />

Y finalmente añadimos el Script para la transición de una sección a otra: (agrega este código en un módulo de código a final de la página)

<script>
jQuery(document).ready(function($) {
	$('#fullpage').fullpage({
		//options here
		autoScrolling:true,
		scrollHorizontally: true,
    navigation: true,
    slidesNavigation: false,
  	scrollingSpeed: 1000
	});

	//methods
	$.fn.fullpage.setAllowScrolling(true);
});
</script>

Quedaría de esta manera:

Resultado:

¿AÚN NO PERTENECES A NUESTRA COMUNIDAD?

Suscríbete a nuestro contenido premium y accede a cientos de recursos para aprender a diseñar web’s fantásticas con Divi

¿AÚN NO PERTENECES A NUESTRA COMUNIDAD?

Suscríbete a nuestro contenido premium y accede a cientos de recursos para aprender a diseñar web’s fantásticas con Divi

2 Comentarios

  1. Avatar

    Hola Jefferson!, muy bueno, muchas gracias!, oye una pregunta, se ve super bien en computadora, pero en movil no se ve el contenido completo de la sección, que adecuaciones se tendrían que hacer para que sea multiscroll para movil? estoy pensando en implementarlo en unas webs nuevas, pero veo ese detalle, en la demo en movil no se puede ver el contenido completo porque hace de que se pasa a la siguiente seccion de información

    Responder
    • Jefferson M.

      Hola Carlos, lo que hicimos para mejorar este aspecto fue modificar todos los estilos para móvil de los textos, las imágenes y los espacios de las secciones, de manera que cada sección mostrara el contenido en el viewport de la pantalla (es decir en el espacio visible) lo puedes ver en nuestra demo de ejemplo.

      Responder

Enviar un comentario

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

🖐 ¡RECIBE LAYOUTS Y CHILDTHEME GRATIS! 😎

Suscribiendote a esta lista de correo, recibirás algunos de nuestros layouts premium y un childtheme para eCommerce totalmente gratis. Además te enviaremos nuestro resumen de contenidos para que siempre estés enterado/a de nuestras últimas novedades.

¡Perfecto! ¡Gracias! Pronto comenzarás a recibir nuestros recursos gratuitos