Cuando diseñe un encabezado global fijo, es posible que desee reducir la altura del encabezado cuando sus visitantes se desplazan. Ayuda a reducir el espacio que ocupa el encabezado global en la altura de la ventana de visualización de sus visitantes. En este tutorial, lo guiaremos a través de ese proceso. Comenzaremos construyendo el menú, y luego agregaremos un código JQuery y CSS para activar el efecto.

Hagámoslo.

Avance

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

Escritorio

reducir la altura del encabezado global

Móvil

reducir la altura del encabezado global

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

Ir a Divi Theme Builder

Comience yendo al Divi Theme Builder.

reducir la altura del encabezado global

Comience a construir encabezado global

Luego, haga clic en ‘Crear encabezado global’ y seleccione ‘Crear encabezado global’.

reducir la altura del encabezado global

2. Comience a construir encabezado global

Configuraciones de sección

Color de fondo

Una vez que esté dentro del editor de plantillas, notará una sección. Abra la sección y cambie el color de fondo a blanco.

  • Color de fondo: #FFFFFF

reducir la altura del encabezado global

Dimensionamiento

Pase a la pestaña de diseño del módulo y cambie el ancho.

  • Ancho: 100%

reducir la altura del encabezado global

Espaciado

Modifique también el relleno superior e inferior de la sección.

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

reducir la altura del encabezado global

Sombra de la caja

Y separe el contenido de la página del encabezado global agregando una sombra de cuadro sutil a la siguiente sección.

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

reducir la altura del encabezado global

ID de CSS

Luego, agregue una ID de CSS a la sección. Más adelante en el tutorial, usaremos esta ID de CSS para crear el efecto de encabezado global cada vez más pequeño en el desplazamiento.

  • ID de CSS: relleno de sección

reducir la altura del encabezado global

Elemento principal

Pase a la pestaña avanzada, vaya a la configuración CSS personalizada y arregle la sección agregando dos líneas de código CSS al elemento principal de la sección.

01
02
position: fixed;
top: 0;

reducir la altura del encabezado global

Índice Z

Para asegurarnos de que la sección permanezca en la parte superior de toda la página y publicar contenido, también aumentaremos el índice z de la sección.

  • Índice Z: 99999

reducir la altura del encabezado global

Agregar nueva fila

Estructura de columna

Una vez que haya completado la configuración de la columna, continúe agregando una nueva fila utilizando la siguiente estructura de columna:

reducir la altura del encabezado global

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y cambie el tamaño en consecuencia:

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

reducir la altura del encabezado global

Espaciado

Elimine el relleno superior e inferior predeterminado de la fila a continuación.

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

reducir la altura del encabezado global

ID de CSS

Luego, vaya a la pestaña avanzada y agregue una ID de CSS a la fila. Necesitaremos esta ID de CSS más adelante en el tutorial para que el efecto de reducción funcione.

  • ID de CSS: ancho de fila

reducir la altura del encabezado global

Elemento principal

Por último, pero no menos importante, para asegurarnos de que todas las columnas permanezcan una al lado de la otra en tamaños de pantalla más pequeños, y para centrar todo el contenido de la columna, agregaremos dos líneas de código CSS al elemento principal de la fila.

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

reducir la altura del encabezado global

Agregar módulo de imagen a la columna 1

Subir logo

Es hora de agregar módulos, comenzando con un Módulo de imagen en la columna 1. Cargue un logotipo con un fondo transparente.

reducir la altura del encabezado global

Dimensionamiento

Modifique el ancho del módulo a continuación.

  • Ancho: 5vw (escritorio), 9vw (tableta), 13vw (teléfono)

reducir la altura del encabezado global

Agregar módulo de menú a la columna 2

Seleccione el menú

Pase a la segunda columna e inserte un Módulo de menú. Seleccione un menú de su elección.

reducir la altura del encabezado global

Eliminar color de fondo

Elimine el color de fondo del módulo a continuación.

reducir la altura del encabezado global

Diseño

Pase a la pestaña de diseño del módulo y cambie también el diseño.

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

reducir la altura del encabezado global

Texto del menú

