Cómo hacer que su encabezado transparente se pegue al pergamino con Div

Cuando se trata de configurar un encabezado global para su sitio, hay muchas maneras de abordarlo. Uno de los enfoques más sutiles es un encabezado transparente. Los encabezados transparentes se colocan sobre las secciones de héroes de sus páginas, lo que puede conducir a hermosos modelos que se centran en un enfoque mínimo pero claro. Si decide elegir un encabezado transparente, pero necesita un encabezado pegajoso en el pergamino, le gustará este tutorial. Usando las opciones adhesivas de DIV incrustadas, le mostraremos cómo moverse de un encabezado transparente a un encabezado pegajoso con un estilo diferente en el pergamino. ¡La transición entre transparente y pegajosa es sin esfuerzo! 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. Construcción de la estructura del elemento de encabezado en una nueva plantilla de encabezado Cree una nueva plantilla de encabezado global accediendo a Div Div Theme Builder. Allí, comience a crear un nuevo encabezado global o personalizado.
Sección # 1 Configuración del color de fondo Una vez que llegue al editor de plantillas, notará una sección. Esta sección se dedicará a la barra de encabezado superior que puede ver para obtener una vista previa de esta publicación. Abra la configuración de la sección y agregue un color de fondo negro.


Color de fondo: # 000000
Espacio ir a la pestaña de diseño de la sección y eliminar todos los rellenos predeterminados e inferiores.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Agregue una nueva estructura de columna de fila Continuar agregando una nueva línea utilizando la siguiente estructura de columnas:

Agregue un módulo de texto a la columna Agregar contenido Agregue un módulo de texto en la columna de fila e ingrese una copia de su elección.

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: Oswald
Text -Text estilo: mayúscula
Color de texto: #ffffff
Tamaño del texto: Escritorio: 19 PX
Tableta: 18 PX
Teléfono: 16 PX
Alineación de texto: Centro
Agregue el espacio de la Sección 2 justo debajo de la primera sección, agregue otra sección regular. Esta sección se dedicará a nuestro menú transparente, que se transformará pegajoso en el desplazamiento. Abra la configuración de la sección y elimine todos los rellenos predeterminados e inferiores de la pestaña de diseño.
SUS Lingo: 0 PX

Finamiento inferior: 0 PX
Agregue una nueva estructura de columna de fila Continuar agregando una nueva línea utilizando la siguiente estructura de columnas:
Color de fondo transparente Abra la configuración de la fila y aplique un color de fondo completamente transparente.

Color de fondo: RGBA (255,255,255.0)

Dimension Switch a la pestaña Diseño de fila y cambie la configuración de tamaño.
Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1
Ancho: 100%
Ancho máximo: 100%
Espacio agregue algunos rellenos personalizados a la izquierda y a la derecha.
ENLIZACIÓN IZQUIERDA: 10%

Revelaje derecho: 10%
Sombra de caja y luego aplique un tono de caja transparente. Más tarde, en el tutorial, usaremos este tono de caja en un estado pegajoso con un color diferente.
Poder de poco claro de la sombra de la caja: 50 px

Color de la sombra: RGBA (0.0,0,0)
Posición Para garantizar que el giro aparezca por encima del contenido de la página, con un fondo transparente, utilizaremos una posición absoluta para nuestro giro en la pestaña avanzada.
Posición: Absoluto

Ubicación: superior izquierda
Visibilidad de la columna 2 Además, ocultamos la segunda columna de nuestra fila en la tableta y el teléfono para tener un diseño de encabezado menos complejo en las dimensiones de pantalla más pequeñas.
Agregue un módulo de menú en la columna 1 Seleccione Menú Ahora que nuestra configuración de línea está en su lugar, es hora de agregar módulos, comenzando con un módulo de menú en la columna 1. Seleccione un menú.

Elimine el color de fondo Eliminar y el color de fondo del módulo.

Configuración de texto del menú Vaya a la pestaña Diseño del módulo y modifique la configuración del texto del menú de acuerdo con:


Fuente del menú: Oswald

Menú de la fuente de peso: en negrita

