Cómo revelar su encabezado global mientras se desplaza hacia arriba y se esconde mientras se desplaza hacia abajo con Div

Cuando crea su encabezado global, debe considerar muchas cosas. Los elementos que coloca en el encabezado deben ayudar a sus visitantes a navegar fácilmente. Para reducir el tiempo dedicado a navegar, muchos diseñadores web optan por un encabezado fijo fijo, lo que permite a los visitantes ir a otras páginas o publicaciones de inmediato. Es muy conveniente, pero cuando crea un encabezado fijo, una gran parte de la altura de visitar a sus visitantes. Permitiendo aparecer menos simultáneamente. Si no está dispuesto a hacer ese sacrificio, sabes que no deberías. Puede beneficiarse de las ventajas de un encabezado fijo, lo que permite que el encabezado global revele cuándo sus visitantes corren y lo ocultan cuando se agota. Hoy, lo guiaremos ocultando y revelando el encabezado global utilizando el creador de temas de Divin. ¡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. 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. Acceda al constructor de temas Div Div y agregue una nueva plantilla Access Div Theme Builder Comience accediendo al constructor de temas Divide.
Comience a crear encabezado global allí, haga clic en “Agregar encabezado global” y seleccione “Build Global Header”.

2. Comience a crear un color de fondo de configuración de encabezado global en el editor de plantillas, notará una sección. Abra esa sección y cambie su color de fondo.

Color de fondo: #ffffff
Dimension Switch a la pestaña de diseño y asigne un ancho del 100% a su sección.

Ancho: 100%
El espacio agregue algunos revestimientos personalizados desde arriba e abajo.

Revestimiento superior: 2VW
Revestimiento inferior: 2VW
Box Shadow Aplicaremos una sombra de caja sutil y nuestra sección.

Poder de poco claro de la sombra de la caja: 50 px
Shadow Color: RGBA (0.0,0,0.08)
ID CSS Más tarde, en este tutorial, necesitaremos un código personalizado para tener el efecto. Para prepararnos para esto, agregamos una ID de CSS a la sección.

ID de CSS: Sección Global-Header
El elemento principal también convertirá la sección en una cabeza fija agregando dos líneas de código CSS al elemento principal de la sección. Posición: fijo; arriba: 0;

El índice Z ahora, para garantizar que nuestra sección aparezca en la parte superior de toda la página o el contenido de la publicación, también aumentaremos el índice Z en la configuración de visibilidad.
IND ÍNDICE: 99999

Agregue una nueva línea a la estructura de la columna después de haber completado todas las configuraciones de sección, continúe agregando una nueva línea a la sección utilizando la siguiente estructura de columnas:
Dimensión sin agregar módulos, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la pantalla.

Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1
Igualar las alturas de la columna: sí
Ancho: 100%
Ancho máximo: 100%
El espacio elimina y todos los rellenos predeterminados, arriba e inferior.
SUS Lingo: 0 PX

Finamiento inferior: 0 PX
El elemento principal enfoca el contenido de la columna y permite que las columnas permanezcan una al lado de la otra en un tamaño más pequeño de la pantalla, agregando dos líneas de código CSS al elemento principal de la fila.
Pantalla: Flex;

Alinine-Ritams: Centro;
Agregue el módulo de seguimiento de las redes sociales a la columna 2 Agregar redes sociales es hora de agregar módulos, comenzando con un módulo de seguimiento de las redes sociales en la columna 1. Agregue las redes sociales que desea mostrar.
Restablezca los estilos de redes sociales individuales continúan restableciendo los estilos de cada red social.

Agregue el espacio individual de las redes sociales que también necesitará abrir la configuración de cada red social individual y agregar un revestimiento más bajo a la configuración de espaciado.

Revestimiento inferior: 0.5 VW

Alineación Después de haber agregado individualmente el relleno inferior a cada red social, regrese a la configuración general del módulo. Cambie a la pestaña de diseño y cambie la alineación del módulo.
Alineación del módulo: centro

Configuración predeterminada para iconos cambiados y el color del icono en la configuración del icono.
Icono de color: # 000000


Coloque el cursor en la configuración del icono y cambie el color del icono al cursor.
Icono de color: # C2AB92

Llena el borde de la configuración del módulo agregando un borde inferior a la configuración del borde.
Ancho de borde inferior: 1 PX

Color de borde inferior: # 000000
Agregue un módulo de menú en la columna 2 ¡Seleccione el menú Pase a la siguiente columna! Agregue un módulo de menú y seleccione un menú de su elección.
Cargue el logotipo Subir un logotipo en el siguiente modo.

Retire el color de fondo y elimine el color de fondo.

