Cómo crear una barra de menú flotante transparente global con el generador de temas de Divi


¿Está buscando una manera de poner su encabezado global en la parte superior de las secciones de héroe de sus páginas? En el tutorial de Divi de hoy, le mostraremos exactamente cómo hacerlo. Recrearemos un impresionante encabezado global desde cero (utilizando el Creador de temas de Divi) y aplicaremos un efecto flotante a la barra de menú. ¡También podrás descargar el archivo JSON gratis!

Hagámoslo.

Avance

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

Escritorio

barra de menú flotante

Móvil

barra de menú flotante

Descargue la plantilla de encabezado global de la barra de menú flotante GRATIS

Para poner sus manos en la plantilla de encabezado global de la barra de menú flotante, 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 siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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 "volverá a suscribir" ni recibirá correos electrónicos adicionales.

(incrustar) https://www.youtube.com/watch?v=XcNa_hoPSFY (/ incrustar)

Suscríbase a nuestro canal de Youtube

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

Ir a Divi Theme Builder

Comience yendo al Divi Theme Builder.

barra de menú flotante

Comience a construir encabezado global

Luego, haga clic en "Agregar encabezado global" y continúe seleccionando "Crear encabezado global".

barra de menú flotante

2. Comience a construir encabezado global

Configuraciones de sección

Color de fondo

Una vez que esté dentro del editor de plantillas, verá una sección en la página. Abra esa sección y cambie el color de fondo a uno completamente transparente. Esto permitirá que se muestre todo lo que se encuentra debajo de la sección.

  • Color de fondo: rgba (0,0,0,0)

barra de menú flotante

Dimensionamiento

Vaya a la pestaña de diseño de la sección a continuación y cambie el ancho.

  • Ancho: 100%

barra de menú flotante

Espaciado

Elimine también todos los rellenos superiores e inferiores predeterminados.

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

barra de menú flotante

Índice Z

Y para asegurarnos de que la sección permanezca en la parte superior de todo el contenido de la sección de héroe, tendremos que aumentar el índice z de la sección en la configuración de visibilidad.

  • Índice Z: 99999

barra de menú flotante

Agregar nueva fila

Estructura de columna

Una vez que haya completado la configuración de la sección, puede agregar una nueva fila utilizando la siguiente estructura de columnas:

barra de menú flotante

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y cambie la configuración de tamaño de la siguiente manera:

  • Igualar alturas de columna: sí
  • Ancho: 100%
  • Ancho Máx .: 100%

barra de menú flotante

Espaciado

Agregue algunos rellenos superiores e inferiores personalizados a continuación.

  • Relleno superior: 2vw
  • Relleno inferior: 0vw

barra de menú flotante

Elemento principal

Luego, vaya a la pestaña avanzada y asegúrese de que las columnas permanezcan una al lado de la otra en tamaños de pantalla más pequeños agregando una sola línea de código CSS al elemento principal de la fila.

display: flex;

barra de menú flotante

Columna 2

Color de fondo

Continúe abriendo la configuración de la columna 2 y cambie el color de fondo a uno semitransparente.

  • Color de fondo: rgba (255,255,255,0.71)

barra de menú flotante

Frontera

Agregue un borde inferior a la columna también.

  • Ancho del borde inferior: 2px
  • Color del borde inferior: # f4583f

barra de menú flotante

Sombra de la caja

Y cree un efecto flotante agregando una sombra de cuadro sutil.

  • Posición vertical de la sombra de la caja: 20 px
  • Caja Shadow Blur Fuerza: 50px
  • Fuerza de propagación de la sombra de la caja: -20 px
  • Color de sombra: rgba (0,0,0,0.23)

barra de menú flotante

Agregar módulo de imagen a la columna 1

Subir logo

Una vez que haya completado la configuración de fila y columna, es hora de agregar los módulos, comenzando con un Módulo de imagen en la columna 1. Cargue un logotipo con un fondo transparente.

barra de menú flotante

