¿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 Divi de hoy, le mostraremos exactamente cómo hacerlo. Recrearemos un encabezado global impresionante desde cero (usando Divi’s Theme Builder) y aplicaremos un efecto flotante a la barra de menú.
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
1. Vaya a Divi Theme Builder y agregue una nueva plantilla
Ir a Divi Theme Builder
Comience yendo al Divi Theme Builder.
Comience a construir encabezado global
Luego, haga clic en ‘Agregar encabezado global’ y continúe seleccionando ‘Construir encabezado global’.
2. Comience a construir encabezado global
Configuraciones de sección
Color de fondo
Una vez que esté dentro del editor de plantillas, notará 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 debajo de la sección.
- Color de fondo: rgba (0,0,0,0)
Dimensionamiento
Vaya a la pestaña de diseño de la sección siguiente y cambie el ancho.
- Ancho: 100%
Espaciado
Elimine también todos los rellenos superiores e inferiores predeterminados.
- Relleno superior: 0px
- Relleno inferior: 0px
Í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, necesitaremos aumentar el índice z de la sección en la configuración de visibilidad.
- Índice Z: 99999
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:
Dimensionamiento
Sin agregar ningún módulo todavía, abra la configuración de fila y cambie la configuración de tamaño de la siguiente manera:
- Igualar alturas de columna: sí
- Ancho: 100%
- Ancho Máx .: 100%
Espaciado
Agregue algunos rellenos superiores e inferiores personalizados a continuación.
- Relleno superior: 2vw
- Relleno inferior: 0vw
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.
01 | display: flex; |
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)
Frontera
Agregue un borde inferior a la columna también.
- Ancho del borde inferior: 2px
- Color del borde inferior: # f4583f
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
- Fuerza de desenfoque de sombra de caja: 50 px
- Fuerza de propagación de sombra de caja: -20 px
- Color de sombra: rgba (0,0,0,0.23)
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.
Alineación
Pase a la pestaña de diseño del módulo y cambie la alineación.
- Alineación de imagen: centro
Dimensionamiento
Cambie el ancho del módulo en la configuración de tamaño también.
- Ancho: 8vw (escritorio), 14vw (tableta), 21vw (teléfono)
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.
Eliminar color de fondo
Luego, vaya a la configuración de fondo y elimine el color de fondo.
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
Texto del menú
Dale estilo a la configuración del texto del menú también.
- Fuente del menú: Muli
- Color del texto del menú: # 6f6666
- Tamaño del texto del menú: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
Menú desplegable
Cambie la configuración del menú desplegable a continuación.
- Color de línea del menú desplegable: # f4583f
Í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
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
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.
Alineación
Cambie la alineación del módulo a continuación.
- Alineación de botones: centro
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
- Fuente del botón: Muli
- Peso de fuente del botón: negrita
Espaciado
Y complete la configuración del módulo agregando un relleno personalizado en diferentes tamaños de pantalla.
- Relleno superior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
- Acolchado 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)
Configuración de sección adicional
Elemento principal predeterminado
Una vez que haya completado el diseño general, queda una cosa 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.
01 02 | position: absolute;top: 0; |
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.
01 02 | position: absolute;top: 0; |
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.
Por Prunaestudio
Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.
* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)
Nuestras últimas entradas
Cómo crear una plantilla de publicación de apertura de empleo dinámica con Divi Theme Builder y ACF
Cuando use Divi Theme Builder en combinación con contenido dinámico, rápidamente se encontrará reemplazando los complementos con plantillas hechas a medida. En el tutorial de hoy, le mostraremos cómo crear una plantilla de publicación de empleo completamente dinámica...
Cómo crear una plantilla de proyecto de cartera dinámica con Divi y ACF
¿Busca una manera de optimizar la forma en que crea elementos de cartera en su sitio web? Si es así, te encantará esta publicación. En este tutorial, le mostraremos cómo crear una plantilla de proyecto de cartera dinámica con Divi's Theme Builder y el complemento...
Cómo diseñar una barra de redes sociales tipo pop-up emergentes para la plantilla de tu página en Divi
Los botones de seguimiento de redes sociales siguen siendo una adición popular a cualquier sitio web. Las empresas y los individuos usan estos enlaces para redirigir a los usuarios a sus páginas de redes sociales con la esperanza de que los visitantes los sigan o se...
