Cuando se trata de configurar un encabezado global para su sitio web, hay muchas maneras de abordarlo. Uno de los enfoques más sutiles es un encabezado transparente. Los encabezados transparentes se colocan en la parte superior de las secciones principales de sus páginas, lo que puede dar lugar a hermosos diseños que se centran en un enfoque mínimo pero claro. Si decide optar por un encabezado transparente pero necesita un encabezado fijo en el desplazamiento, le encantará este tutorial. Usando Divi y sus opciones adhesivas integradas, le mostraremos cómo pasar de un encabezado transparente a un encabezado adhesivo con un estilo diferente en el desplazamiento. ¡La transición entre transparente y pegajoso es fácil! 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!
1. Construcción de la estructura del elemento de encabezado dentro de una nueva plantilla de encabezado
Crear nueva plantilla de encabezado global
Comience yendo al Divi Theme Builder . Allí, comience a crear un nuevo encabezado global o personalizado.
Configuración de la sección n.º 1
Color de fondo
Una vez dentro del editor de plantillas, verás una sección. Esta sección estará dedicada a la barra de encabezado superior que puedes ver en la vista previa de esta publicación. Abra la configuración de la sección y agregue un color de fondo negro.
- Color de fondo: #000000
Espaciado
Pase a la pestaña de diseño de la sección y elimine todo el relleno superior e inferior predeterminado.
- Relleno superior: 0px
- Relleno inferior: 0px
Agregar nueva fila
Estructura de la columna
Continúe agregando una nueva fila usando la siguiente estructura de columnas:
Agregar módulo de texto a la columna
Agregar contenido
Agregue un módulo de texto a la columna de la fila e ingrese alguna copia de su elección.
Configuración de texto
Pase a la pestaña de diseño del módulo y cambie la configuración del texto en consecuencia:
- Fuente del texto: Oswald
- Estilo de fuente de texto: Mayúsculas
- Color del texto: #ffffff
- Tamano del texto:
- Escritorio: 19px
- Tableta: 18px
- Teléfono: 16px
- Alineación de texto: Centro
Añadir Sección #2
Espaciado
Justo debajo de la primera sección, agregue otra sección normal. Esta sección estará dedicada a nuestro menú transparente que se volverá fijo al desplazarse. Abra la configuración de la sección y elimine todo el relleno superior e inferior predeterminado en la pestaña de diseño.
- Relleno superior: 0px
- Relleno inferior: 0px
Agregar nueva fila
Estructura de la columna
Continúe agregando una nueva fila usando la siguiente estructura de columnas:
Color de fondo transparente
Abra la configuración de la fila y aplique un color de fondo completamente transparente a la fila.
- Color de fondo: rgba(255,255,255,0)
Dimensionamiento
Pase a la pestaña de diseño de la fila y modifique la configuración de tamaño.
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
- Ancho: 100%
- Ancho máximo: 100%
Espaciado
Agregue un poco de relleno personalizado a la izquierda y a la derecha a continuación.
- Relleno izquierdo: 10%
- Relleno Derecho: 10%
Sombra de la caja
Luego, aplica una sombra de cuadro transparente. Más adelante en el tutorial, usaremos esta sombra de cuadro en un estado pegajoso con un color de sombra diferente.
- Fuerza de desenfoque de sombra de cuadro: 50px
- Color de sombra: rgba(0,0,0,0)
Posición
Para asegurarnos de que la fila aparezca en la parte superior del contenido de la página, con un fondo transparente, usaremos una posición absoluta para nuestra fila en la pestaña avanzada.
- Posición: Absoluta
- Ubicación: Arriba a la izquierda
Columna 2 Visibilidad
También estamos ocultando la segunda columna de nuestra fila en tabletas y teléfonos para tener un diseño de encabezado menos complejo en pantallas más pequeñas.
Seleccione el menú
Ahora que nuestra configuración de fila está en su lugar, es hora de agregar módulos, comenzando con un Módulo de menú en la columna 1. Seleccione un menú de su elección.
Cargar logotipo
Cargue un logotipo a continuación.
Eliminar color de fondo
Elimina también el color de fondo del módulo.
Configuración del texto del menú
Pase a la pestaña de diseño del módulo y cambie la configuración del texto del menú en consecuencia:
- Fuente del menú: Oswald
- Peso de la fuente del menú: Negrita
- Estilo de fuente del menú: Mayúsculas
- Color del texto del menú: #efefef
- Tamaño del texto del menú: 18px
- Alineación de texto: Derecha
Configuración del menú desplegable
Cambie también la configuración del menú desplegable.
- Color de la línea del menú desplegable: rgba(0,0,0,0)
- Color de fondo del menú móvil: rgba (0,0,0,0.95)
Configuración de iconos
Luego, cambie los colores de los íconos en la configuración de los íconos.
- Color del icono del carrito de compras: #ffffff
- Color del icono de búsqueda: #ffffff
- Color del icono del menú de hamburguesas: #ffffff
Configuración del logotipo
También estamos cambiando el color de nuestro logotipo en la configuración del logotipo al cambiar el filtro de inversión de imagen.
- Invertir imagen: 90%
Dimensionamiento
Luego, asignaremos una altura máxima a nuestro logo.
- Altura máxima del logotipo: 40 px
Espaciado
A continuación, agregaremos un poco de relleno superior e inferior en tamaños de pantalla más pequeños.
- Acolchado superior:
- Tableta y teléfono: 10px
- Acolchado inferior:
- Tableta y teléfono: 10px
Agregar copia
En la columna 2, el único módulo que necesitamos es un módulo de botones. Agregue alguna copia de su elección.
Alineación de botones
Pase a la pestaña de diseño del módulo y cambie la alineación de los botones.
- Alineación de botones: Derecha
Configuración de botones
Dale estilo al botón siguiente.
- Usar estilos personalizados para el botón: Sí
- Tamaño del texto del botón: 16px
- Color del texto del botón: #ffffff
- Color de fondo del botón: #ed4441
- Color del borde del botón: #ed4441
- Radio del borde del botón: 0px
- Espaciado entre letras de botones: 4px
- Fuente del botón: Oswald
- Peso de la fuente del botón: Negrita
- Estilo de fuente del botón: Mayúsculas
- Mostrar icono de botón: Sí
- Color del icono del botón: #1a1a1a
Espaciado
Y complete la configuración del módulo agregando algunos valores de espaciado personalizados.
- Margen superior: -70px
- Relleno superior: 25px
- Relleno inferior: 25px
2. Aplicar efectos adhesivos personalizados
Gire la sección n.° 2 pegajosa
Ahora que hemos establecido la base de nuestro encabezado, ¡es hora de aplicar el efecto adhesivo! Para hacer eso, comience abriendo la configuración de la segunda sección y aplique la siguiente configuración adhesiva a la pestaña avanzada:
- Posición pegajosa: Stick to Top
- Desplazamiento superior pegajoso: 0px
- Límite pegajoso inferior: Ninguno
- Desplazamiento de los elementos pegajosos circundantes: Sí
- Estilos predeterminados y fijos de transición: Sí
Color de fondo de la fila fija
Ahora que la opción adhesiva está habilitada, podemos realizar cambios de diseño adhesivos en todos los elementos dentro de la sección. Comenzaremos abriendo la fila que contiene nuestro menú y aplicaremos un color de fondo adhesivo blanco.
- Color de fondo: #FFFFFF
Espaciado de filas fijas
A continuación, modificaremos los valores de espaciado adhesivo de la fila.
- Relleno superior: 0px
- Relleno inferior: 0px
Sombra de cuadro de fila pegajosa
También estamos cambiando el color de la sombra del cuadro en un estado pegajoso.
- Color de sombra: rgba(0,0,0,0.08)
Posicionamiento de fila fija
Luego, devolveremos el posicionamiento de la fila a relativo en un estado fijo.
- Cargo: Relativo
- Origen compensado: arriba a la izquierda
A continuación, cambiaremos el color del texto del menú adhesivo.
- Color del texto del menú: #000000
Junto con el color de fondo del menú móvil en la configuración del menú desplegable.
- Color de fondo del menú móvil: #ffffff
Cambie los colores del ícono en un estado fijo también.
- Color del icono del carrito de compras: #000000
- Color del icono de búsqueda: #000000
- Color del icono del menú de hamburguesas: #000000
Filtro de logotipo fijo
Luego, elimine el filtro de inversión de la imagen del logotipo en un estado fijo.
- Invertir imagen: 0%
Y complete el tutorial eliminando el margen superior negativo del botón mientras está pegajoso.
- Margen superior: 0px
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 combinar el generador de temas de Divi con las nuevas opciones adhesivas. Más específicamente, le mostramos cómo pasar de un encabezado transparente a un encabezado adhesivo con un estilo diferente en el desplazamiento. Este enfoque le permite fusionar el diseño de su página con su menú mientras mantiene un hermoso encabezado fijo en el desplazamiento. ¡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.