Diseño en vivo de Landing Page multi-scroll en Divi

Inicio / Blog / Diseño en vivo de Landing Page multi-scroll en Divi

Autor: Jefferson M

Publicación: 14 Mar, 2021

En nuestro septimo #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

Resultado:

Recursos del video:

Puedes descargar el layout del video acá siendo premium.

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>

6 Comentarios

  1. Carlos Ricaño Méndez

    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
  2. David

    Jefferson. Mil gracias por el tutorial, es un efecto muy interesante, pero tengo un problema, he implementado en una web de pruebas y si bien funciona cuando lo visualizo desde la opcion: Divi>Personalización de temas, cuando entro en el site en una nueva pagina no funciona el scroll ¿ sabes a que puede ser debido?. Te lo agradecería mucho si puedes solucionar mi dudas, me estoy volviendo loco intentándolo.

    Gracias por adelantado y saludos.

    Responder
  3. David

    Gracias por tu interés y rápida respuesta. Desgraciadamente,a pesar de seguir tus indicaciones, no he conseguido solucionar el problema, y no puedo hacer que se visualice el efecto entrado desde la url, pero si lo hago en divi>personalización de temas se ejecuta sin problemas. Sinceramente no se que hacer.

    Gracias y saludos

    Responder
    • Jefferson M

      Vale, entiendo. Si eres suscriptor prémium escríbenos a través de la pestaña de soporte y compártenos el acceso a tu web para darle un vistazo más a profundidad.

      Responder

Enviar un comentario

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

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.

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 + 11 =


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