¡Tu licencia Divi con un -20% de DescuentoOferta aquí

Cómo crear una transición de encabezado de alejamiento en desplazamiento en Divi

Feb 13, 2020 | Tutoriales para Divi

Crear un efecto de desplazamiento del encabezado de alejamiento puede ser un elemento de diseño impresionante para atraer a los usuarios con su contenido. El efecto es similar a lo que ves en la página de MacOS Catalina de Apple . En este tutorial, le mostraremos cómo crear una transición de encabezado de alejamiento en el desplazamiento con Divi. El truco consiste en agregar efectos de desplazamiento de escala y movimiento vertical a una fila completa para crear el efecto de alejamiento. El resultado es una hermosa transición que deja a los usuarios gratamente sorprendidos.

Descargar el tutorial GRATIS

Para descargar el fichero JSON de este tutorial, será necesario descargarlo usando el botón de descarga, suscribiendose a nuestra lista de correo electrónico mediante el siguiente formulario. Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se «volverá a suscribir» ni recibirá correos electrónicos adicionales.

Lo que necesitas para empezar

pestañas de esquina expandibles

Para comenzar, deberá hacer lo siguiente:

  1. Si aún no lo ha hecho, instale y active el Divi Theme .
  2. Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (visual builder).
  3. Elija la opción «Construir desde cero».

Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.

Cómo crear un efecto de encabezado de alejamiento en Divi

Altura de la sección

Para este diseño, necesitamos darle a nuestra sección una altura que se extienda más allá de la altura de la ventana gráfica para dar espacio para que funcione el efecto de desplazamiento.

Antes de hacer cualquier otra cosa, abra la configuración de la sección y actualice lo siguiente:

  • Altura: 150vh (escritorio), 100vh (tableta), 100vh (teléfono)
  • Relleno: 0px arriba, 0px, abajo

efecto de desplazamiento divi del encabezado de alejamiento

La fila

Una vez completada la altura de la sección, agregue una fila de una columna a la sección.

efecto de desplazamiento divi del encabezado de alejamiento

Imagen de fondo de fila

Antes de agregar un módulo, abra la configuración de fila y agregue una imagen de fondo. Asegúrese de que la imagen tenga al menos 1920px de ancho (lo suficientemente grande como para abarcar la pantalla completa de un monitor grande).

efecto de desplazamiento divi del encabezado de alejamiento

Tamaño de fila y espaciado

Una vez que el fondo esté en su lugar, debemos asegurarnos de que nuestra fila abarque todo el ancho y alto de la página. Para hacer esto, actualice la siguiente configuración de diseño para la fila:

  • Ancho de canal: 1
  • Ancho: 100%
  • Ancho Máx .: 100%
  • Altura: 100vh
  • Relleno: 0px arriba, 0px abajo

efecto de desplazamiento divi del encabezado de alejamiento

Row Box Shadow

Luego dale a la fila una sombra de caja. No lo veremos hasta que agreguemos el efecto de desplazamiento que escala la fila hacia abajo para crear el efecto de alejamiento.

  • Box Shadow: Ver captura de pantalla
  • Posición vertical de la sombra de la caja: 0px
  • Caja Shadow Blur Fuerza: 50px

efecto de desplazamiento divi del encabezado de alejamiento

Agregar un módulo de texto para el texto de encabezado

A continuación, agregue un nuevo módulo de texto dentro de la fila.

efecto de desplazamiento divi del encabezado de alejamiento

Contenido del texto

Actualice el contenido del cuerpo con el siguiente encabezado H2:

01
<h2>Your Journey</h2>

efecto de desplazamiento divi del encabezado de alejamiento

Configuración de diseño de texto

Luego actualice la configuración de diseño para el texto de la siguiente manera:

  • Título 2 Fuente: Poppins:
  • Título 2 Peso de la fuente: negrita
  • Encabezado 2 Alineación de texto: centro
  • Encabezado 2 Tamaño del texto: 10vw
  • Título 2 Altura de línea: 1.3em

efecto de desplazamiento divi del encabezado de alejamiento

Altura de columna y superposición de fondo

Una vez que el módulo de texto está en su lugar, necesitamos personalizar nuestra configuración de columna para que se convierta en una buena superposición para nuestro fondo de fila. Para hacer esto, necesitaremos actualizar el color de fondo con un color semitransparente y darle a la columna una altura del 100%.

Abra la configuración de la columna 1 y actualice lo siguiente:

  • Color de fondo:

efecto de desplazamiento divi del encabezado de alejamiento

En la pestaña avanzada, agregue el siguiente CSS personalizado en el Elemento principal:

01
height: 100%

efecto de desplazamiento divi del encabezado de alejamiento

A continuación, agregue algo de relleno a la columna …

  • Acolchado (escritorio): 35vh superior
  • Acolchado (tableta): 40vh superior

efecto de desplazamiento divi del encabezado de alejamiento

Efecto de desplazamiento de columna

A continuación, agregue un efecto de desplazamiento a la columna que se desvanecerá (con el color de fondo y el texto) en el desplazamiento. Para hacer esto, actualice lo siguiente:

En la pestaña Fading In and Out …

  • Habilitar Fading In y Out: YES
  • Opacidad de inicio: 100% (con 0% de ventana gráfica)
  • Media opacidad: 100% (al 70% de la ventana gráfica)
  • Opacidad final: 0% (al 80% de la ventana gráfica)