El estilo de la fuente del menú: mayúscula
Color de texto del menú: #efefef
Menú Tamaño del texto: 18 PX
Alineación del texto: Derecho
Configuración del menú Desolring Modifique y Configuración del menú decantado.
Menú de la línea de color Denuing: RGBA (0.0,0,0)
Color de fondo del menú móvil: RGBA (0.0,0,0.95)

Icono de configuración Entonces, cambie los colores del icono en la configuración de los iconos.
Icono de micón de compras en color: #ffffff
Buscando el icono de color: #ffffff

Icono de menú de hamburguesas de color: #ffffff
La configuración del logotipo también cambia el color de nuestro logotipo en la configuración del logotipo, cambiando el filtro de inversión de imagen.
Imagen de inversión: 90%
Dimensión Entonces, asignaremos una altura máxima a nuestro logotipo.

Logotipo Altura máxima: 40 px
Espacio entonces, agregaremos algunos rellenos superior e inferior en tamaños de pantalla más pequeños.

Revestimiento superior:
Tableta y teléfono: 10 px

Levante inferior:
Tableta y teléfono: 10 px
Agregue un módulo de botón a la columna 2 Agregue una copia en la columna 2, la única forma en que necesitamos es un módulo de botón. Agregue una copia de su elección.
Alineación de botones Vaya a la pestaña Diseño del módulo y cambie la alineación de los botones.
Alineación de botones: correcto

Botón de ajuste Botón de tiliento a continuación. Usilite estilos personalizados para el botón: Sí

Tamaño de texto de texto: 16 PX
El color del texto del botón: #ffffff

El color de fondo del botón: # ED4441
El color del marco del botón: # ED4441
El rasgo de botón de botón: 0 px
Distancia entre letras y botones: 4 PX
Botón de fuente: Oswald
Botón de peso de fuente de fuente: en negrita

El estilo de la fuente del botón: mayúscula
Muestra el icono del botón: Sí
Botón de icono de color: # 1A1A1A
Espacio y complete la configuración del módulo agregando algunos valores de espaciado personalizados.
Margen superior: -70px
Revestimiento superior: 25 px
Finamiento inferior: 25 PX

2. Aplique la Sección 2 de devolución de efectos personalizados pegajosos que hemos establecido las bases de nuestro encabezado, ¡es hora de aplicar el efecto pegajoso! Para esto, comience abriendo la configuración de la segunda sección y aplique las siguientes configuraciones adhesivas a la pestaña Avanzada:
Posición pegajosa: adhiérase a la parte superior
GAPA SUPERIOR LIPY: 0 PX
Pequeño límite inferior: ninguno

Brecha de los elementos circundantes adhesivos: sí
Transición predeterminada y estilos adhesivos: sí
Color de fondo de fila pegajosa ahora, cuando se activa la opción pegajosa, podemos hacer cambios de diseño pegajosos en todos los elementos de la sección. Comenzaremos abriendo la fila que contiene nuestro menú y aplicaremos un fondo pegajoso blanco.
Color de fondo: #ffffff
Extendiendo las filas pegajosas, cambiaremos los valores espaciales pegados de la fila.
SUS Lingo: 0 PX

Finamiento inferior: 0 PX
Sombra de caja de fila pegajosa Cambiamos el color de la caja en una condición pegajosa.

Shadow Color: RGBA (0.0,0,0.08)
Posicionando la fila pegajosa Entonces, llevaremos la posición de la fila a pariente en un estado pegajoso. Posición: relativo
Origen del desplazamiento: superior izquierda

Configuración de texto Menú pegajosa Entonces, cambiaremos el color del texto del menú pegajoso.
Color de texto del menú: # 000000

Configuración desplegable Menú pegajosa junto con el color de fondo del menú móvil en la configuración de caída del menú.
Color del fondo del menú móvil: #ffffff
Icono de menú de color pegajoso, cambio y los colores del icono en un estado pegajoso.

Icono de canasta de compras en color: # 000000
Icono de búsqueda de color: # 000000

Icono de menú de hamburguesas de color: # 000000
Filtro de logotipo de Sigilla luego, elimine el filtro de inversión de la imagen del logotipo en un estado adhesivo.

Imagen de inversión: 0%
El espacio pegado a los botones y complete el tutorial eliminando el borde superior negativo mientras que es pegajoso.
Margen superior: 0 PX
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