Alineación

Pase a la pestaña de diseño del módulo y cambie la alineación.

  • Alineación de imagen: centro

barra de menú flotante

Dimensionamiento

Cambie también el ancho del módulo en la configuración de tamaño.

  • Ancho: 8vw (escritorio), 14vw (tableta), 21vw (teléfono)

barra de menú flotante

Agregar módulo de menú a la columna 2

Seleccione el menú

A la siguiente columna. Allí, el único módulo que necesitamos es un módulo de menú. Seleccione un menú de su elección.

barra de menú flotante

Eliminar color de fondo

Luego, vaya a la configuración de fondo y elimine el color de fondo.

barra de menú flotante

Diseño

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

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

barra de menú flotante

Texto del menú

Diseñe también la configuración del texto del menú.

  • Fuente del menú: Muli
  • Color del texto del menú: # 6f6666
  • Tamaño del texto del menú: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)

barra de menú flotante

Menú desplegable

Cambie la configuración del menú desplegable a continuación.

  • Color de línea del menú desplegable: # f4583f

barra de menú flotante

Íconos

Use ese mismo color para el color del icono del menú de hamburguesas en la configuración de los iconos.

  • Color del icono del menú de hamburguesas: # f4583f

barra de menú flotante

Espaciado

Complete la configuración del módulo agregando algo de relleno superior e inferior en la configuración de espaciado.

  • Relleno superior: 1.5vw
  • Acolchado inferior: 1.5vw

barra de menú flotante

Agregar módulo de botón a la columna 3

Agregar copia

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

barra de menú flotante

Alineación

Cambie la alineación del módulo a continuación.

  • Alineación de botones: centro

barra de menú flotante

Configuraciones de botones

Continúe con el estilo del botón en consecuencia:

  • Usar estilos personalizados para el botón: Sí
  • Tamaño del texto del botón: 0.9vw (escritorio), 1.5vw (tableta), 2.5vw (teléfono)
  • Color del texto del botón: #ffffff
  • Color de fondo del botón: # f4583f
  • Ancho del borde del botón: 0px
  • Color del borde del botón: # f4583f
  • Radio del borde del botón: 0px

barra de menú flotante

  • Fuente del botón: Muli
  • Peso de fuente del botón: negrita

barra de menú flotante

Espaciado

Y complete la configuración del módulo agregando algo de relleno personalizado en diferentes tamaños de pantalla.

  • Relleno superior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
  • Relleno inferior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
  • Acolchado izquierdo: 2vw (escritorio), 3vw (tableta), 4vw (teléfono)
  • Relleno derecho: 2vw (escritorio), 3vw (tableta), 4vw (teléfono)

barra de menú flotante

Configuración de sección adicional

Elemento principal predeterminado

Una vez que haya completado el diseño general, queda algo por hacer; colocando la sección en la parte superior del contenido de su página. Para hacer eso, necesitaremos agregar dos líneas de código CSS al elemento principal de la sección.

position: absolute;
top: 0;

barra de menú flotante

Pase el elemento principal

Asegúrese de agregar esas mismas líneas de código CSS a la opción de desplazamiento del elemento principal. Esto evitará que la sección parpadee una vez que la desplace.

position: absolute;
top: 0;

barra de menú flotante

3. Guardar los cambios del generador y ver el resultado

Una vez que haya completado la sección, puede guardar el encabezado global y ver el resultado en su sitio web.

barra de menú flotante

barra de menú flotante

Avance

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

Escritorio

barra de menú flotante

Móvil

barra de menú flotante

Pensamientos finales

En esta publicación, le mostramos cómo crear una barra de menú flotante con Divi’s Theme Builder. Esta es una excelente manera de combinar las secciones de encabezado y héroe. El encabezado se coloca en la parte superior de la primera sección de su página o publicación. ¡También pudiste 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 regalos Divi, asegúrese de Suscríbete a nuestro boletín de correo electrónico y Canal de Youtube así que siempre serás una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.