Al crear su encabezado global, hay muchas cosas que debe tener en cuenta. Los elementos que pongas en tu encabezado deberían ayudar a tu visitantes para navegar fácilmente. Para reducir el tiempo que la gente pasa navegando, muchos diseñadores web optan por un encabezado superior fijo, lo que permite visitantes para acceder inmediatamente a otras páginas o publicaciones. Esto es realmente útil, pero al crear un encabezado fijo, gran parte de la altura de la ventana gráfica visitantes está ocupado, lo que permite menos de contenido para mostrar a la vez. Si no está listo para hacer este sacrificio, sepa que no es necesario. Puede aprovechar los beneficios de un encabezado fijo al permitir que su encabezado general se revele cuando sus visitantes se desplazan hacia arriba y lo oculte cuando se desplazan hacia abajo. Hoy lo guiaremos para ocultar y revelar su encabezado global usando el Generador de temas de Divi.

vista

Antes de sumergirnos en el tutorial, echemos un vistazo al resultado en diferentes tamaños de pantalla.

1. Vaya a Divi Theme Builder y agregue una nueva plantilla

Comience yendo al Divi Theme Builder.

Comience a crear un encabezado global

Allí, haga clic en "Agregar un encabezado global" y seleccione "Crear un encabezado global".

2. Comience a crear un encabezado global

Configuraciones de sección

Color de fondo

Dentro del editor de plantillas, verá una sección. Abra esta sección y cambie su color de fondo.

• Color de fondo: #ffffff

apresto

Vaya a la pestaña de diseño y asigne 100% de ancho a su próxima sección.

• Ancho: 100%

espaciamiento

También agregue relleno personalizado superior e inferior.

• Acolchado superior: 2vw
• Relleno inferior: 2vw

Caja de sombra

También aplicaremos un tono sutil a nuestra sección.

• Fuerza de desenfoque de sombra de caja: 50 px
• Color de sombra: rgba (0,0,0,0,08)

ID de CSS

Más adelante en este tutorial, necesitaremos un código personalizado para que se produzca el efecto de desplazamiento. Para prepararnos para esto, agregamos un ID de CSS a la sección.

• ID de CSS: sección de encabezado global

Elemento principal

También haremos que la sección sea un encabezado fijo agregando dos líneas de código CSS al elemento principal de la sección.

position: fixed;top: 0;

Índice Z

Ahora, para asegurarnos de que nuestra sección aparezca en la parte superior de la página o contenido de la publicación, también aumentaremos el índice z en la configuración de visibilidad.

• Índice Z: 99999

Añadir una nueva linea

Estructura de la columna

Una vez que haya terminado todos los parámetros de la sección, continúe agregando una nueva línea a la sección utilizando la siguiente estructura de columnas:

apresto

Sin agregar un módulo todavía, abra la configuración de la fila y deje que la fila llene el ancho de la pantalla.

• Use un ancho de canal personalizado: Sí
• Ancho de canal: 1
• Ecualizar alturas de columna: Sí
• Ancho: 100%
• Ancho máximo: 100%

espaciamiento

Elimine también todos los rellenos superiores e inferiores predeterminados.

• Relleno superior: 0px
• Relleno inferior: 0px

Elemento principal

céntralo contenido de la columna y permitir que las columnas permanezcan una al lado de la otra en tamaños de pantalla más pequeños agregando dos líneas de código CSS al elemento principal de la fila.

display: flex;align-items: center;

Agregue el módulo de seguimiento de redes sociales a la columna 2

Agregar redes sociales

Es hora de agregar módulos, comenzando con un módulo de seguimiento de redes sociales en la columna 1. Agregue las redes sociales que desea mostrar.

Restablecer estilos de redes sociales individuales

Continúe restableciendo los estilos de cada red social a un nivel individual.

Agregar un espacio de red social individual

También deberá abrir la configuración de cada red social individualmente y agregar relleno inferior en la configuración de espaciado.

• Relleno inferior: 0.5vw

alineación

Una vez que haya agregado individualmente el relleno inferior a cada red social, vuelva a la configuración general de su mod. Cambie a la pestaña de diseño y cambie la alineación del módulo.

• Alineación del módulo: centro

Configuración de icono predeterminada

También cambie el color del icono en la configuración del icono.

