Cómo cubrir su sección de héroe sobre el pergamino con las opciones pegajosas de Div

Si actualmente está trabajando en el diseño del héroe de su sitio web dentro del DIV, puede buscar algunas formas interesantes de agregar un efecto en el desplazamiento. Con las opciones pegajosas de DIV, son posibles muchas posibilidades de diseño. En el tutorial de hoy, destacaremos una de estas posibilidades. Le mostraremos, paso a paso, cómo cubrir su sección de desplazamiento, mientras aplica estilos adhesivos sin esfuerzo. En la primera parte del tutorial, nos centraremos en crear el diseño, ¡y en la segunda parte pasaremos a la configuración pegajosa que sean necesarias! Podrá descargar el archivo JSON de forma gratuita.
Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

Descargue el aspecto gratuito para poner su mano en el aspecto gratuito, primero deberá descargarlo 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. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
1. Cree una estructura de diseño Agregue un nuevo color de fondo en la primera parte del tutorial, nos centraremos en crear el diseño. En la segunda parte, aplicaremos los efectos pegajosos. Cree una nueva página o abra una existente y agregue una nueva sección. Abra la configuración de la sección y aplique un color de fondo.
Color de fondo: RGBA (53,44,43,0.17)
Espacio ir a la pestaña de diseño de la sección y cambiar los valores de espaciado de la siguiente manera:

Revestimiento superior: 13VH
Finamiento inferior: 0 PX
Agregue la estructura de la columna de la fila # 1 Continuar agregando una nueva fila utilizando la siguiente estructura de columna:

Dimensión sin agregar módulos a él, abra la configuración de línea, cambie a la pestaña de diseño y modifique la configuración de tamaño en consecuencia:

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 2
Igualar las alturas de la columna: sí
Ancho:
Escritorio: 80%
Tableta y teléfono: 90%
Ancho máximo: 2580 PX
El espacio elimina todas las deflantes predeterminadas y sin fondo.

SUS Lingo: 0 PX
Reinicio inferior: 0 PXSETS Columna 1 Espacio Luego abra la configuración de la columna 1 y cambie la configuración de espaciado de la siguiente manera:
Revestimiento superior:

Escritorio: 25VH
Tableta y teléfono: 10 VH
Levante inferior:
Escritorio: 25VH
Tableta y teléfono: 10 VH
ENLIZACIÓN IZQUIERDA: 5%
Revestimiento derecho: 5%
Configuración Columna 2 Imagen de fondo luego abra la configuración de la columna 2 y cargue una imagen de fondo.
Tamaño de la imagen de fondo: portada


Posición de la imagen de fondo: Centro
Visibilidad Para garantizar que funcione en dimensiones de pantalla más pequeñas, ocultaremos la segunda columna en la pestaña avanzada para tableta y teléfono.
Agregue el módulo de texto no. 1 en la columna 1 Agregar contenido H1 es hora de agregar módulos, comenzando con un primer módulo de texto en la columna 1. Agregue el contenido H1 a su elección.


Configuración de texto H1 Vaya a la pestaña Diseño del módulo y cambie la configuración de texto H1 de la siguiente manera:

Font Antet: Texto Crimson

Encabezado de texto de tamaño:
Escritorio: 6VH
Tableta: 50 PX
Teléfono: 40 PX
Altura de la línea de dirección: 1.2em
Agregue un módulo divisor a la visibilidad de la columna 1, luego agregaremos un módulo divisor en la columna 1. Asegúrese de que se active la opción “Muestra el divisor”.
Divisor del espectáculo: si

La línea va a la pestaña Diseño del módulo y cambia la configuración de la línea.
Color de línea: # 35241F

Dimensión Modifique la configuración de tamaño.
Peso del divisor: 5 PX

Ancho: 21%
Altura: 5 PX
Agregue el módulo de texto no. 2 en la columna 1 Agregue el contenido de descripción La siguiente y última manera que necesitamos en la columna 1 es otro módulo de texto. Agregue un contenido de descripción a su elección.
Configuración de texto Cambie la configuración de texto del módulo de la siguiente manera: Fuente Texto: Karla

Tamaño del texto: 18 PX

La altura de la línea de texto: 2.1em
Agregue la estructura de la fila # 2 de la columna para que este efecto funcione, es importante incluir una nueva línea debajo de la primera sección. Esta fila necesitará un color de fondo y suficiente altura y ancho, de modo que la primera fila se ajuste debajo de ella. Para este diseño, utilizamos la siguiente estructura de columna:
El color de fondo entonces, agregaremos un color de fondo.
Color de fondo: # 35241F


