Cuando está creando su encabezado global, hay muchas cosas que debe tener en cuenta. Los elementos que coloca 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 gráfica 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 tener los beneficios de un encabezado fijo al permitir que su encabezado global revele cuándo sus visitantes se desplazan hacia arriba y lo oculte cuando se desplazan hacia abajo. Hoy, lo guiaremos para ocultar y revelar su encabezado global usando el generador de temas de Divi.. ¡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.
@media only screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before { border-top-color: #ffffff !important; border-left-color: transparent !important; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !important; border-left-color: transparent !important; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:before { background: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !important } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 strong { font-family: «Open Sans», Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p strong, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form input, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form button span { font-family: «Open Sans», Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !important;}
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!
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
Allí, haga clic en ‘Agregar encabezado global’ y seleccione ‘Crear encabezado global’.
2. Comience a construir el encabezado global
Ajustes de sección
Color de fondo
Dentro del editor de plantillas, verás una sección. Abre esa sección y cambia su color de fondo.
- Color de fondo: #ffffff
Dimensionamiento
Pase a la pestaña de diseño y asigne un ancho del 100% a su sección a continuación.
- Ancho: 100%
Espaciado
Agregue un poco de relleno superior e inferior personalizado también.
- Acolchado superior: 2vw
- Acolchado inferior: 2vw
Sombra de la caja
También aplicaremos una sombra de cuadro sutil a nuestra sección.
- Fuerza de desenfoque de sombra de cuadro: 50px
- Color de sombra: rgba(0,0,0,0.08)
ID de CSS
Más adelante en este tutorial, necesitaremos un código personalizado para que se produzca el efecto de desplazamiento. Para prepararnos para eso, estamos agregando una ID de CSS a la sección.
- ID de CSS: sección de 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; |
Índice Z
Ahora, para asegurarnos de que nuestra sección aparezca en la parte superior de toda la página o el contenido de la publicación, también aumentaremos el índice z en la configuración de visibilidad.
- Índice Z: 99999
Agregar nueva fila
Estructura de la columna
Una vez que haya completado todas las configuraciones de la sección, continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:
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ón personalizado: Sí
- Ancho del canalón: 1
- Igualar alturas de columna: Sí
- Ancho: 100%
- Ancho máximo: 100%
Espaciado
Elimine también todo el relleno superior e inferior predeterminado.
- Relleno superior: 0px
- Relleno inferior: 0px
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; |
Añadir 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.
Restablecer estilos de redes sociales individuales
Continúe reiniciando los estilos de cada red social a nivel individual.
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.
- Acolchado inferior: 0.5vw
Alineación
Una vez que haya agregado el relleno inferior a cada red social individualmente, regrese a la configuración general de su módulo. Pase a la pestaña de diseño y cambie la alineación del módulo.
- Alineación del módulo: Centro
Configuración de iconos predeterminada
Cambie el color del icono en la configuración del icono también.
- Color del icono: #000000
Configuración del icono de desplazamiento
Y modifique el color del icono al pasar el mouse.
- Color del icono: #c2ab92
Borde
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
Seleccione el menú
¡A la siguiente columna! Agregue un módulo de menú y seleccione un menú de su elección.
Cargar logotipo
Cargue un logotipo en el módulo siguiente.
Eliminar color de fondo
Y elimina el color de fondo.
Disposición
Luego, pase a la pestaña de diseño y asegúrese de que las siguientes configuraciones se apliquen al diseño:
- Estilo: Centrado
- Dirección del menú desplegable: hacia abajo
Texto de menú predeterminado
Continúe cambiando la configuración del texto del menú de la siguiente manera:
- Color del enlace activo: #c2ab92
- Fuente del menú: Cormorant Garamond
- Color del texto: #000000
- Tamaño del texto del menú: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
Texto del menú flotante
Modifique el texto del menú al pasar el mouse.
- Color del texto del menú: #c2ab92
Menú desplegable
A continuación, cambie el color de la línea del menú desplegable en la configuración del menú desplegable.
- Color de la línea del menú desplegable: #000000
Iconos
También estamos cambiando el color del ícono del menú de hamburguesas en la configuración de los íconos.
- Color del icono del menú de hamburguesas: #000000
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)
Enlace de menú 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; |
Agregar módulo de texto a la columna 3
Agregar copia
¡Hasta el último módulo! Allí, el único módulo que necesitamos es un módulo de texto.
Añadir enlace
Este módulo servirá como CTA. Agregue un enlace de su elección.
- URL del enlace del módulo: #
Configuración de texto predeterminada
Pase a la pestaña de diseño del módulo y cambie la configuración del texto en consecuencia:
- Fuente del texto: Cormorant Garamond
- Color del texto: #000000
- Tamaño de texto: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
Configuración de texto flotante
Cambia el color del texto al pasar el mouse.
- Color del texto: #c2ab92
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
Espaciado
Y agregue un poco de relleno inferior en la configuración de espaciado.
- Acolchado inferior: 0.5vw
Borde
Complete la configuración del módulo agregando un borde inferior.
- Ancho del borde inferior: 1px
- Color del borde inferior: #000000
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 hacer que suceda el efecto de revelar/ocultar. 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 de 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
15
dieciséis
17
18
19
20
21
22
23
24
|
jQuery(function($){ var topPosition = 0;$(window).scroll(function() { var scrollMovement = $(window).scrollTop(); if (topPosition < 200 ){ } else{ if(scrollMovement > topPosition) { $('#global-header-section').removeClass('show-header'); $('#global-header-section').addClass('hide-header'); } else { $('#global-header-section').removeClass('hide-header'); $('#global-header-section').addClass('show-header'); } } topPosition = scrollMovement;}); }); |
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
|
#main-content{margin-top: 7vw;}.hide-header {opacity: 0;margin-top: -200px !important;}.show-header {opacity: 1;margin-top: 0px !important;}#global-header-section {-webkit-transition: all 0.5s ease !important;-moz-transition: all 0.5s ease !important;-o-transition: all 0.5s ease !important;-ms-transition: all 0.5s ease !important;transition: all 0.5s ease !important;} |
3. Guardar los cambios del constructor y ver el resultado
Una vez que haya completado el encabezado global, guarde todos los cambios y vea 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 hacer que su encabezado global aparezca mientras se desplaza hacia arriba y se oculte mientras se desplaza hacia abajo. Esta es una forma popular y efectiva de ayudar a sus visitantes a navegar fácilmente sin ocupar una parte de la altura de su ventana gráfica. ¡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.