Cuando se trata de construir un encabezado, las posibilidades son infinitas. Puedes incluir cualquier cosa que puedas imaginar dentro de tu encabezado Divi si usas Divi Theme Builder . Hoy, estamos agregando 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.
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 poner sus manos en 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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
1. Crear nueva plantilla de encabezado global
Ir al Creador de temas Divi
Comience yendo a 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, vamos a utilizar una sección especial.
Estructura de la columna
Esta es la estructura de columnas 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
Pase a la pestaña de diseño y cambie la configuración de tamaño de la siguiente manera:
- Igualar alturas de columna: Sí
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
- Ancho interior: 100%
- Ancho máximo interior: 2580px
Espaciado
Modifique también la configuración de espaciado.
- Relleno superior: 0px
- Relleno inferior: 0px
- Columna 1 Relleno superior: 0px
- Relleno inferior de la columna 1: 0px
- Columna 2 Relleno superior: 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
- Columna 2 CSS ID: 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 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 especialidades, 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
Pase a la pestaña de diseño de la fila y cambie la configuración de espaciado de la siguiente manera:
- Relleno superior: 10px
- Relleno inferior: 10px
- Relleno izquierdo: 5%
- Relleno derecho: 5%
Borde
Aplique la siguiente configuración de borde a continuación:
- Ancho del borde inferior: 3px
- Ancho del borde izquierdo:
- Escritorio: 3px
- Tableta y teléfono: 0px
- Color del borde: #6c2eb9
Elemento principal CSS
Y use las siguientes líneas de código CSS dentro del elemento principal de la fila:
|
01
02
03
|
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 la configuración de las columnas 1 y 2 y ocultaremos ambas en la tableta y el teléfono.
Añadir 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
Modifica 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
Borde
Agregue también algunas esquinas redondeadas a la configuración del borde.
- 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 del texto: Poppins
- Alineación de texto: Centro
Agregar copia
En la columna 3, el único módulo que necesitamos es un módulo de botones. Agregue alguna copia de su elección.
Alineación de botones
Pase 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: Derecho
- Tableta y teléfono: Centro
Configuración de botones
Dale estilo al botón siguiente.
- 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:
- Relleno superior: 10px
- Relleno 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 usa la siguiente estructura de columna:
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
Modifique la configuración de espaciado de la fila a continuación.
- Relleno superior: 20px
- Relleno inferior: 20px
- Relleno izquierdo: 5%
- Relleno derecho: 5%
Borde
Luego, aplique la siguiente configuración de borde:
- Ancho del borde izquierdo:
- Escritorio: 3px
- Tableta y teléfono: 0px
- Color del borde izquierdo: #6c2eb9
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
Elimine el color de fondo del módulo a continuación.
Configuración del texto del menú
Pase 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, vamos a hacer algunas ligeras modificaciones de 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:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
|
@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. Guardar los cambios del generador de temas Divi
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 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 aprender más sobre Divi y obtener más regalos de Divi, 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 los beneficios de este contenido gratuito.