Cómo crear una barbacoa de menú transparente global con constructor de temas de Divi

¿Busca una manera de colocar su encabezado global en la parte superior de las secciones del héroe de sus páginas? En el tutorial de la división de hoy, le mostraremos exactamente cómo hacer esto. Recrearemos un sorprendente encabezado global desde cero (usando el creador de temas de Divin) y aplicaremos un efecto flotante en la barra de menú. ¡Podrá descargar el archivo JSON de forma gratuita! Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

Descargue gratis el encabezado global de la barra de menú flotante para poner sus manos en el encabezado global del encabezado de la barra de menú, primero debe descargarlo con el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia.
Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos! Suscríbase a nuestro canal de YouTube 1. Vaya a Div Div Theme Builder y agregue una nueva plantilla Access The Divide Theme Builder Comience a acceder al Builder de Theme Div.
Comience a crear un encabezado global, haga clic en “Agregar espectáculo global” y continúe seleccionando “Build Global Show”.

2. Comience a crear un fondo de configuración de encabezado global Una vez que esté en el editor de plantillas, notará una sección en la página. Abra esa sección y cambie el color de fondo en un completamente transparente. Esto permitirá que todo debajo de la sección se muestre.

Color de fondo: RGBA (0.0,0,0)
Dimensión Vaya a la siguiente pestaña de diseño de sección y cambie el ancho.

Ancho: 100%
El espacio elimina y todos los rellenos predeterminados, arriba e inferior.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
El índice Z y para garantizar que la sección permanezca en la altura de todo el contenido de la sección Héroe, tendremos que aumentar el índice Z de la sección en la configuración de visibilidad.

IND ÍNDICE: 99999
Agregue una nueva fila a la estructura de la columna después de haber completado la configuración de la sección, puede agregar una nueva línea utilizando la siguiente estructura de columna:

Dimensión sin agregar módulos, abra la configuración de la fila y cambie la configuración de tamaño de la siguiente manera:

Igualar las alturas de la columna: sí
Ancho: 100%
Ancho máximo: 100%
Espacio agregue algunos forros personalizados en la parte superior e inferior.

Revestimiento superior: 2VW
Revestimiento inferior: 0 VW
El elemento principal luego, acceda a la pestaña avanzada y asegúrese de que las columnas permanezcan una al lado de la otra en dimensiones de pantalla más pequeñas, agregando una sola línea de código CSS al elemento principal de la fila. Pantalla: Flex; Columna 2 Color de fondo Continúe abriendo la configuración de la columna 2 y cambie el color de fondo en semitransparente.

Color de fondo: RGBA (255.255.255.0.71)

Borde Agregue un borde inferior a la columna.
Ancho de borde inferior: 2 PX

Color del borde inferior: # F4583F
Box Shadow y crea un efecto flotante agregando una sombra de caja sutil.
Box Shadow Posición vertical: 20 PX

Poder de poco claro de la sombra de la caja: 50 px

Poder de extender la sombra de la caja: -20px
Color de la sombra: RGBA (0.0,0,0.23)
Agregue el módulo de imagen a la columna 1 Cargue el logotipo después de haber completado la configuración de la fila y la 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.
Alineación Vaya a la pestaña Diseño del módulo y cambie la alineación.

Alineación de imágenes: centro

Dimensión Cambiar el ancho del módulo y en la configuración de tamaño.
Ancho: 8VW (escritorio), 14VW (tableta), 21VW (teléfono)

Agregue un módulo de menú en la columna 2 Seleccione el menú Pase a la siguiente columna. Allí, la única forma en que necesitamos es un módulo de menú. Seleccione un menú de su elección.
Retire el color de fondo y luego acceda a la configuración de fondo y elimine el color de fondo.

Cambio de apariencia a la pestaña Diseño del módulo y cambie el aspecto.

Estilo: centrado

Dirección del menú desplegable: abajo
Estilización de texto del menú y la configuración del texto del menú.
Fuente del menú: muchos

Color de texto del menú: # 6f6666
Menú Tamaño del texto: 1VW (escritorio), 2VW (tableta), 3VW (teléfono) El menú de soltar y luego cambie la configuración del menú de soltar.
Color Line niega Denu: # F4583F
Los íconos usan el mismo color para el color del icono del menú de hamburguesas en la configuración del icono.

Icono de menú de hamburguesas de color: # F4583F
Espacio Complete la configuración del módulo agregando algunos rellenos superior e inferior a la configuración de espaciado.

Revestimiento superior: 1.5VW
Revestimiento inferior: 1.5VW

Agregue un módulo de botón a la columna 3 Agregue una copia Pase a la siguiente y última columna. Agregue un botón con una copia de su elección.
Cambio de alineación La alineación del módulo.
Alineación de botones: centro

Configuración Continúe estilizando el botón de acuerdo con:

Use estilos personalizados para el botón: Sí
Tamaño de texto de texto: 0.9VW (escritorio), 1.5VW (tableta), 2.5VW (teléfono)

El color del texto del botón: #ffffff
El color de fondo del botón: # F4583F
El ancho del nudo del botón: 0 PX
El color del marco del botón: # F4583F
El rasgo de botón de botón: 0 px
Botón de fuente: muchos
Botón de peso de fuente de fuente: en negrita
Espacio y complete la configuración del módulo agregando revestimiento personalizado en diferentes tamaños de pantalla.

Revelaje superior: 1VW (escritorio), 2VW (tableta), 3VW (teléfono)
Bajo forro: 1VW (escritorio), 2VW (tableta), 3VW (teléfono)

ENLIZACIÓN IZQUIERDA: 2VW (escritorio), 3VW (tableta), 4VW (teléfono)
Revestimiento derecho: 2VW (escritorio), 3VW (tableta), 4VW (teléfono)
Configuración adicional de la sección del elemento principal predeterminado Después de haber completado el diseño general, sigue habiendo una cosa que hacer; Colocación de la sección sobre el contenido de la página. Para hacer esto, necesitaremos agregar dos líneas de código CSS al elemento principal de la sección. Posición: Absoluto; arriba: 0;
Coloque el cursor en el elemento principal, asegúrese de agregar las mismas líneas de código CSS a la opción de movimiento del elemento principal. Esto evitará que la sección parpadee una vez que la coloque.
Posición: Absoluto;

Arriba: 0;
3. Guarde los cambios del constructor y vea el resultado después de haber completado la sección, ¡puede guardar el encabezado global y ver el resultado en su sitio web!

Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio
Móvil
Pensamientos finales En esta publicación, te mostré cómo crear una barra de menú flotante con el constructor de temas de Divin. Esta es una forma maravillosa de mezclar sus secciones de encabezado y héroe. ¡El encabezado se coloca por encima de la primera sección de su página o publicación, puede 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 obtener más información sobre Divi y obtener más regalos de la Divicidad, 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 beneficios de este contenido gratuito.