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

Vistazo

Descarga el diseño GRATIS

Para poner sus manos en los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.

Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo JSON a Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

1. Si aún no lo has hecho, instala y activa el tema Divi .
2. Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
3. Elija la opción «Construir desde cero».

Después de eso, tendrás 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, debemos darle a nuestra sección una altura que se extienda más allá de la altura de la ventana gráfica para dar algo de espacio para que funcione el efecto de desplazamiento.

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

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

La fila

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

Imagen de fondo de la fila

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

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 del canalón: 1
• Ancho: 100%
• Ancho máximo: 100%
• Altura: 100vh
• Relleno: 0px arriba, 0px abajo

Sombra de cuadro de fila

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

• Sombra de cuadro: ver captura de pantalla
• Posición vertical de la sombra del cuadro: 0px
• Fuerza de desenfoque de sombra de cuadro: 50px

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

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

Contenido del texto

Actualice el contenido del cuerpo con el siguiente encabezado H2:

Configuración de diseño de texto

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

• Encabezado 2 Fuente: Poppins:
• Encabezado 2 Peso de fuente: Negrita
• Encabezado 2 Alineación de texto: Centro
• Título 2 Tamaño del texto: 10vw
• Encabezado 2 Altura de línea: 1,3 em

Superposición de altura de columna y fondo

Una vez que el módulo de texto está en su lugar, debemos personalizar la configuración de nuestra columna para que se convierta en una buena superposición para el fondo de nuestra 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:

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

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

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

Efecto de desplazamiento de columna

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

En la pestaña Aparición y desaparición gradual…

• Habilitar fundido de entrada y salida: SÍ
• Opacidad inicial: 100 % (a 0 % de ventana gráfica)
• Opacidad media: 100 % (al 70 % de ventana gráfica)
• Opacidad final: 0 % (al 80 % de la ventana gráfica)

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 de inicio: 0 (al 5 % de ventana gráfica)
• Desplazamiento medio: 4,5 (al 50 % de la ventana gráfica)
• Desplazamiento final: 4,5 (al 100 % de la ventana gráfica)

Efecto de desplazamiento de movimiento vertical (tableta)

• Compensación inicial: 0 (al 30 % de la ventana gráfica)

Asegúrese de actualizar el efecto de activación 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:

• Disparador de efecto de movimiento: parte inferior del elemento

Desvanecimiento de entrada y salida

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

Efecto de desplazamiento de aparición y desaparición gradual

• Habilitar fundido de entrada y salida: SÍ
• Opacidad inicial: 100 % (a 0 % de ventana gráfica)
• Opacidad media: 100 % (al 85 % de ventana gráfica)
• Opacidad final: 0 % (al 100 % de la ventana gráfica)

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 escalado hacia arriba y hacia abajo: SÍ
• Escala inicial: 100 % (al 5 % de ventana gráfica)
• 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)

¡Eso se ocupa de nuestra sección de encabezado de alejamiento!

Creación de la segunda sección de 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.

Agregar fila de una columna

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

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 columna de la nueva sección. Luego actualice el contenido del módulo de texto con el siguiente texto:

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
• Título 2 Tamaño del texto: 5vw

Actualizar configuración de fila

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

• Ancho: 100%
• Ancho máximo: 100%

Ajustes de sección

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

• Acolchado: 10vw inferior

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

Creación de 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 usando la función de capas o la vista de estructura alámbrica.

Luego actualice la imagen de fondo de la fila.

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

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

Resultado final

Pensamientos finales

El efecto de desplazamiento del encabezado de alejamiento es bastante simple (y rápido) de crear. Pero el diseño puede ser un poco complicado para hacerlo bien en todos los tamaños de navegador. La descarga provista debería ayudarlo a explorar un modelo de trabajo que puede modificar para su sitio web. Con suerte, lo encontrará útil e inspirador.

Espero escuchar de usted en los comentarios.

¡Salud!