THRIVE THEMES
VÍDEOTUTORIAL

Ideas para usar la funcionalidad Scroll Behavior

Lección 8 Capítulo 2

Hace unos días los chic@s de Thrive Themes nos sorprendieron con una nueva funcionalidad para poder controlar el comportamiento de ciertos elementos de Thrive Architect cuando el usuario realiza scroll en nuestra página.
Con esta opción podremos adherir un elemento a la pantalla aunque el mismo no esté insertado en dicha sección. Esto quiere decir que el elemento seguirá visible en la pantalla mientras nuestros usuarios siguen desplazándose hacia abajo en la misma.
Ahora mismo la funcionalidad Scroll Behavior está disponible para los elementos botón e imagen y para los elementos de tipo contenedor como el content box, el background section o las columnas.
No obstante, podremos usar esta funcionalidad con todos los elementos de Thrive Architect insertando los mismos dentro de un content box y aplicando dicha funcionalidad al content box en cuestión.
Para saber más sobre el funcionamiento de la funcionalidad Scroll Behavior puedes pasarte por la clase de Scroll Behavior que encontrarás en el curso de Thrive Architect.

Ejemplo de diseño realizado con Scroll Behavior

En el vídeo de esta clase puedes ver un ejemplo de como se aplica esta funcionalidad en un diseño para una hamburguesería.
Para realizar dicho diseño he cogido las imágenes en formato .png (transparentes) y las he insertado en diferentes columnas.
Las columnas que he insertado son de 2/3 por 1/3 para insertar la imagen en grande en la parte izquierda y el texto en la parte derecha.
Ahora le he colocado a todas las imágenes la funcionalidad Scroll Behavior hasta el fin de la página y he ido jugando con los píxeles para establecer la distancia que habrá en la parte superior de la imagen mientras se vaya desplazando el usuario.
Los píxeles han quedado de la siguiente manera:

  • Pan: 0 px
  • Tomate: 200 Px
  • Queso y carne: 260 px
  • Cebolla: 260 px
  • Pepinillos: 360 px
  • Lechuga: 420 px

No te pierdas nada

3 x 1

Todas las semanas recibirás el contenido semanal en tu bandeja de entrada y si eres suscriptor el contenido premium.

Responsable: Severiano Luna Torregrosa Finalidad: envío de mis publicaciones así como correos comerciales. La Legitimación es gracias a tu consentimiento. Destinatarios: tus datos se encuentran alojados en mis plataformas de email marketing ActiveCampaign suscrita al PrivacyShield. Podrás ejercer tu Derecho de Acceso, Rectificación, Limitación o Suprimir tus datos Encontrarás más información en lapolítica de privacidad.

Bien es cierto, que con estos porcentajes conseguimos la altura idónea para que los alimentos estén bien posicionados dentro de la hamburguesa pero se nos irán colocando uno encima de otro por lo que la hamburguesa no se verá bien.
Para jugar con las posiciones tendremos que modificar la posición z-index de las imágenes.
En este caso he puesto los siguientes valores: 

  • 10 para el pan, el tomate, la cebolla y el pepinillo
  • 8 para el queso y la carne
  • 7 para la lechuga

Si no sabes cómo funciona la propiedad z-index puedes ampliar información en la clase de superposición de capas del curso de Thrive Architect.

Conclusión

Como has podido observar con unas pequeñas configuraciones podemos conseguir diseños realmente profesionales.
Lo que te he enseñado en esta clase sólo es una parte de lo que se puede hacer con la funcionalidad Scroll Behavior.
Si quieres sacarle más partido a tus diseños y te gustaría realizar diseños como el del vídeo presentación te animo a pasarte por el curso de Thrive Architect.
Eso sí, no podrás acceder a los videotutoriales sin antes suscribirte a la escuela.
Te espero dentro!!
Si te quedara alguna duda puedes hacérmela llegar por medio del formulario de contacto.
Un abrazo!!

Pen
>

Training Gratuito >> Haz despegar tus ventas