Dimensión Cambiamos la configuración de tamaño.

Ancho: 100%
Ancho máximo: 3000 PX

Espacio junto con la configuración del espacio.
Revestimiento superior:
Escritorio: 30 VH

Tableta y teléfono: 0 VH
Revestimiento inferior: 30 VH
ENLIZACIÓN IZQUIERDA: 10%
Revelaje derecho: 10%
Agregue el módulo de imagen a la columna 1 Cargue la imagen (solo en la tableta y el teléfono) Luego, agregaremos un módulo de imagen en la primera columna. Este módulo reemplazará la imagen utilizada principalmente en dimensiones de pantalla más pequeñas. Use una imagen solo para tableta y teléfono.
Espacio ir a la pestaña Diseño del módulo y cambie el borde inferior de la siguiente manera:
Margen inferior:

Escritorio: 0 PX

Tableta y teléfono: 50 px
Agregue un módulo divisor a la visibilidad de la columna 1 y luego, agregue un módulo divisor en el módulo de imagen y asegúrese de que se active la opción “Pantalla”.
Divisor del espectáculo: si
La línea va a la pestaña Diseño del módulo y cambia el color de la línea.

Color de línea: #ffffff
Dimensión Modifique la configuración de tamaño.

Peso del divisor: 5 PX
Altura: 5 PX

Agregue un módulo de texto a la columna 1 Agregue el contenido H2 y luego, agregue un módulo de texto con un contenido de su elección. Text H2 Modificar la configuración de texto H2 de la siguiente manera:
Título 2 Fuente: Texto Crimson
Rúbrica 2 color de texto: #ffffff

Rúbrica 2 Dimensión de texto:

Escritorio: 6VH
Tableta: 50 PX
Teléfono: 40 PX
Agregue un módulo de texto a la columna 2 Agregar contenido de descripción en la columna 2, el único módulo que necesitamos es un módulo de texto con un contenido de descripción.
Configuración de texto Cambie la configuración de texto del módulo de la siguiente manera:
Texto de fuente: Karla
El peso de la fuente de texto: ultra luz

Tamano del texto:

Escritorio: 30 PX
Tableta y teléfono: 18 PX
La altura de la línea de texto: 2.2em
Color de texto: Abierto
2. Aplicar los efectos adhesivos Cambiar los valores del índice de fila R fila # 1 Ahora, que hemos establecido la base de nuestro diseño, podemos centrarnos en algunos pasos adicionales para crear el efecto de cobertura del héroe. Comience abriendo la configuración de la primera fila y cambiando el índice z a la pestaña avanzada.
IND ÍNDICE: 1
Fila # 2 Cambio e índice z Segunda fila. Este valor debe ser mayor que el de la primera fila.
IND ÍNDICE: 2

Gire el giro # 1 pegajoso luego, abra la configuración de la primera fila nuevamente y aplique un efecto pegajoso en la pestaña avanzada. Es importante asegurarse de que el límite inferior inferior esté configurado en sección.
Posición pegajosa: adhiérase a la parte superior

Pequeño límite inferior: sección
Brecha de los elementos circundantes adhesivos: sí

Transición predeterminada y estilos adhesivos: sí
Columna 1 Configuración pegajosa de fondo pegajoso Ahora que la fila se ha transformado pegajoso, podemos comenzar a aplicar algunos estilos pegajosos a los elementos infantiles. Comience por abrir la configuración de la columna 1 y aplique el siguiente fondo pegajoso: Fondo pegajoso: #
Sticky Transform sesgue, explore la pestaña de diseño y aplique el siguiente valor de inclinación adhesiva:
Glue de fondo pegajoso: -4 grados
Columna 2 Configuración adhesiva adhesiva Transformar el sesgo en la columna 2, usaremos el mismo valor de inclinación adhesiva en la configuración de transformación.

Glue de fondo pegajoso: -4 grados
Modo de texto Transformación LIPE (X2) y completaremos el diseño y el efecto cambiando la distorsión más baja a 4 grados para ambos módulos de texto en la columna 1 en un estado pegajoso. Esto unifique el valor inclinado negativo de la columna pegajosa.


Sticking Sticking: 4 grados
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio

Móvil