Cómo reducir el tamaño de su encabezado global al desplazarse con el generador 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 gráfica de sus visitantes. En este tutorial, lo guiaremos a través de ese proceso. Comenzaremos construyendo el menú y luego agregaremos algo de código JQuery y CSS para activar el efecto. ¡También podrá descargar el archivo JSON de forma gratuita!

Hagámoslo.

Avance

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

Escritorio

Móvil

Descargue la plantilla de encabezado global GRATIS

Para tener en sus manos 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 formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout 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 le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

Suscríbete a nuestro canal de Youtube

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

Ir a Divi Theme Builder

Empiece por ir a Divi Theme Builder.

Comience a construir un encabezado global

Luego, haga clic en 'Crear encabezado global' y seleccione 'Crear encabezado global'.

2. Empiece a crear un encabezado global

Configuración de la 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

Dimensionamiento

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

• Ancho: 100%

Espaciado

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

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

Sombra de la caja

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

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

ID de CSS

Luego, agregue un ID de CSS a la sección. Más adelante en el tutorial, usaremos este ID de CSS para crear el efecto de encabezado global que se encoge en el desplazamiento.

• ID de CSS: relleno de sección

Elemento principal

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

position: fixed;
top: 0;

Índice Z

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

• Índice Z: 99999

Agregar nueva fila

Estructura de la columna

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

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ón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar alturas de columna: Sí
• Ancho máximo: 100%

Espaciado

A continuación, elimine el relleno superior e inferior predeterminado de la fila.

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

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

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.

display: flex;
align-items: center;

Agregar módulo de imagen a la columna 1

Subir logotipo

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

Dimensionamiento

A continuación, modifique el ancho del módulo.

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

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.

Eliminar color de fondo

A continuación, elimine el color de fondo del módulo.

Diseño

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

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

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)

Menú desplegable

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

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

Iconos

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

Agregar módulo de botones a la columna 3

Agregar copia

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

Alineación

A continuación, cambie la alineación del módulo.

• Alineación de botones: derecha

Configuración de botones

Diseñe el 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

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

Espaciado

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

• Acolchado 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)

Sombra de la caja

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

• Posición vertical de la sombra del cuadro: 20px
• Fuerza de desenfoque de sombra de caja: 30px
• Color de sombra: rgba (41,112,250,0.2)

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 poner 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;
}

3. Guarde los cambios del generador y vea el resultado

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

Avance

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

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo crear un encabezado global que se encoge utilizando el Generador de temas de Divi. Los encabezados que se encogen son una excelente manera de ahorrar espacio en la altura de la ventana gráfica de su visitante. Hemos recreado el diseño desde cero y hemos agregado código personalizado para activar el efecto de reducción. ¡También pudo 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 obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.