Cómo colocar automáticamente el encabezado en la primera sección de cada página

Desde el Divic Builder Divin, he compartido tutoriales sobre cómo crear y personalizar un encabezado para que coincida con las diferentes necesidades que podría tener. En el tutorial de hoy, continuaremos el viaje mostrándole cómo colocar automáticamente un encabezado personalizado en la primera sección de cada página. Este enfoque permite a los visitantes ver primero la sección de héroes de sus páginas y luego tener acceso al menú y todos sus elementos. El estilo que utilizamos para el encabezado personalizado coincide con el paquete Bistro, ¡también podrá descargar la plantilla de página libre de personalizaciones!
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 personalizado de encabezado de forma gratuita para poner sus manos en la plantilla de encabezado personalizada 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. Vaya al Temo Builder Divin y agregue una nueva plantilla de página Acceda al Builder Div Div Theme Builder y agregue una nueva plantilla accediendo al Builder Divic y agregue una nueva plantilla.
Use activado Use esta nueva plantilla en todas las páginas.

Usar en: todas las páginas
2. Comience a crear el diseño de encabezado personalizado, continúe construyendo un encabezado personalizado dentro de la plantilla de página.

Configuración de la sección Color de fondo Una vez que llegue al editor de plantillas, notará una sección. Abra esa sección y cambie el color de fondo.

Color de fondo: #ffffff
El espacio elimina el llenado predeterminado e inferior de la sección a continuación.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Border agregue un borde superior e inferior.

El ancho de los bordes superior e inferior: 1 PX
Color Edge hacia arriba y hacia abajo: # 002d4c
ID CSS e incluye una ID de CSS. Más adelante en el tutorial, utilizaremos esta ID de CSS para colocar la sección en la primera sección de cada página.

ID de CSS: encabezado personalizado
El índice Z por último, pero no menos importante, aumentaremos el índice de la Sección Z para garantizar que aparezca en la parte superior del contenido completo de la página. Indica Z: 99999

Agregue una nueva estructura de columna de fila Continúe agregando una nueva línea a la sección utilizando la siguiente estructura de columna:
Dimensión sin agregar módulos, abra la configuración de la fila y permita que la fila ocupe el ancho de toda la sección.

Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1
Ancho: 100%
Ancho máximo: 100%
Espacio eliminar y todo el revestimiento predeterminado, superior e inferior.
SUS Lingo: 0 PX

Finamiento inferior: 0 PX
El elemento principal 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, también agregaremos dos líneas de código CSS al elemento principal de la fila. Pantalla: Flex;
Alinine-Ritams: Centro;

Espacio de la columna 1 Continúe abriendo la configuración de la columna 1 y agregue algunos rellenos superior e inferior a la configuración de espaciado.
Revestimiento superior: 20 px

Finamiento inferior: 20 PX
Borde Agregue un borde recto a la columna.
El ancho del borde recto: 1 PX

Color de borde derecho: # 002d4c

Agregue el módulo de imagen a la columna 1 ¡Cargue el logotipo es hora de comenzar a agregar módulos! En la columna 1, necesitaremos un módulo de imagen. Cargue el logotipo.
Alineación Vaya a la pestaña Diseño del módulo y cambie la alineación de la imagen.

Alineación de imágenes: centro

Dimensión Modifique el ancho del módulo en diferentes tamaños de pantalla.
Ancho: 4VW (escritorio), 7VW (tableta), 12VW (teléfono)

Agregue un módulo de menú a la columna 2 Seleccione el menú En la segunda columna, necesitaremos un módulo de menú. Seleccione un menú en su elección. Aspecto Vaya a la pestaña Diseño del módulo y cambie la configuración de apariencia de la siguiente manera:
Estilo: centrado

Dirección del menú desplegable: abajo

Cambio y configuración del texto del menú para el texto del menú.
Fuente del menú: cabina
Color de texto del menú: # 77848d

Menú Tamaño del texto: 16 PX (escritorio), 15 PX (tableta), 14 PX (teléfono)
La altura de la línea de menú: 1.8em
El texto decantado luego cambia algunos colores en la configuración de texto de ajuste.
El color del fondo de caída: #fffff
La línea de color niega: # 002d4c

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: # 002d4c
Agregue un módulo de botón a la columna 3 Agregue una copia Pase a la siguiente y última columna. Allí, necesitaremos un módulo de botón. Agregue una copia de su elección.

Alineación Vaya a la pestaña Diseño del módulo y cambie la alineación de los botones.
Alineación de botones: centro

Configuración Continúe extinguiendo el botón en la configuración del botón.

Use estilos personalizados para el botón: Sí
Botón de tamaño de texto: 13 PX

El color del texto del botón: # 002d4c
El color del fondo del botón: #ffffff
El ancho del nudo del botón: 2 PX
Botón Color Edge: #FFFFFF (predeterminado), # D1D1D1 (Hover)
El rasgo de botón de botón: 0 px
Distancia entre letras y botones: 2 PX
Botón de fuente: cabina
Peso de fuente de fuente: semi audac.

El estilo de la fuente del botón: mayúscula
Espacio y luego, agregue algunos rellenos personalizados en diferentes tamaños de pantalla.
Revestimiento superior: 16 px
Informe inferior: 16 izquierda izquierda: 24 PX (escritorio y tableta), 13 PX (teléfono)

Revestimiento derecho: 24 PX (escritorio y tableta), 13 PX (teléfono)
Box Shadow Complete la configuración del módulo agregando un tono de caja.
Posición horizontal de la sombra de la caja: 0 px
Box Shadow Posición vertical: 0px
Poder de poco claro de la sombra de la caja: 0 px

Poder de extensión de la sombra de la caja: 2 PX (predeterminada), 6 PX (flotante)
Color de la sombra: # 002d4c
Box Shadow Position: Inner Shadow
3. Coloque automáticamente el encabezado después de la primera sección de cada página utilizando jQuery Agregue un módulo de código en la columna 2 ahora, para colocar automáticamente el menú en la primera sección de cada página, necesitaremos un poco de código jQuey. Para incluir este código en nuestro encabezado personalizado, agregue un módulo de código en la columna 2.
Ingrese el código jQuery Agregue las siguientes líneas de código JQuey, entre las etiquetas de script, como puede ver en la pantalla de impresión a continuación, al módulo de código para aplicar el efecto: jQuery ($ ($) {(‘# Custom-Header’) . InsertAfter (‘. ET_PB_SECTION_0’);});
4. Guarde los cambios de constructor de temas y vea el resultado y complete el encabezado personalizado guardando todos los cambios del fabricante y viendo el resultado en sus páginas.
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