Cómo incluir la barra de menú principal en su div

La navegación es una parte vital de la experiencia del usuario en su sitio web. Es importante asegurarse de que sus visitantes puedan navegar sin problemas a través de su sitio web sin tener que comprometer los aspectos estéticos. Por defecto, la barra de menú principal WordPress se coloca en la parte superior de cada página y se considera separado por el diseño de la página que elige seguir. En muchos casos, sin embargo, la inclusión de su menú en el diseño general de la página puede traer resultados sorprendentes. Le dará a su sitio un aspecto más coherente. En esta publicación, le mostraremos cómo incluir la barra de menú principal en el diseño de la página de la Divic. Este es un cambio simple pero dinámico de la forma en que se muestra el menú principal, que ofrece un aspecto único a cualquier DIV.
¡Vamos a eso! Suscríbase a nuestra vista previa del canal de YouTube para comenzar a ver el resultado final en diferentes tamaños de pantalla:

Configuración de personalización del tema Acceda al tema de personalización Antes de comenzar a construir nuestro diseño, comience con algunos cambios en los temas personalizados. Vaya al tablero de WordPress> Personalización.

Guarde la imagen de fondo porque separaremos la parte superior de la barra de menú principal, necesitaremos algo para cubrir el espacio que normalmente ocupa. Usaremos la siguiente imagen de fondo, así que continúe y guárdela en su computadora:

Cargue la imagen de fondo en la configuración general, acceda a la configuración general> Fondo y cargue la imagen en el fondo de fondo.
Imagen de fondo de Strech: activado
Posición de fondo: fijo

La configuración principal de la barra de menú también, combinaremos la barra de menú principal lista con nuestro diseño de la división. Para hacer esto, primero tendremos que cambiar la configuración de la barra del menú principal. Vaya a Antet y Navegación> Barra de menú principal y use la siguiente configuración: Logotipo máximo: 100
Tamaño del texto: 18
Espacio de letras: -1
Fuente: Poppins
Color de texto: # 333333
Color de enlace activo: # F55C83
Color de fondo: RGBA (255,255,255.0)
El color del fondo desplegable del menú: #fffff
Agregue una nueva página CSS personalizada para que la barra de menú principal se superponga con el diseño de nuestra página, necesitaremos un poco de código CSS. Puede elegir si desea hacer que la superposición se aplique a todo su sitio web o simplemente en una página en particular. Si elige agregarlo a una sola página, agregue el siguiente código CSS a la configuración de la página: #-Header principal {

margen-top: 140px;
}
¡Agregue un nuevo color de fondo para comenzar con el diseño! Agregue una nueva página, cambie a Visual Builder y agregue la primera sección. Luego abra la configuración de la sección y agregue “RGBA (255,255,255,0,81)” como color de fondo. Esto le permitirá mostrar la imagen de fondo de nuestro sitio web.


El espacio continúa accediendo a la configuración del espacio y agregue el siguiente margen personalizado y llenado:

SUS y margen inferior: 100 PX
Margen izquierdo y derecho: 60 PX
Revestimiento superior: 135 px
Finamiento inferior: 0 PX
Las esquinas redondeadas agregan “30px” a cada una de las esquinas de su sección.

Borde y luego agregue un borde superior a su sección:

El ancho del borde superior: 35 px
Color de marco más alto: # 333333
Box Shadow Para terminar, agregue una sombra de una caja muy sutil. Poniendo la desenfoque de la sombra de la caja: 61 PX

Poder de extender la sombra de la caja: -13px
Agregar la estructura de la columna de la fila # 1 es hora de comenzar a agregar filas y módulos. Agregue la primera fila usando dos columnas de tamaños iguales.
Dimensión sin agregar módulos, abra la configuración de la fila y cambie la configuración de tamaño:

Haga esta fila ancho completo: sí

Igualar las alturas de la columna: sí
Espacio Agregar algunos revestimientos personalizados:
Revestimiento superior: 250 PX (escritorio), 50 px (tableta y teléfono)

Bajo forro: 200 PX (escritorio), 100 PX (tableta), 50 PX (teléfono)
Columna 1 relleno izquierdo: 50 px (escritorio), 0 px (tableta y teléfono)
Agregue el módulo de texto de título en la configuración de texto H1 de la columna 1 Ahora podemos comenzar a agregar los módulos. Comenzaremos con la primera columna agregando un nuevo modo de texto.
Fuente del título: Poppins

Fuente de peso disparo: medio
Encabezado de texto de tamaño: 120 PX (escritorio), 80 px (tableta), 58 PX (teléfono)
Agregue diferentes colores a algunos de la copia, puede cambiar fácilmente el color de una palabra en el título moviéndose a la pestaña de texto y agregando un color a la palabra elegida, usando etiquetas de span.
Agregue el módulo de descripción de texto a la configuración de texto de la columna 1 justo en el módulo de texto anterior, continúe y agregue una descripción de texto utilizando la siguiente configuración de texto:

Texto de fuente: Poppins

El peso de la fuente de texto: regular
Tamaño de texto: 20 PX (escritorio), 15 px (tableta y teléfono)
Altura de la línea de texto: 2em
Espacio necesitaremos un margen adicional para este módulo de texto:
SUS y margen inferior: 50 PX

