homefinance blog
Crear un efecto de encabezado bajo puede ser un elemento de diseño impresionante para atraer a los usuarios con su contenido. El efecto es similar al que se ve en la página Apple MacOS Catalina. En este tutorial, le mostraremos cómo crear una transición del encabezado que se encoge desplazando. El truco es agregar la escala vertical y los efectos de desarrollo del movimiento en una fila completa para crear el efecto de disminución. El resultado es una hermosa transición, que deja a los usuarios gratamente sorprendidos. Vamos a empezar. Tire con el ojo Descargue el aspecto gratuito para poner su mano en los dibujos en este tutorial, primero lo descargará usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos
Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia.
Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Para importar la apariencia en su página, simplemente extraiga el archivo zip y extraiga el archivo JSON al constructor. Pasemos al tutorial, ¿verdad? Qué necesitas para empezar
Para comenzar, deberá hacer lo siguiente:
Si aún no lo ha hecho, instale y active el tema de Div.
Cree una nueva página en WordPress y use Divi Builder para editar la página principal (Visual Builder).
Elija la opción “Construir desde cero”.
Después de eso, tendrá un lienzo vacío para comenzar a diseñar en el Div. Cómo crear un efecto de encabezado de reducción en la altura de la sección para este diseño, debemos ofrecer a nuestra sección una altura que se extienda más allá de la altura de la pantalla para proporcionar espacio para el efecto de desarrollo.
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)
Forro: 0 px arriba, 0 px, abajo
La fila después de la altura de la sección está completa, agregue una fila con una columna a la sección.
Fila la imagen de fondo 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 un ancho de al menos 1920 PX (lo suficientemente grande como para cubrir la pantalla completa de un monitor grande).
El tamaño y el espacio de la fila Una vez que el fondo está en su lugar, debemos asegurarnos de que nuestro turno se extienda a lo largo del ancho y la altura de la página. Para esto, actualice la siguiente configuración de diseño de línea:
El ancho de la canaleta: 1
Ancho: 100%
Ancho máximo: 100%
Altura: 100 VH
Forro: 0 px arriba, 0 px abajo
Sombra de caja de fila y luego dale a la fila un tono de caja. No lo veremos hasta que agregamos el efecto de desfile que cambia el tamaño de la fila para crear el efecto de reducción. Sombra de la caja: ver la captura de pantalla
Box Shadow Posición vertical: 0px
Poder de poco claro de la sombra de la caja: 50 px
Agregue un módulo de texto para el texto del encabezado y luego, agregue un nuevo módulo de texto dentro de la fila.
Contenido de texto Actualice el contenido de su cuerpo con el siguiente título H2:
Su viaje
Configuración de diseño de texto y luego actualice la configuración de diseño de texto de la siguiente manera:
Fuente del Título 2: Poppins:
Título 2 Fuente de peso: Bold
Título 2 Alineación de texto: Centro
Rúbrica 2 Dimensión de texto: 10 VW
Título 2 Altura de la línea: 1.3em
La altura de la columna y la superposición del fondo Una vez que el módulo de texto está en su lugar, debemos personalizar la configuración de nuestra columna, de modo que se convierta en una hermosa superposición para el fondo de nuestras líneas. Para hacer esto, tendremos que actualizar el color de fondo con un color semi -transparente y darle a la columna una altura del 100%.
Abra la configuración para la columna 1 y actualice lo siguiente:
Color de fondo:
En la pestaña avanzada, agregue los siguientes CSS personalizados en el elemento principal: Altura: 100%
Luego agregue un poco de relleno a la columna …
Revestimiento (escritorio): top 35vh
Revestimiento (tableta): top 40vh
Efecto de la columna luego, luego agregue un efecto de desplazamiento en la columna que desaparecerá la columna (con el color de fondo y el texto) en el desplazamiento. Para hacer esto, actualice lo siguiente: debajo de la pestaña Fading in y out …
Habilitar el desvanecimiento dentro y fuera: Sí
Opacidad inicial: 100% (al 0% de visualización) Opacidad promedio: 100% (al 70% de vista)
Opacidad final: 0% (a 80% de visualización)
Agregue los efectos de desarrollo en una fila Ahora podemos comenzar a agregar los efectos de desarrollo seguidos. Movimiento vertical Abra la configuración de la fila y actualice lo siguiente: efecto de movimiento vertical (escritorio)
Habilitar el movimiento vertical: sí
Comenzando el desplazamiento: 0 (a 5% de vista)
GAPACIÓN PROMEDIA: 4.5 (a 50% de vista)
Compensación final: 4.5 (a 100% de vista)
Efecto del movimiento vertical (tableta)
Comenzando el desplazamiento: 0 (al 30% de vista)
Asegúrese de actualizar el efecto de movimiento del activador en la parte inferior del elemento. Esta es la clave para que el efecto de desarrollo funcione. Para hacer esto, actualice lo siguiente:
Disparador del efecto de movimiento: la parte inferior del artículo
Desventirse dentro y fuera para hacer que el encabezado se desvanezca justo antes de dejar la parte superior de la ventana en progreso, abra la configuración de la fila y actualice lo siguiente: efecto de desfile interior y exterior
Habilitar el desvanecimiento dentro y fuera: Sí
Opacidad inicial: 100% (al 0% de vista)
Opacidad promedio: 100% (con 85% de visualización)
Opacidad final: 0% (a 100% de vista)
Habilidad de arriba a abajo para que el encabezado sea “encogido”, debe reducirlo al 50% en el pergamino. Para esto, actualice lo siguiente: Desktop
Active la escala hacia arriba y hacia abajo: sí
Escala de inicio: 100% (con una vista del 5%)
Escala promedio: 50% (al 50% de vista)
Escala de conclusión: 50% (con una vista al 100%)
Tableta tableta, ajuste lo siguiente:
Escala de inicio: 100% (al 30% de vista)
Escala promedio: 40% (a 50% de visualización)
¡Esto está a cargo de nuestra sección para reducir el título! Creando la segunda sección del texto ahora podemos crear una nueva sección para el segundo bloque de contenido estático que aparecerá bajo el título principal a medida que el usuario derribe la página. Agregue una nueva sección para esto, primero, cree una nueva sección habitual debajo de la sección anterior. Coloque una fila con una columna y luego agregue una fila con una columna a la sección.
Duplicar el modo de texto Duplicate el módulo de texto con el título de la primera sección anterior y péguelo a la nueva columna de la sección. Luego actualice el contenido del módulo de texto con el siguiente texto:
comienza hoy …
Actualice la configuración del texto y luego, haga algunos ajustes de diseño de texto de la siguiente manera:
Rúbrica 2 Color de texto: # 333333
Rúbrica 2 Dimensión de texto: 5VW
Actualice la configuración de la fila después de que termine el texto, abra la configuración de la fila y actualice el ancho de la siguiente manera:
Ancho: 100%
Ancho máximo: 100%
Configuración de la sección Luego abra la configuración de la sección y agregue algunos rellenos para uniformar el espacio ligeramente.
Revestimiento: inferior 10 VW
Eso es todo. Ahora podemos verificar el resultado hasta ahora en la página en vivo.
Creación de secciones de título adicionales para crear secciones de título adicionales, copie las dos primeras secciones y muévalas a continuación. Esto se puede hacer fácilmente utilizando la función de capa o la vista de estructura alámbrica.
Luego actualice la imagen de fondo de la fila.
Cambie el texto del encabezado de los dos módulos de texto.