Apariencia Entonces, pase a la pestaña de diseño y asegúrese de que se apliquen la siguiente configuración al aspecto:

Estilo: centrado

Dirección del menú desplegable: abajo
El texto del menú predeterminado continúa cambiando la configuración del menú de la siguiente manera:
Color de enlace activo: # C2AB92

Menú de fuentes: Cormoran Garamond
Color de texto: # 000000
Menú Tamaño del texto: 1VW (escritorio), 2VW (tableta), 3VW (teléfono)
Coloque el cursor en el menú de texto Cambie el texto del menú al cursor.
Color de texto del menú: # C2AB92

El menú desplegable luego cambia el color de la línea de menú desplegable en la configuración del menú desplegable.
Menú de línea de color decant: # 000000

Iconos Cambiamos el color del icono del menú de hamburguesas y en la configuración de los iconos.
Icono de menú de hamburguesas de color: # 000000

Dimensión Continúe cambiando el ancho del logotipo máximo en diferentes tamaños de pantalla en la configuración del tamaño. Logotipo máximo: 5VW (escritorio), 10VW (tableta), 13VW (teléfono)
Enlace el menú CSS y complete la configuración del módulo agregando dos líneas de código CSS al enlace del módulo en la pestaña avanzada. Botón de relleno: 1VW;

Border-Bottom: 1px Solid #000;
Agregue un módulo de texto a la columna 3 ¡Agregue una copia al último módulo! Allí, la única forma en que necesitamos es un módulo de texto.

Agregue un enlace Este módulo servirá como CTA. Agregue un enlace a su elección.
Dirección de URL del módulo: #

Configuración de texto predeterminada Vaya a la pestaña Diseño del módulo y cambie la configuración de texto en consecuencia:

Texto de fuente: Cormoran Garamond
Color de texto: # 000000

Tamaño de texto: 1VW (escritorio), 2VW (tableta), 3VW (teléfono)
Coloque el cursor en la configuración del texto Cambie el color de texto al cursor.
Color de texto: # C2AB92
La dimensión continúa cambiando la configuración de tamaño del módulo en diferentes tamaños de pantalla.

Ancho: 12VW (escritorio), 18VW (tableta), 22VW (teléfono)
Alineación del módulo: centro

Espacio y agregue un poco de relleno a continuación a la configuración de espaciado.
Revestimiento inferior: 0.5 VW
Llena el borde de la configuración del módulo agregando un borde inferior.

Ancho de borde inferior: 1 PX
Color de borde inferior: # 000000

Agregue un módulo de código en la columna 2. Ingrese el código JQuey y CSS una vez que haya diseñado todos los módulos en una fila, es hora de hacer el efecto de la revelación / escondite. Para hacer esto, necesitaremos agregar un código personalizado a un módulo de código que colocaremos en la columna 2. Este código funcionará en cualquier sección que agregue, independientemente de cómo diseñe su encabezado o qué módulos usen, solo asegúrese de que Ha agregado la ID de CSS a su sección. Coloque el código JQuery entre las etiquetas de script y el código CSS entre las etiquetas de estilo como se muestra en la pantalla de impresión a continuación. JQuery (function ($) {topposition = 0;
$ (Ventana) .scroll (function () {
var scrollmovement = $ (ventana) .scrolltop ();

If (topposition topposis) {
$ (‘#Global-header-section’).
ps
} más {
$ (‘#Global-header-section’). RemoveClass (‘hide-header’);
ps
}
}
Topposis = movimiento de desplazamiento;
});
});#Cuenta principal {
Margen-top: 7VW;
}
. Carretera de cabecera {
Opacidad: 0;
margen -top: -200px! importante;
}
.MOSTRAR ENCABEZADO {
Opacidad: 1;
margen-top: 0px! importante;
}
#-Sección Global-Header {
-WebKit-Transition: ¡todas las 0.5s facilitadas!
-Moz-Transition: ¡todos los 0.5s facilitados!
-O-transición: ¡todas las 0.5 sencillas! Importantes;
-Ms-Transition: ¡todos los 0.5s facilitados!
Transición: ¡todos los 0.5 sencillas! Importantes;
}
3. Guarde los cambios del constructor y vea el resultado después de haber completado el encabezado global, guarde todos los cambios y vea 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
Pensamientos finales En esta publicación, le mostré cómo hacer que su encabezado global aparezca mientras corría y se esconde mientras corría.Esta es una forma popular y efectiva de ayudar a sus visitantes a navegar fácilmente sin participar en la altura de la ventana.¡Podrías descargar el archivo JSON gratis!Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación.Si está ansioso por obtener más información sobre Divi y obtener más regalos de la Divicidad, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.