• Color del icono: # 000000

Configuración del icono de desplazamiento

Y cambia el color del icono de desplazamiento.

• Color del icono: # c2ab92

Frontera

Complete los parámetros del módulo agregando un borde inferior en los parámetros del borde.

• Ancho del borde inferior: 1px
• Color del borde inferior: # 000000

Agregar un módulo de menú a la columna 2

Selecciona el menu

¡Pasemos a la siguiente columna! Agregue un módulo de menú y seleccione un menú de su elección.

Descargar logo

Luego cargue un logotipo en el módulo.

Quitar el color de fondo

Y elimine el color de fondo.

Provisión

A continuación, cambie a la pestaña Diseño y asegúrese de que las siguientes configuraciones se apliquen al diseño:

• Estilo: Centrado
• Dirección del menú desplegable: abajo

Texto de menú predeterminado

Continúe cambiando la configuración del texto del menú de la siguiente manera:

• Color de enlace activo: # c2ab92
• Fuente del menú: Cormorán Garamond
• Color del texto: # 000000
• Tamaño del texto del menú: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)

Pase el texto del menú

Cambie el texto del menú al pasar el mouse.

• Color del texto del menú: # c2ab92

el menú de navegación

Luego cambie el color de la línea del menú desplegable en la configuración del menú desplegable.

• Color de la línea del menú desplegable: # 000000

iconos

También estamos cambiando el color del icono del menú de hamburguesas en la configuración del icono.

• Color del icono del menú de hamburguesas: # 000000

apresto

Continúe cambiando el ancho máximo del logotipo en diferentes tamaños de pantalla en la configuración de tamaño.

• Ancho máximo del logotipo: 5vw (escritorio), 10vw (tableta), 13vw (teléfono)

Menú de enlace CSS

Y complete la configuración del módulo agregando dos líneas de código CSS al enlace del menú del módulo en la pestaña avanzada.

padding-bottom: 1vw;border-bottom: 1px solid #000;

Agregue un módulo de texto a la columna 3

Añadir una copia

¡Pasemos al último módulo! Allí, el único módulo que necesitamos es un módulo de texto.

Ajouter un gravamen

Este módulo servirá como CTA. Agregue un enlace de su elección.

• URL del enlace del módulo: #

Configuraciones de texto predeterminadas

Cambie a la pestaña de diseño del módulo y cambie la configuración de texto en consecuencia:

• Fuente de texto: Cormorant Garamond
• Color del texto: # 000000
• Tamaño del texto: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)

Configuraciones de desplazamiento del texto

Cambia el color del texto al pasar el mouse.

• Color del texto: # c2ab92

apresto

Continúe cambiando los parámetros 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

espaciamiento

Y agregue algo de relleno en la parte inferior en la configuración de espaciado.

• Relleno inferior: 0.5vw

Frontera

Complete los parámetros del módulo agregando un borde inferior.

• Ancho del borde inferior: 1px
• Color del borde inferior: # 000000

Agregue un módulo de código a la columna 2

Insertar código JQuery y CSS

Una vez que haya diseñado todas las modificaciones en la fila, es hora de hacer que suceda el efecto de revelar / ocultar. Para hacer esto, necesitaremos agregar 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 sin importar cómo diseñe su encabezado o los módulos. que está utilizando, solo asegúrese de haber agregado el 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($){ var topPosition = $(window).scrollTop(); $(window).scroll(function() {var scrollMovement = $(window).scrollTop();if(scrollMovement > topPosition) {$('#global-header-section').slideUp();} else {$('#global-header-section').slideDown();}topPosition = scrollMovement;}); });

main-content{margin-top: 7vw;}

3. Guarde las modificaciones del generador y muestre el resultado.

Una vez que haya completado el encabezado global, guarde todos los cambios y vea el resultado en su Sitio web!

vista

Ahora que hemos seguido todos los pasos, echemos un vistazo final a cómo se ve en diferentes tamaños de pantalla.

Consideraciones finales

En este artículo, le mostramos cómo hacer que su encabezado global aparezca cuando se desplaza hacia arriba y cómo ocultarlo cuando se desplaza hacia abajo. Esta es una forma popular y eficaz de ayudar a sus visitantes a navegar fácilmente sin ocupar una parte de la altura de su ventana. ¡También puede 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.