efecto de desplazamiento divi del encabezado de alejamiento

Agregar efectos de desplazamiento a la fila

Ahora podemos comenzar a agregar los efectos de desplazamiento a la fila.

Movimiento vertical

Abra la configuración de la fila y actualice lo siguiente:

Efecto de desplazamiento de movimiento vertical (escritorio)

  • Habilitar movimiento vertical: SÍ
  • Compensación inicial: 0 (con una ventana gráfica del 5%)
  • Desfase medio: 4.5 (al 50% de la vista)
  • Compensación final: 4.5 (al 100% de la vista)

Efecto de desplazamiento de movimiento vertical (tableta)

  • Compensación inicial: 0 (con una ventana gráfica del 30%)

Asegúrese de actualizar el efecto desencadenante de movimiento en la parte inferior del elemento. Esta es la clave para hacer que el efecto de desplazamiento funcione. Para hacer esto, actualice lo siguiente:

  • Activador de efecto de movimiento: parte inferior del elemento

efecto de desplazamiento divi del encabezado de alejamiento

Desvaneciéndose dentro y fuera

Para que el encabezado se desvanezca justo antes de dejar la parte superior de la ventana gráfica en desplazamiento, abra la configuración de la fila y actualice lo siguiente:

Desvanecimiento de efecto de desplazamiento dentro y fuera

  • Habilitar Fading In y Out: YES
  • Opacidad de inicio: 100% (con 0% de ventana gráfica)
  • Opacidad media: 100% (al 85% de la vista)
  • Opacidad final: 0% (al 100% de la ventana gráfica)

efecto de desplazamiento divi del encabezado de alejamiento

Escalando hacia arriba y hacia abajo

Para hacer que el encabezado se «aleje», debemos reducirlo al 50% en el desplazamiento. Para hacer eso, actualice lo siguiente:

Escritorio

  • Habilitar escalar hacia arriba y hacia abajo: SÍ
  • Escala inicial: 100% (con una ventana gráfica del 5%)
  • Escala media: 50% (al 50% de la ventana gráfica)
  • Escala final: 50% (al 100% de la ventana gráfica)

Tableta

En la tableta, ajuste lo siguiente:

  • Escala inicial: 100% (al 30% de la ventana gráfica)
  • Escala media: 40% (al 50% de la ventana gráfica)

efecto de desplazamiento divi del encabezado de alejamiento

¡Eso se encarga de nuestra sección de alejamiento!

Crear la segunda sección del texto

Ahora podemos crear una nueva sección para el segundo bloque de contenido estático que aparecerá debajo del encabezado principal a medida que el usuario se desplaza hacia abajo en la página.

Agregar nueva sección

Para hacer esto, primero, cree una nueva sección regular debajo de la sección anterior.

efecto de desplazamiento divi del encabezado de alejamiento

Agregar fila de una columna

Luego agregue una fila de una columna a la sección.

efecto de desplazamiento divi del encabezado de alejamiento

Módulo de texto duplicado

Duplique el módulo de texto con el encabezado de la primera sección anterior y péguelo en la nueva columna de sección. Luego actualice el contenido del módulo de texto con el siguiente texto:

01
<h2>Begins Today...</h2>

efecto de desplazamiento divi del encabezado de alejamiento

Actualizar configuración de texto

Luego haga algunos ajustes de diseño al texto de la siguiente manera:

  • Título 2 Color del texto: # 333333
  • Encabezado 2 Tamaño del texto: 5vw

efecto de desplazamiento divi del encabezado de alejamiento

Actualizar configuración de fila

Una vez que el texto haya terminado, abra la configuración de la fila y actualice el ancho de la siguiente manera:

  • Ancho: 100%
  • Ancho Máx .: 100%

efecto de desplazamiento divi del encabezado de alejamiento

Configuraciones de sección

Luego abra la configuración de la sección y agregue un poco de relleno para nivelar un poco el espacio.

  • Acolchado: fondo 10vw

efecto de desplazamiento divi del encabezado de alejamiento

Eso es. Ahora podemos ver el resultado hasta ahora en la página en vivo.

efecto de desplazamiento divi del encabezado de alejamiento

Crear secciones de encabezado adicionales

Para crear secciones de encabezado adicionales, duplique las dos primeras secciones y muévalas a continuación. Esto se puede hacer fácilmente utilizando la función de capas o la vista de estructura alámbrica.

efecto de desplazamiento divi del encabezado de alejamiento

Luego actualice la imagen de fondo de la fila.

efecto de desplazamiento divi del encabezado de alejamiento

Cambie el texto del encabezado dentro de los dos módulos de texto.

efecto de desplazamiento divi del encabezado de alejamiento

Y eso es. Ahora puede comenzar a ver un diseño completo que comienza a formarse con el efecto de rumbo de alejamiento.

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

¡20% de Descuento en Divi!

Sitios web y usuarios ilimitados

Únete a más de 700.000 clientes y obten acceso a Divi, Extra, Bloom, Monarch y mucho más. Impulsa a todo tu equipo y crea sitios web ilimitados con una licencia.

¡Ir al descuento!



You have Successfully Subscribed!

Pin It on Pinterest

Share This