Cómo hacer que su logotipo cruce las barras de menú principal y secundaria dentro de su encabezado Divi
Publicado: 2021-05-12Cuando se trata de construir un encabezado, las posibilidades son infinitas. Puede incluir cualquier cosa que pueda imaginar dentro de su encabezado Divi si usa Divi Theme Builder. Hoy, agregamos otro tutorial de diseño de encabezado muy solicitado a su lista de recursos. Le mostraremos cómo hacer que su logotipo cruce las barras de menú principal y secundaria dentro de su encabezado. ¡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.
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.
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. Cree una nueva plantilla de encabezado global
Ir a Divi Theme Builder
Comience por ir al Divi Theme Builder en el backend de su sitio web de WordPress. Una vez allí, haga clic en "Agregar encabezado global".
Agregar nuevo encabezado global
Aparecerá un menú desplegable. Para comenzar a construir desde cero, continúe seleccionando "Crear encabezado global".
2. Crear diseño de encabezado
Agregar sección de especialidad
Para construir este diseño, usaremos una sección especializada.
Estructura de la columna
Esta es la estructura de columna que estamos usando para nuestra sección de especialidad:
Color de fondo de la columna 1
Una vez que haya agregado la sección de especialidad, abra su configuración y aplique un color de fondo de columna 1.
- Color de fondo de la columna 1: rgba (255,191,0,0.27)
Dimensionamiento
Vaya a la pestaña de diseño y cambie la configuración de tamaño de la siguiente manera:
- Ecualizar alturas de columna: Sí
- Usar ancho de canalón personalizado: Sí
- Ancho de la canaleta: 1
- Ancho interior: 100%
- Ancho máximo interno: 2580px
Espaciado
Modifique también la configuración de espaciado.
- Relleno superior: 0px
- Acolchado inferior: 0px
- Relleno superior de la columna 1: 0px
- Relleno inferior de la columna 1: 0px
- Relleno superior de la columna 2: 0px
- Relleno inferior de la columna 2: 0px
ID de CSS de columna
Luego, vaya a la pestaña avanzada y aplique una ID de CSS personalizada a ambas columnas.
- ID de CSS de la columna 1: encabezado-primera-columna
- ID de CSS de la columna 2: encabezado-segunda-columna
Agregar módulo de imagen a la columna 1
Cargar imagen
Es hora de agregar módulos, comenzando con un Módulo de imagen en la columna 1. Cargue su logotipo.
Alineación
Luego, pase a la pestaña de diseño y cambie la alineación de la imagen.
- Alineación de la imagen: centro
Dimensionamiento
Aplique un ancho máximo a la configuración de tamaño también.
- Ancho máximo: 100px
Visibilidad
Y oculte el módulo en tamaños de pantalla más pequeños.
Agregue la fila n. ° 1 a la columna 2
Estructura de la columna
En la columna 2 de nuestra sección de especialidad, agregaremos una primera fila usando la siguiente estructura de columnas:
Color de fondo
Abra la configuración de la fila y use el siguiente color de fondo:
- Color de fondo: # a163ff
Espaciado
Vaya a la pestaña de diseño de la fila y cambie la configuración de espaciado de la siguiente manera:
- Acolchado superior: 10px
- Acolchado inferior: 10px
- Acolchado izquierdo: 5%
- Acolchado derecho: 5%
Frontera
A continuación, aplique la siguiente configuración de borde:
- Ancho del borde inferior: 3px
- Ancho del borde izquierdo:
- Escritorio: 3px
- Tableta y teléfono: 0px
- Color del borde: # 6c2eb9
CSS del elemento principal
Y use las siguientes líneas de código CSS dentro del elemento principal de la fila:
display: flex; justify-content: center; align-items: center;
Ocultar las columnas 1 y 2 en tamaños de pantalla más pequeños
Para simplificar el diseño en tamaños de pantalla más pequeños, abriremos las configuraciones de las columnas 1 y 2 y las ocultaremos en la tableta y el teléfono.
Agregue el módulo de seguimiento de redes sociales a la columna 1
Agregar redes sociales
Es hora de agregar módulos, comenzando con un Módulo de seguimiento de redes sociales en la columna 1. Agregue las redes sociales de su elección.
Color de fondo de la red social individual
Modifique el color de fondo de cada red social individualmente.
- Color de fondo: #ffeeba
Configuración de iconos
Vuelva a la configuración general del módulo y cambie el color del icono.
- Color del icono: # 6c2eb9
Frontera
Agregue algunas esquinas redondeadas a la configuración del borde también.
- Todas las esquinas: 100px
Agregar módulo de texto a la columna 2
Agregar contenido
A continuación, agregue un módulo de texto a la columna 2 con algún contenido de su elección.
Configuración de texto
Cambie la configuración del módulo de la siguiente manera:
- Fuente de texto: Poppins
- Alineación de texto: centro
Agregar módulo de botones a la columna 3
Agregar copia
En la columna 3, 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 en diferentes tamaños de pantalla.
- Alineación de botones:
- Escritorio: Derecha
- Tableta y teléfono: Centro
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: 14px
- Color del texto del botón: # 6c2eb9
- Color de fondo del botón: #ffeeba
- Fuente del botón: Poppins
- Peso de la fuente del botón: negrita
- Estilo de fuente del botón: mayúsculas
- Mostrar icono de botón: Sí
- Ubicación del icono del botón: Izquierda
Espaciado
Y aplique los siguientes valores de relleno:
- Acolchado superior: 10px
- Acolchado inferior: 10px
- Relleno izquierdo: 50px
- Relleno derecho: 30px
Agregue la fila n. ° 2 a la columna 2
Estructura de la columna
La siguiente y última fila que necesitamos en la segunda columna de nuestra sección utiliza la siguiente estructura de columnas:
Color de fondo
Abra la configuración de la fila y use el siguiente color de fondo:
- Color de fondo: rgba (161,99,255,0.1)
Espaciado
A continuación, modifique la configuración de espaciado de la fila.
- Acolchado superior: 20px
- Acolchado inferior: 20px
- Acolchado izquierdo: 5%
- Acolchado derecho: 5%
Frontera
Luego, aplique la siguiente configuración de borde:
- Ancho del borde izquierdo:
- Escritorio: 3px
- Tableta y teléfono: 0px
- Color del borde izquierdo: # 6c2eb9
Agregar módulo de menú a la columna
Seleccione el menú
Entonces, el único módulo que necesitamos en esta fila es un módulo de menú. Seleccione un menú de su elección.
Cargar logotipo en tableta y teléfono
Luego, cargue un logotipo solo en la tableta y el teléfono.
Eliminar color de fondo
A continuación, elimine 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ú de la siguiente manera:
- Fuente del menú: Poppins
- Color del texto del menú: # 6c2eb9
- Tamaño del texto del menú: 16px
Configuración del menú desplegable
Aplique el siguiente color de línea del menú desplegable a continuación:
- Color de la línea del menú desplegable: rgba (0,0,0,0)
Configuración de iconos
Luego, cambie la configuración del icono.
- Color del icono del carrito de compras: # 6c2eb9
- Color del icono de búsqueda: # 6c2eb9
- Color del icono del menú de hamburguesas: # 6c2eb9
Dimensionamiento
Aplique un ancho máximo de logotipo en la tableta y el teléfono.
- Ancho máximo del logotipo:
- Tableta: 70px
- Teléfono: 50px
Agregar módulo de código a la columna 1
Para cambiar las proporciones de nuestro diseño de encabezado, haremos algunas modificaciones leves en CSS. Para incluir el código, agregue un módulo de código debajo del módulo de imagen en la columna 1.
Agregar etiquetas de estilo
Coloque algunas etiquetas de estilo dentro del cuadro de código.
Insertar código CSS entre etiquetas de estilo
Y coloque las siguientes líneas de código CSS entre las etiquetas de estilo:
@media all and (min-width: 980px) {
#header-first-column {
width: 10% !important;
display: flex;
justify-content: center;
align-items: center;
}
#header-second-column {
width: 90% !important;
}
}
@media all and (max-width: 980px) {
#header-first-column {
display: none;
}
}
4. Guarde los cambios en Divi Theme Builder
Ahora que todo está en su lugar, lo único que queda por hacer es guardar todos los cambios de Divi Theme Builder y ver el resultado.
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 ser creativo con su encabezado Divi. Más específicamente, le mostramos cómo hacer que su logotipo cruce la barra de menú principal y secundaria dentro de su encabezado. ¡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.