Cuando crea su encabezado global, hay muchas cosas que debe tener en cuenta. Los elementos que coloque en su encabezado deben ayudar a sus visitantes a navegar fácilmente. Para reducir el tiempo que las personas pasan navegando, muchos diseñadores web optan por un encabezado superior fijo, lo que permite a los visitantes ir a otras páginas o publicaciones de inmediato. Eso es realmente conveniente, pero al crear un encabezado fijo, se ocupa una gran parte de la altura de la ventana de visualización de sus visitantes, lo que permite que se muestre menos contenido a la vez. Si no está dispuesto a hacer ese sacrificio, sepa que no tiene que hacerlo. Puede obtener los beneficios de un encabezado fijo permitiendo que su encabezado global revele cuándo sus visitantes se desplazan hacia arriba y lo oculte cuando se desplazan hacia abajo. Hoy, lo guiaremos a través de cómo ocultar y revelar su encabezado global utilizando Divi’s Theme Builder.

Hagámoslo.

Avance

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

Escritorio

revelar encabezado global

Móvil

revelar encabezado global

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

Ir a Divi Theme Builder

Comience yendo al Divi Theme Builder.

revelar encabezado global

Comience a construir encabezado global

Allí, haga clic en ‘Agregar encabezado global’ y seleccione ‘Crear encabezado global’.

revelar encabezado global

2. Comience a construir encabezado global

Configuraciones de sección

Color de fondo

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

  • Color de fondo: #ffffff

revelar encabezado global

Dimensionamiento

Pase a la pestaña de diseño y asigne un ancho del 100% a su sección a continuación.

  • Ancho: 100%

revelar encabezado global

Espaciado

Agregue también algunos rellenos superiores e inferiores personalizados.

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

revelar encabezado global

Sombra de la caja

Aplicaremos una sombra de cuadro sutil a nuestra sección también.

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

revelar encabezado global

ID de CSS

Más adelante en este tutorial, necesitaremos un código personalizado para que se produzca el efecto de desplazamiento. Para prepararse para eso, estamos agregando una ID de CSS a la sección.

  • ID de CSS: global-header-section

revelar encabezado global

Elemento principal

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

01
02
position: fixed;
top: 0;

revelar encabezado global

Índice Z

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

  • Índice Z: 99999

revelar encabezado global

Agregar nueva fila

Estructura de columna

Una vez que haya completado todas las configuraciones de la sección, continúe agregando una nueva fila a la sección utilizando la siguiente estructura de columnas:

revelar encabezado global

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la pantalla.

  • Usar ancho de canal personalizado: sí
  • Ancho de canal: 1
  • Igualar alturas de columna: sí
  • Ancho: 100%
  • Ancho Máx .: 100%

revelar encabezado global

Espaciado

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

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

revelar encabezado global

Elemento principal

Centre el contenido de la columna y permita 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.

01
02
display: flex;
align-items: center;

revelar encabezado global

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.

revelar encabezado global

Restablecer estilos de redes sociales individuales

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

revelar encabezado global

Agregar espacio de red social individual

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

  • Relleno inferior: 0.5vw

revelar encabezado global

Alineación

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

  • Alineación del módulo: centro

revelar encabezado global

Configuración de icono predeterminada

Cambie el color del icono en la configuración del icono también.

  • Color del icono: # 000000

revelar encabezado global

Configuración del icono de desplazamiento

Y modifique el color del icono al pasar el mouse.

  • Color del icono: # c2ab92

revelar encabezado global

Frontera

Complete la configuración del módulo agregando un borde inferior en la configuración del borde.

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

revelar encabezado global

Agregar módulo de menú a la columna 2

Seleccione el menú

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

revelar encabezado global

Subir logo

Cargue un logotipo al módulo siguiente.

revelar encabezado global

Eliminar color de fondo

Y elimine el color de fondo.

revelar encabezado global

Diseño

Luego, vaya a la pestaña de diseño y asegúrese de que la siguiente configuración se aplique al diseño:

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

revelar encabezado global

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)

revelar encabezado global

Pase el texto del menú

Modifique el texto del menú al pasar el mouse.

  • Color del texto del menú: # c2ab92

revelar encabezado global

Menú desplegable

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

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

revelar encabezado global

Íconos

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

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

revelar encabezado global

Dimensionamiento

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)

revelar encabezado global

Menú 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.

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

revelar encabezado global

Agregar módulo de texto a la columna 3

Agregar copia

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

revelar encabezado global

Añadir enlace

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

  • URL del enlace del módulo: #

revelar encabezado global

Configuración de texto predeterminada

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

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

revelar encabezado global

Desplazar configuración de texto

Cambiar el color del texto al pasar el mouse.

  • Color del texto: # c2ab92

revelar encabezado global

Dimensionamiento

Continúe 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

revelar encabezado global

Espaciado

Y agregue un poco de relleno inferior en la configuración de espaciado.

  • Relleno inferior: 0.5vw

revelar encabezado global

Frontera

Complete la configuración del módulo agregando un borde inferior.

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

revelar encabezado global

Agregar módulo de código a la columna 2

Insertar código JQuery y CSS

Una vez que haya diseñado todos los módulos en la fila, es hora de que el efecto revelar / ocultar suceda. Para hacer eso, 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, sin importar cómo diseñe su encabezado o qué módulos use, solo asegúrese de haber agregado la ID de CSS a su sección. Coloque el código JQuery entre las etiquetas del script y el código CSS entre las etiquetas de estilo como se muestra en la pantalla de impresión a continuación.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
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;
});   
});
01
02
03
#main-content{
    margin-top: 7vw;
}

revelar encabezado global

3. Guardar los cambios del generador y ver el resultado

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

revelar encabezado global

revelar encabezado global

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

You have Successfully Subscribed!