Cuando está diseñando 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 creando el menú y luego agregaremos código JQuery y CSS para activar el efecto. ¡También podrá descargar el archivo JSON de forma gratuita!
Hagámoslo.
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 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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Suscríbete a nuestro canal de Youtube
1. Vaya a Divi Theme Builder y agregue una nueva plantilla
Ir al Creador de temas Divi
Comience yendo al Divi Theme Builder .
Empezar a construir encabezado global
Luego, haga clic en ‘Crear encabezado global’ y seleccione ‘Crear encabezado global’.
2. Comience a construir el encabezado global
Ajustes 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
Dimensionamiento
Pase 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 sutil sombra de cuadro a la siguiente sección.
- Fuerza de desenfoque de sombra de cuadro: 50px
- Color de sombra: rgba(0,0,0,0.13)
ID de CSS
Luego, agregue una 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 de reducción en el desplazamiento.
- ID de CSS: relleno de sección
Elemento principal
Pase 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.
|
01
02
|
position: fixed;top: 0; |
Índice Z
Para asegurarnos de que la sección permanezca en la parte superior de todas las páginas y publique contenido, 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 del canalón: 1
- Igualar alturas de columna: Sí
- Ancho máximo: 100%
Espaciado
Elimine el relleno superior e inferior predeterminado de la fila a continuación.
- Relleno superior: 0px
- Relleno inferior: 0px
ID de CSS
Luego, vaya a la pestaña avanzada y agregue una ID de CSS a la fila. Necesitaremos este ID de CSS más adelante en el tutorial para que funcione el efecto de reducción.
- 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.
|
01
02
|
display: flex;align-items: center; |
Agregar módulo de imagen a la columna 1
Cargar 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
Modifique el ancho del módulo a continuación.
- Ancho: 5vw (Escritorio), 9vw (Tableta), 13vw (Teléfono)
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
Elimine el color de fondo del módulo a continuación.
Disposición
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
Texto del menú
Luego, abra la configuración del 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 ícono del menú de hamburguesas en la configuración de íconos.
- Color del icono del menú de hamburguesas: #2970fa
Agregar copia
En la siguiente y última columna. Agregue un módulo de botones con alguna copia de su elección.
Alineación
Cambie la alineación del módulo a continuación.
- Alineación de botones: Derecha
Configuración de botones
Dale estilo al 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
- Espaciado entre letras de 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.
- Relleno superior: 0.8vw (escritorio), 1.8vw (tableta), 2.5vw (teléfono)
- Acolchado inferior: 0.8vw (escritorio), 1.8vw (tableta), 2.5vw (teléfono)
- Relleno 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 sutil sombra de cuadro.
- Posición vertical de la sombra del cuadro: 20px
- Fuerza de desenfoque de sombra de cuadro: 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 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
|
.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. Guardar los cambios del constructor 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.
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 reduce utilizando el Theme Builder de Divi . La reducción de encabezados es una excelente manera de ahorrar espacio en la altura de la ventana gráfica de su visitante. Recreamos el diseño desde cero y agregamos un código personalizado personalizado para activar el efecto de reducción. ¡También pudo descargar el archivo JSON de forma gratuita! 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 de Divi, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.