Luego, abra la configuración de texto del menú y realice algunos cambios.

  • Fuente del menú: Rubik
  • Color del texto del menú: # 000000
  • Tamaño del texto del menú: 0.9vw (escritorio), 2vw (tableta), 3vw (teléfono)

reducir la altura del encabezado global

Menú desplegable

Modifique la configuración del menú desplegable también.

  • Color de fondo del menú desplegable: #ffffff
  • Color de línea del menú desplegable: # 2970fa

reducir la altura del encabezado global

Íconos

Y complete la configuración del módulo cambiando el color del icono del menú de hamburguesas en la configuración de los iconos.

  • Color del icono del menú de hamburguesas: # 2970fa

reducir la altura del encabezado global

Agregar módulo de botón a la columna 3

Agregar copia

En la siguiente y última columna. Agregue un Módulo de botones con alguna copia de su elección.

reducir la altura del encabezado global

Alineación

Cambie la alineación del módulo a continuación.

  • Alineación de botones: derecha

reducir la altura del encabezado global

Configuraciones de botones

Estilo del botón en consecuencia:

  • Usar estilos personalizados para el botón: Sí
  • Tamaño del texto del botón: 0.8vw (escritorio), 1.5vw (tableta), 2vw (teléfono)
  • Color del texto del botón: #ffffff
  • Color de fondo del botón: # 2970fa
  • Ancho del borde del botón: 0px

reducir la altura del encabezado global

  • Radio del borde del botón: 0px
  • Espacio entre letras de botones: 1 px
  • Fuente del botón: Rubik
  • Estilo de fuente del botón: mayúscula

reducir la altura del encabezado global

Espaciado

Y agregue algunos valores de relleno personalizados en diferentes tamaños de pantalla.

  • Relleno superior: 0.8vw (escritorio), 1.8vw (tableta), 2.5vw (teléfono)
  • Acolchado inferior: 0.8vw (escritorio), 1.8vw (tableta), 2.5vw (teléfono)
  • Acolchado izquierdo: 1.5vw (escritorio), 3vw (tableta), 4vw (teléfono)
  • Relleno derecho: 1.5vw (escritorio), 3vw (tableta), 4vw (teléfono)

reducir la altura del encabezado global

Sombra de la caja

Complete la configuración del módulo agregando una sombra de cuadro sutil.

  • Posición vertical de la sombra de la caja: 20 px
  • Caja Shadow Blur Fuerza: 30px
  • Color de sombra: rgba (41,112,250,0.2)

reducir la altura del encabezado global

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

Insertar código JQuery y CSS

La siguiente y última parte de este tutorial maneja el efecto de reducción, usando las dos ID de CSS que hemos asignado a nuestra sección y fila. Agregue un módulo de código a la columna 2 con las siguientes líneas de código JQuery y CSS. Asegúrese de colocar el código JQuery entre las etiquetas de script y el código CSS entre las etiquetas de estilo.

01
02
03
04
05
06
07
08
09
10
11
12
13
jQuery(function($){
  $(window).scroll(function() {
      if ($(document).scrollTop() > 50) {
        $('#section-padding').addClass('reduce-section-padding');
        $('#row-width').addClass('increase-row-width');
    } else {
       $('#section-padding').removeClass('reduce-section-padding');
       $('#section-padding').addClass('slow-transition');
       $('#row-width').removeClass('increase-row-width');
       $('#row-width').addClass('slow-transition');
    }
  });
});
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18 años
.reduce-section-padding {
transition: all 0.9s ease-out 0s;
padding-top: 0px !important;
padding-bottom: 0px !important;
}
 
.increase-row-width {
transition: all 0.9s ease-out 0s;
width: 100% !important;
}
 
.slow-transition {
transition: all 0.9s ease-out 0s;
}
 
#main-content {
margin-top: 5vw;
}

reducir la altura del encabezado global

3. Guardar los cambios del generador y ver el resultado

Una vez que haya agregado el código, puede guardar todos los cambios que haya realizado en el encabezado global y ver el resultado en su sitio web.

reducir la altura del encabezado global

reducir la altura del 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

Consigue la plantilla Divi

Más de 800 diseños de sitios web prefabricados vienen empaquetados dentro de Divi de forma gratuita.

You have Successfully Subscribed!