Cómo reducir el tamaño del encabezado global al desplazarse con el constructor de temas de Div ‘

Al diseñar un encabezado global fijo, recomendamos reducir la altura del encabezado cuando sus visitantes corren. Ayuda a reducir el espacio que ocupa el encabezado global en el apogeo de la ventana de los visitantes. En este tutorial, lo guiaremos a través de ese proceso. Comenzaremos construyendo el menú y luego agregaremos algunos códigos JQuey y CSS para activar el efecto. ¡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 encabezado global de forma gratuita para poner su mano en la plantilla Global de encabezado gratuita, 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.
Te has suscripto satisfactoriamente. ¡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. Vaya a Div Div Theme Builder y agregue una nueva plantilla Access The Divide Theme Builder Comience a acceder al Builder de Theme Div.
Comience a crear encabezado global, haga clic en “Build Global Header” y seleccione “Construir encabezado global”.

2. Comience a crear un fondo de configuración de encabezado global Una vez que esté en el editor de plantillas, notará una sección. Abra la sección y cambie el color de fondo a blanco.

Color de fondo: #ffffff
Dimension Switch a la pestaña Diseño del módulo y cambie el ancho.

Ancho: 100%
Extienda el cambio y el revestimiento superior e inferior de la sección.

Revestimiento superior: 2VW
Revestimiento inferior: 2VW
Box Shadow y separe el contenido de la página del encabezado global agregando una sombra de caja sutil a la siguiente sección.

Poder de poco claro de la sombra de la caja: 50 px
Color de la sombra: RGBA (0.0,0,0.13)
ID CSS y luego agregue una ID de CSS a la sección. Más tarde, en el tutorial, utilizaremos esta ID de CSS para crear el efecto de encabezado global que se reduce en el desplazamiento.

ID de CSS: holgazanería
El elemento principal va a la pestaña Avanzada, acceda a la configuración CSS personalizada y arregle la sección agregando dos líneas de código CSS al elemento principal de la sección. Posición: fijo;

Arriba: 0;
El índice Z para garantizar que la sección permanezca en la parte superior de toda la página y el contenido de la publicación, aumentaremos el índice de la sección Z.

IND ÍNDICE: 99999
Agregue una nueva línea a la estructura de la columna después de haber completado la configuración de la columna, continúe agregando una nueva línea utilizando la siguiente estructura de columna: dimensionamiento sin agregar módulos, abra la configuración de fila y cambie el tamaño en consecuencia:

Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1
Igualar las alturas de la columna: sí
Ancho máximo: 100%
El espacio elimina el llenado predeterminado e inferior de la fila a continuación.
SUS Lingo: 0 PX

Finamiento inferior: 0 PX
ID CSS Luego vaya a la pestaña avanzada y agregue un CSS ID en una fila. Necesitaremos esta ID de CSS más adelante en el tutorial para que el efecto de reducción funcione.
ID CSS: El ancho de la fila

El elemento principal por último, pero no menos importante, para garantizar que todas las columnas permanezcan una al lado de la otra en dimensiones de pantalla más pequeñas y para centrar el contenido de la columna, agregaremos dos líneas de código CSS al elemento principal de la fila.
Pantalla: Flex;

Alinine-Ritams: Centro;

Agregue el módulo de imagen a la columna 1 Cargue el logotipo es hora de agregar módulos, comenzando con un módulo de imagen en la columna 1. Cargue un logotipo con un fondo transparente.
Dimensión Modifique el ancho del módulo a continuación.

Ancho: 5VW (escritorio), 9VW (tableta), 13VW (teléfono)

Agregue un módulo de menú en la columna 2 Seleccione el menú Pase a la segunda columna e ingrese un módulo de menú. Seleccione un menú de su elección.
Retire el color de fondo Retire el color de fondo del módulo a continuación.

Cambio de apariencia a la pestaña Diseño del módulo y cambie el aspecto.

Estilo: centrado

Dirección del menú desplegable: abajo
Texto del menú luego abra la configuración del texto del menú y realice algunos cambios. Menú: Rubik
Color de texto del menú: # 000000

El tamaño del texto del menú: 0.9VW (escritorio), 2VW (tableta), 3VW (teléfono)
El menú desplegable
El color del fondo de caída: #fffff
Menú de la línea de color Deny: # 2970fa

Iconos y complete la configuración del módulo cambiando el color del icono del menú de hamburguesas en la configuración del icono.
Icono de menú de hamburguesas de color: # 2970fa
Agregue un módulo de botón a la columna 3 Agregue una copia Pase a la siguiente y última columna. Agregue un botón con una copia de su elección.

Cambio de alineación La alineación del módulo.
Alineación de botones: correcto

Botón de configuración Botón Stilet según:

Use estilos personalizados para el botón: Sí
Tamaño de texto de texto: 0.8VW (escritorio), 1.5VW (tableta), 2VW (teléfono)

El color del texto del botón: #ffffff
El color de fondo del botón: # 2970fa
El ancho del nudo del botón: 0 PX
El rasgo de botón de botón: 0 px
Distancia entre letras y botones: 1 PX
Botón de fuente: Rubik

El estilo de la fuente del botón: mayúscula
Espacio y agregue algunos valores de llenado personalizados en diferentes tamaños de pantalla.
Revestimiento superior: 0.8VW (escritorio), 1.8VW (tableta), 2.5VW (teléfono)
Informe inferior: 0.8VW (escritorio), 1.8VW (tableta), 2.5VW (teléfono)

ENLIZACIÓN IZQUIERDA: 1.5VW (escritorio), 3VW (tableta), 4VW (teléfono)
Revestimiento derecho: 1.5VW (escritorio), 3VW (tableta), 4VW (teléfono)
Sombra de casilla Complete la configuración del módulo agregando un tono de caja sutil.
Box Shadow Posición vertical: 20 PX
Poder de poco claro de la sombra de la caja: 30 px

Color de la sombra: RGBA (41.112.250.0.2)
Agregue un módulo de código en la columna 2 Ingrese el código JQuey y CSS La siguiente y última parte de este tutorial administra el efecto de reducción, utilizando los dos ID de CSS que atribuimos a nuestra sección y fila. Agregue un módulo de código en la columna 2 con las siguientes líneas del código JQuey y CSS. Asegúrese de poner el código jQuery entre etiquetas de script y código CSS entre etiquetas de estilo.
$ (Ventana) .scroll (function () {
If ($ (documento) .scrolltop ()> 50) {

$ (‘#Section-spadding’). AddClass (‘reducción de reducción’);
$ (‘##Width de fila’). AddClass (‘aumentar-width’);
} más {
$ (‘#Sección-Padding’). RemoveClass (‘Reducción-Pading’);
$ (‘#Section-spadding’). AddClass (‘Transición lenta’);
$ (‘##Width’).
$ (‘##Width’). AddClass (‘transición lenta’);
}
});
}).
Transición: todos los 0.9 aliviar 0s;
Top de relleno: 0px! IMPORTANTE;
Bottom: 0px! IMPORTANTE;
}
. Incruste-ancho de la fila {
Transición: todos los 0.9 aliviar 0s;
Ancho: 100%! Importante;
}
.Slow-Transition {
Transición: todos los 0.9 aliviar 0s;
}
#Cuenta principal {
margen-top: 5VW;
}
3. Guarde los cambios del constructor y vea el resultado después de haber agregado el código, ¡puede guardar todos los cambios que realizó en el encabezado global y ver el resultado en su sitio web!
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