Cómo crear títulos de secciones pegajosas con div Div

La forma en que diseña sus páginas es un reflejo directo de su marca, por lo que, en algún momento de su diseño de lluvia de ideas, es posible que desee encontrar y agregar elementos de diseño únicos en su sitio web, lo que lo ayudará a generar un modelo en todas las páginas. Una forma única de resaltar la identidad de su sitio web es mediante el uso de secciones pegajosas. Estas secciones adhesivas seguirán el comportamiento de navegación de sus visitantes, pegados a la parte superior de su navegador. En este tutorial, le mostraremos cómo crear adhesivos de secciones pegajosas utilizando las opciones adhesivas de Div. Los títulos de las secciones pegajosas se enfatizarán menos una vez. ¡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á descargarlos 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!
Suscríbase a nuestro canal de YouTube 1. Cree el diseño de la sección Agregue una nueva sección de espaciado. Comience agregando una nueva sección a la página a la que trabaja. Abra la configuración de la sección y aplique algunos revestimientos superior e inferior.
Revestimiento superior: 200 PX
Finamiento inferior: 200 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, abra la configuración de la fila y cambie la configuración de tamaño de la siguiente manera:

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Ancho: 100%
Ancho máximo: 100%
Agregue un módulo de texto a la columna Agregar contenido H2 ahora, agregue un módulo de texto a la fila e ingrese un contenido H2.

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

2 Sección de fuentes: Poppins
Título 2 Fuente de peso: semi audac
Título 2 Alineación de texto: Centro
Rúbrica 2 Color de texto: # 000000
Rúbrica 2 Dimensión de texto:
Escritorio: 20 VW
Tableta y teléfono: 28 VW
Agregue la estructura de la fila # 2 de la columna vertebral Agregue otra fila justo debajo de la anterior utilizando las siguientes columnas Estructura: Dimensión Abra la configuración de la fila y cambie la configuración de tamaño en consecuencia:

Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1
Ancho: 100%
Ancho máximo: 100%
Agregue un módulo de texto a la columna 2 Agregar contenido y luego, agregue un primer módulo de texto a la columna 2 con un contenido descriptivo.
Configuración de texto Vaya a la pestaña Diseño del módulo y cambie la configuración de texto en consecuencia:

Texto de fuente: Poppins

Color de texto: # 000000
Tamano del texto:
Escritorio: 2VW
Tableta: 4VW
Teléfono: 5VW
Texto de la carta de espacio: -0.1VW
La altura de la línea de texto: 1.6em
Dimensión Modifique la configuración de tamaño para diferentes tamaños de pantalla.
Ancho:

Escritorio: 70%
Tableta y teléfono: 90%
Alineación del módulo: centro
Agregue el módulo de imagen a la columna 2 Cargue el interruptor de imagen al siguiente módulo, que es un módulo de imagen. Sube una imagen de tu elección.
Dimension Switch a la pestaña Diseño del módulo y forzar el ancho de imagen completo.

Fuerza el ancho completo: si

Espacio agregue un margen desde arriba.
Margen superior: 100 PX

Agregue un módulo de botón a la columna 2 Agregue una copia adicional, tenemos un módulo de botón. Agregue una copia de su elección.
Configuración del botón Cambiar la configuración del botón del módulo de acuerdo con:

Use estilos personalizados para el botón: Sí

Botón Tamaño de texto:
Escritorio: 1.5VW
Tableta: 2.5VW
Teléfono: 3.5VW
El color del texto del botón: #ffffff
El color de fondo del botón: # F6223E
El ancho del nudo del botón: 0 PX
El rasgo de botón de botón: 0 px
Botón de fuente: Poppins
Muestra el icono del botón: botón icono de icono de daplas: izquierda


Muestre el icono solo en el cursor para el botón: no
Espacio y complete la configuración del módulo agregando algunos valores de llenado personalizados en diferentes tamaños de pantalla.
Revestimiento superior:
Escritorio y tableta: 3%

