Cómo hacer que su encabezado transparente sea pegajoso en el desplazamiento con Divi

Cuando se trata de configurar un encabezado global para su sitio web, hay muchas formas 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 adhesivo en el desplazamiento, le encantará este tutorial. Usando las opciones adhesivas incorporadas de Divi, le mostraremos cómo pasar de un encabezado transparente a un encabezado adhesivo de estilo diferente en el desplazamiento. ¡La transición entre transparente y pegajoso es sin esfuerzo! 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!

1. Creación de la estructura del elemento de encabezado dentro de una nueva plantilla de encabezado

Crear nueva plantilla de encabezado global

Empiece por ir a Divi Theme Builder. Allí, comience a construir un nuevo encabezado global o personalizado.

Configuración de la sección # 1

Color de fondo

Una vez dentro del editor de plantillas, verá una sección. Esta sección estará dedicada a la barra de encabezado superior que puede notar 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

Vaya a la pestaña de diseño de la sección y elimine todo el relleno superior e inferior predeterminado.

• Relleno superior: 0px
• Acolchado 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

Vaya a la pestaña de diseño del módulo y cambie la configuración del texto en consecuencia:

• Fuente de 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

Agregar sección n. ° 2

Espaciado

Justo debajo de la primera sección, agregue otra sección regular. Esta sección estará dedicada a nuestro menú transparente que se volverá pegajoso en el desplazamiento. 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
• Acolchado 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

Vaya 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 de la canaleta: 1
• Ancho: 100%
• Ancho máximo: 100%

Espaciado

Agregue un poco de relleno personalizado a la izquierda y a la derecha a continuación.

• Acolchado izquierdo: 10%
• Acolchado derecho: 10%

Sombra de la caja

Luego, aplique una sombra de caja transparente. Más adelante en el tutorial, usaremos esta sombra de caja en un estado pegajoso con un color de sombra diferente.

• Fuerza de desenfoque de sombra de caja: 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: Absoluto
• Ubicación: arriba a la izquierda

Columna 2 Visibilidad

También estamos ocultando la segunda columna de nuestra fila en la tableta y el teléfono para tener un diseño de encabezado menos complejo en tamaños de pantalla más pequeños.

Agregar módulo de menú a la columna 1

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.

Subir logotipo

Sube un logo a continuación.

Eliminar color de fondo

Elimine también el color de fondo del módulo.

Configuración del texto del menú

Vaya 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 iconos en la configuración de los iconos.

• 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 cambiando el filtro de inversión de imagen.

• Inversión de imagen: 90%

Dimensionamiento

Luego, asignaremos una altura máxima a nuestro logotipo.

• Altura máxima del logotipo: 40 px

Espaciado

A continuación, agregaremos algo 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 módulo de botones a la columna 2

Agregar copia

En la columna 2, el único módulo que necesitamos es un módulo de botones. Agregue una copia de su elección.

Alineación de botones

Vaya 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 a continuación.

• 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
• Espacio entre letras del botón: 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
• Acolchado superior: 25px
• Acolchado inferior: 25px

2. Aplicar efectos adhesivos personalizados

Gire la sección # 2 pegajosa

Ahora que hemos establecido las bases de nuestro encabezado, ¡es hora de aplicar el efecto pegajoso! 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 adhesiva: adherirse a la parte superior
• Desplazamiento superior pegajoso: 0px
• Límite inferior de adherencia: Ninguno
• Desplazamiento de elementos pegajosos circundantes: Sí
• Transición de estilos predeterminados y pegajosos: Sí

Color de fondo de fila adhesiva

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 pegajoso blanco.

• Color de fondo: #FFFFFF

Espaciado fijo entre filas

A continuación, modificaremos los valores de espaciado fijo de la fila.

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

Sombra de caja 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 pegajosa

Luego, devolveremos la posición de la fila a relativa en un estado pegajoso.

• Posición: relativo
• Origen de desplazamiento: arriba a la izquierda

Configuración de texto de menú fijo

A continuación, cambiaremos el color del texto del menú fijo.

• Color del texto del menú: # 000000

Configuración desplegable del menú fijo

Junto con el color de fondo del menú móvil en la configuración desplegable del menú.

• Color de fondo del menú móvil: #ffffff

Colores del icono del menú pegajoso

También cambia los colores de los iconos en un estado pegajoso.

• 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 adhesivo

Luego, retire el filtro de inversión de la imagen del logotipo en un estado pegajoso.

• Inversión de imagen: 0%

Espaciado de botones adhesivos

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 fijo de 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 adhesivo en el desplazamiento. ¡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.