Necesita para crear un menú flotante transparente en Divi ?
¿Está buscando una manera de colocar su encabezado general sobre las secciones principales de sus páginas? en el tutorial Divi Hoy te mostraremos exactamente cómo hacerlo.
Crearemos un sorprendente encabezado global desde cero (usando el constructor de temas de Divi) y aplicaremos un efecto flotante a la barra de menú.
Vamos.
vista
Antes de sumergirnos en este tutorial, echemos un vistazo rápido al resultado que queremos lograr.
Vaya a Divi's Theme Builder y agregue una nueva plantilla
Allez en Divi > Generador de temas.
Crear el encabezado global con Divi Theme Builder
Haga clic en 'Agregar encabezado global' y continúe seleccionando 'Crear encabezado global'.
Configuraciones de sección
Color de fondo
Una vez en el editor de plantillas, notará una sección en la página. Abra esta sección y cambie el color de fondo a un color completamente transparente. Esto permitirá que se muestre todo lo que está debajo de la sección.
- Fondo: rgba(0,0,0,0)
apresto
Luego vaya a la pestaña Estilo de sección y cambie el ancho máximo.
- Ancho máximo (Ver captura de pantalla): 100%
espaciamiento
También elimine todos los márgenes internos superior e inferior predeterminados.
- Vértice del margen interno: 0px
- Margen interno inferior: 0px
índice Z
Y para asegurarse de que la sección esté al tanto de todo contenido Desde la sección de héroe, necesitaremos aumentar el índice z en la configuración de visibilidad.
- Índice Z: 99999
Añadir una nueva linea
Estructura de la columna
Una vez que haya completado la configuración de la sección, puede agregar una nueva fila utilizando la siguiente estructura de columnas:
apresto
Sin agregar ningún módulo, abra la configuración de la fila y cambie la configuración de tamaño de la siguiente manera:
- Armonizar alturas de columnas: Sí
- Ancho máximo: 100%
- Ancho máximo: 100%
espaciamiento
Luego agregue márgenes internos personalizados (superior e inferior).
- Margen interno máximo: 2vw
- Margen interior inferior: 0vw
Elemento principal
A continuación, vaya a la pestaña Avanzado 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 de la fila principal.
display: flex;
Columna 2
Color de fondo
Continúe abriendo la configuración de la columna 2 y cambie el color de fondo a un color semitransparente.
- Color de fondo: rgba (255,255,255,0.71)
frontera
También agregue un borde inferior a la columna.
- Ancho del borde inferior: 2px
- Botón y color del borde inferior: #f4583f
Caja de sombra
Y cree un efecto flotante agregando una sutil sombra de cuadro.
- Cuadro de sombra: [Ver captura]
- Posición inicial: 20px
- Fuerza de desenfoque de sombra de arco: 50px
- Fuerza de propagación de la sombra del cuadro: -20px
- Color de fuente de los subtítulos: rgba(0,0,0,0.23)
Agregue un módulo de imagen a la columna 1
Descargar logo
Una vez que haya completado la configuración de filas y columnas, es hora de agregar los módulos, comenzando con un módulo Imagen en la columna 1. Cargue un logotipo con un fondo transparente.
alineación
Cambie a la pestaña Estilo del módulo y cambie la alineación.
- Alineación de la imagen: centrada
apresto
También cambie el ancho del módulo en la configuración de tamaño.
- Ancho máximo: 8 vw (escritorio), 14 vw (tablet), 21 vw (teléfono)
Agregar módulo de menú a la columna 2
Seleccione un Menú
Vamos a la siguiente columna. Allí, el único módulo que necesitamos es un módulo de Menú. Seleccione un menú de su elección.
Quitar el color de fondo
Luego vaya a la configuración de fondo y elimine el color de fondo.
Provisión
Cambie a la pestaña Estilo del módulo y cambie el diseño.
- Estilo: Centrado
- Menú desplegable: abajo
Texto del menú
También diseñe la configuración del texto del menú.
- Fuente del menú: Mulish
- Color del texto del menú: #6f6666
- Menú Tamaño de texto: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
el menú de navegación
Luego cambie la configuración desde el menú desplegable.
- Color de fila desplegable: #f4583f
iconos
Use este mismo color para el color del ícono del menú de hamburguesas en la configuración del ícono.
- Color del icono del menú de hamburguesas: #f4583f
espaciamiento
Complete la configuración del módulo agregando relleno superior e inferior en la configuración de espaciado.
- Máximo margen interno: 1,5 vw
- Margen interno inferior: 1,5 vw
Agregue el módulo Button a la columna 3
Agregar texto al botón
Pasemos a la siguiente y última columna. Agregue un módulo de botón con un texto de su elección.
alineación
Luego cambie la alineación del módulo.
- Alineación de botones: centrado
Configuraciones de botones
Continúe personalizando el botón en consecuencia:
- Usar estilos personalizados para Botón: Sí
- Tamaño del texto del botón: 0,9 vw (escritorio), 1,5 vw (tableta), 2,5 vw (teléfono)
- Color del texto del botón: #ffffff
- Botón de fondo: #f4583f
- Ancho del borde del botón: 0 píxeles
- Color del borde del botón: #f4583f
- Botón de radio del borde: 0 píxeles
- Fuente del botón: Mulish
- Botón de luz tenue: texto en negrita
espaciamiento
Complete la configuración del módulo agregando relleno personalizado en diferentes tamaños de pantalla.
- Margen interno superior e inferior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
- Margen interno izquierdo y derecho: 2vw (escritorio), 3vw (tableta), 4vw (teléfono)
Parámetros de sección adicionales
Elemento principal predeterminado
Una vez que hayas completado la personalización general, queda una cosa más por hacer; Coloque la sección encima de la contenido de tu página. Para hacer esto, necesitaremos agregar dos líneas de código CSS al elemento principal de la sección.
position: absolute;
top: 0;
Elemento principal al pasar el mouse
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 pases el cursor sobre ella.
position: absolute;
top: 0;
Guarde los cambios del constructor y vea el resultado
Una vez que haya completado la sección, puede guardar el encabezado global y mostrar el resultado en su sitio.
vista
Ahora que hemos seguido todos los pasos, echemos un último vistazo al resultado.
¡¡¡Descarga DIVI ahora!!!
Conclusión
Listo ! Eso es todo por este artículo. Le mostramos cómo crear una barra de menú flotante y transparente con Theme Builder de Divi. El encabezado se coloca encima de la primera sección de su página o publicación.
Para familiarizarse con Divi's Theme Builder, también puede leer nuestro artículo sobre Cómo crear un encabezado global con el generador de temas de Divi
También puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