Teléfono: 5%
Levante inferior:
Escritorio y tableta: 3%
Teléfono: 5%
Forro izquierdo:
Escritorio: 5VW
Tableta: 8VW
Teléfono: 12VW
Junta derecha:
Escritorio: 5VW
Tableta: 8VW
Teléfono: 12VW
Agregue un módulo de texto a la columna 2 Agregar contenido de la lista de balas El siguiente y último modo que agregaremos a esta columna es otro módulo de texto. Agregue los elementos de la lista a su elección al cuadro de contenido.
Configuración de texto Vaya a la pestaña Diseño del módulo y cambie la configuración de texto en consecuencia:
Texto de fuente: Poppins

Color de texto: # 000000

Tamano del texto:
Escritorio: 2VW
Tableta: 4VW
Teléfono: 5VW
Texto de la carta de espacio: -0.1VW
La altura de la línea de texto: 1.6em
El texto de configuración de alguien realiza algunos cambios en la configuración de la lista ordenada.
Texto listado Texto: # FF2340
Lista de línea de altura ordenada: 1.6em

Estilo comandado de la lista: Super-Roman
Posición del estilo de la lista ordenada: exterior
Agregue el color del texto negro a la lista de los artículos individuales en el cuadro de contenido, luego volveremos a convertir los artículos en negro navegando al cuadro de contenido y agregando manualmente un color de texto negro a cada una de la lista de la lista.
Dimensión Entonces, cambiaremos la configuración de tamaño para diferentes tamaños de pantalla.
Ancho:

Escritorio: 70%

Tableta y teléfono: 90%
Alineación del módulo: centro
Espacio aplicaremos algunos valores de margen personalizado y llenado y a la configuración de espaciado del módulo.
ENLIZACIÓN IZQUIERDA: 5%
Revestimiento derecho: 5%

2. Aplicar el efecto adhesivo al título de la sección Agregar efecto adhesivo ahora, que hemos establecido la base de nuestro diseño, es hora de tener el efecto que podría ver en la vista previa de esta publicación. Para hacer esto, giraremos toda nuestra fila pegajosa abriendo la configuración, accediendo a la pestaña avanzada y aplicando la siguiente configuració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
Cambie el índice de la fila Z para asegurarse de que la fila pegajosa permanezca debajo de nuestro diseño, asignaremos un índice “1” a nuestra fila pegajosa. Cuando ejecute, verá el giro pegajoso y su módulo de texto va debajo de los módulos de la segunda fila.
IND ÍNDICE: 1
Agregue el modo de mezcla de la columna 2 (fila 2) Sin embargo, como puede ver en la vista previa de esta publicación, el título de la sección pegajosa es visible en cualquier momento. Para lograr este efecto, agregaremos un módulo de mezcla en la segunda columna de la segunda fila. Sin embargo, esto ayudará a mezclar la fila adhesiva y los módulos de segunda línea, manteniendo un índice bajo para la fila pegajosa.
Modo de mezcla: multiplicación

Cambie la configuración del texto pegajoso H2 Aplicaremos algunos estilos adhesivos a nuestro módulo de texto a su vez # 1. Comience cambiando el color del texto H2 en un estado adhesivo y aplique un texto personalizado.
Color Text Sticky H2: #FFFFFFFFTITLUL 2 TEXTO DE TEXTO: Segunda opción (consulte a continuación Pantalla de impresión)

Título 2 Texto de sombra de color:
Valor predeterminado: RGBA (0.0,0,0)

Sticky: RGBA (0.0,0,0.08)
Cambie el espacio del módulo de texto pegajoso, cambiaremos y la posición del módulo utilizando un margen negativo pegajoso en la configuración de espaciado
Aterrizaje margen izquierdo: -35%
Aumente el tiempo de transición del módulo de texto y para garantizar una transición suave, aumentaremos la duración de la transición en la pestaña avanzada.
Duración de la transición: 500 ms
3. Reutilizar la sección La sección de clonación ahora que tenemos una sección completa, incluido el título de la sección pegajosa, podemos reutilizar la sección completa cada vez que lo deseamos.


Cambie el contenido del título Asegúrese de cambiar el contenido del contenido en primer lugar.
Haga coincidir el tamaño del texto con la longitud del personaje de acuerdo con cuántos caracteres tiene su nuevo título de H2, recomendamos ajustar el tamaño del Título 2.

Cambie todos los demás contenidos e imágenes y, por supuesto, deberá cambiar el otro contenido en la sección duplicada. ¡Eso es todo!
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