Cómo reducir el tamaño de tu encabezado global al desplazarte con el creador de temas de Divi


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 código JQuery y CSS para activar el efecto. ¡También podrás descargar el archivo JSON gratis!

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

Descargar The Global Header Template GRATIS

Para poner sus manos en la plantilla de encabezado global gratuita, primero deberá descargarla usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se "volverá a suscribir" ni recibirá correos electrónicos adicionales.

(incrustar) https://www.youtube.com/watch?v=oIKTWqUlD98 (/ incrustar)

Suscríbase a nuestro canal de Youtube

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, verá 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
  • Acolchado 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.

  • Caja Shadow Blur Fuerza: 50px
  • 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, utilizaremos 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

Vaya 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.

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 permanecen 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.

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.

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');
    }
  });
});
.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

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

reducir la altura del encabezado global

Móvil

reducir la altura del encabezado global

Pensamientos finales

En esta publicación, le mostramos cómo crear un encabezado global cada vez más pequeño con Divi’s Theme Builder. La reducción de los encabezados es una excelente manera de ahorrar espacio en la altura de la vista de su visitante. Hemos recreado el diseño desde cero y hemos agregado un código personalizado personalizado para activar el efecto de reducción. ¡También pudiste 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!

Si está ansioso por aprender más sobre Divi y obtener más regalos Divi, asegúrese de Suscríbete a nuestro boletín de correo electrónico y Canal de Youtube así que siempre serás una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.