Agregue el módulo de botón a la configuración de la columna 1 El último módulo en esta columna es un módulo de botón. Después de haber agregado CTA Copy, cambie los estilos de botón: Use estilos personalizados: Sí
El color del texto del botón: #ffffff

Color degradado 1: # F45085
Color de gradiente 2: # F88C7E
Dirección de gradiente: 137deg
El ancho del nudo del botón: 0 PX
Botón Raza: 40 PX
Botón de fuente: Poppins
Botón de fuente de peso: regular
Estilo de fuente: mayúscula
Espacio, luego abra la configuración del espacio y agregue un borde y llene al botón:
Margen inferior: 100 px (escritorio), 20 px (tableta y teléfono)
Revestimiento superior e inferior: 15 px



Revestimiento izquierdo y derecho: 50 PX
Por último, pero no menos importante, Box Shadow usaremos una sombra de caja muy sutil para crear más profundidad en nuestra página:
Poder de poco claro de la sombra de la caja: 55 px
Poder de extender la sombra de la caja: -4px

Color de la sombra: RGBA (84,84,84,0.25)
Agregue el módulo de imagen a la columna 2 Guardar y cargar la imagen de la segunda columna contiene solo un módulo de imagen. Utilizamos un modelo que forma parte del paquete de marketing digital. Continúe y guarde la imagen a continuación en su computadora. Después de hacer esto, agréguelo al módulo de imagen en la segunda columna.
Agregue la fila # 2 ¡La estructura de la columna es el momento de agregar la segunda fila! Elija la siguiente estructura de columna para esto:
Columna 1 Color de fondo Luego, abra la configuración de la fila y agregue “#FFFFFF” como un color de 1 y respaldo.

Copie el fondo del gradiente de botón Guardaremos algo de tiempo y copiaremos el gradiente que ya hemos usado para el módulo de botón. Para hacer esto, abra el módulo de botón, acceda a la configuración del botón, haga clic con el botón derecho en el fondo de gradiente y copie. Limine el fondo de gradiente en la columna 2, vuelva a la configuración ordinaria y pegue el fondo de gradiente en la segunda columna.


Columna 3 Color de fondo Para la tercera columna, usamos el color de fondo “#FFFFFF”.

Dimensión Vaya a la siguiente configuración de configuración y cambiando la configuración:

Use ancho personalizado: sí

Ancho personalizado: 2600 PX

Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1
Espacio también necesitaremos un revestimiento adicional:
Revestimiento superior e inferior: 0 px
El revestimiento superior e inferior de la columna: 30 px
Box Shadow por último, pero no menos importante, usaremos un tono de caja sutil:

Poder de poco claro de la sombra de la caja: 61 PX
Poder de extender la sombra de la caja: -20px
Agregue el módulo de blurb # 1 Elija el icono que necesitaremos tres módulos de blurbs en total. Comenzaremos con uno y lo clonaremos después para ahorrar tiempo. Continúe y agregue un nuevo módulo de propaganda a la primera columna. Después de agregar el contenido, seleccione un icono de su elección.

Configuración Modificado Configuración del icono La configuración del icono en consecuencia:
Icono de color: # F55C83
Colocación de íconos: izquierda

Use el icono del tamaño de la fuente: sí

Icono de tamaño de fuente: 88 PX (escritorio y tableta), 50 PX (teléfono)
Configuración de texto de título Abra la configuración de texto de título y realice algunos cambios:
Título de la fuente: Poppins
Fuente de peso del título: Medio
Título Tamaño del texto: 34 PX (escritorio y tableta), 23 PX (teléfono) El texto del cuerpo de texto también debe modificarse:

Cuerpo de fuentes: Poppins
Cuerpo de fuente de peso: regular
Tamaño de texto del cuerpo: 16 PX (escritorio), 14 px (tableta y teléfono)
La altura de la línea del cuerpo: 2em

Espacio y crear un diseño más estéticamente atractivo, agregue algunos forros:
Revestimiento superior y revestimiento inferior: 100 px
Revestimiento izquierdo y derecho: 50 PX (escritorio y tableta), 10 PX (teléfono)
Clonar el módulo de la propaganda dos veces y colóquelo en las columnas restantes continúe y clonando los módulos de la propaganda dos veces. Después de hacer esto, colóquelos en las columnas restantes.
Cambie el módulo de la propaganda a la columna 2 Cambiar el color de la propaganda del tercer icono no necesita cambios, sino el segundo. Comience cambiando el color del icono a blanco.

Cambie el color de texto abre la configuración de texto más y cambie el color de texto a “luz”.
Deshabilite la navegación fija para garantizar que la barra de menú principal mantenga su lugar en el diseño, tendremos que deshabilitar la barra de navegación fija. Para hacer esto, vaya a WordPress Tales> Divi> Opciones de tema> Deshabilitar la opción “Barra de navegación fija” y guarde la configuración.
Vista previa Ahora que hemos dado todos los pasos, eche un vistazo final al resultado en diferentes tamaños de pantalla: