Cómo reemplazar la barra de menú principal con el módulo de menú para el ancho completo

La barra de menú principal hace que la navegación para los visitantes sea simple. Además de la barra de menú principal predeterminada a la que nos acostumbramos en WordPress, probablemente cumplió el módulo de menú de ancho completo ofrecido por Div. Por lo general, se usa para mostrar otros menús en su sitio web que son diferentes del menú principal que tiene en la parte superior de cada página. Pero puede usar fácilmente el módulo de menú de ancho completo para reemplazar la barra de menú principal. Esto le brinda la libertad de colocar el menú donde quiera en la página, sin tratar un menú duplicado en la parte superior de la página. También puede usar las opciones de división inotros para estilizar el menú como desee, lo que significa que puede crear resultados sorprendentes utilizando las opciones de borde y divisor, por ejemplo.
En este tutorial, le mostraremos cómo reemplazar la barra de menú principal con el módulo de menú de ancho completo utilizando el paquete de diseño Carpenter de Divi. Esto es parte de nuestra iniciativa de diseño de la divicidad. Puede elegir si desea que este método se aplique a todas las páginas o solo algunas de ellas. ¡Vamos a eso! Vista previa antes de arrojar nuestras cabezas en el tutorial del caso de uso, para ver rápidamente el resultado final en diferentes dimensiones de pantalla.

Deshabilite la barra de navegación fija Acceso a las opciones del tema Divin Lo primero que debemos hacer es deshabilitar la opción de navegación fija de las opciones de temas de división. Hacemos esto para deshacerse del menú principal en la parte superior de nuestra página. Para hacer esto, vaya a las opciones de temas de WordPress Board> Divi>.

Deshabilite la barra de navegación fija Abra la pestaña General y apague la opción de barra de navegación fija. Cree el menú principal Vaya a los menús Lo siguiente que haremos es crear nuestro menú principal. Usaremos este menú principal para la barra de menú principal predeterminada en la parte superior y para el módulo de menú de ancho completo. Para agregar el menú, vaya al tablero de WordPress> Apariencia> Menús.

Agregue un nuevo menú principal Agregue un nuevo menú, dale un nombre al menú y conviértalo en el menú principal.

Agregue páginas y guarde el menú por última vez, pero no menos importante, agregue todas sus páginas y guarde el menú.

La barra de menú de estilo principal en el personalizador temático del tema de acceso al cliente, dependiendo de si desea o no ocultar la barra de menú principal predeterminada en todas las páginas, primero puede estilizar la barra de menú principal predeterminada. Tienes que hacer esto solo si tiene la intención de usarlo en algunas páginas. Si desea eliminar la barra de menú principal en todas partes, puede omitir este paso.

La configuración principal de la barra de menú para que coincida con el paquete de apariencia, aplicamos los siguientes cambios:

Estilo de fuente: en negrita y mayúscula
Color de texto: #ffffff
Color de enlace activo: #ffffff
Color de fondo: # F25B3A
Color del menú desplegable Fondo: # F25B3A
Oculte la barra del menú principal Una página Vaya a la página de elección y active Visual Builder para ocultar la barra de menú principal en la parte superior de nuestras páginas, necesitaremos usar una pequeña cantidad de código CSS. Tenga en cuenta que es importante haber deshabilitado la barra de navegación fija (uno de los pasos anteriores). De lo contrario, el espacio ocupado por la barra de menú principal será blanco y no desaparecerá por completo. Si desea ocultar el menú principal en una página, en particular, vaya a esa página y active Visual Builder. Abra la configuración de la página, luego abra la configuración de la página haciendo clic en el siguiente icono en la parte inferior de la página:

Agregue el código CSS Pase a la pestaña Avanzada y agregue el siguiente código CSS al cuadro CSS personalizado: #-Header principal {

Pantalla: ninguno;

}
Todo el sitio accede a las opciones del tema de la división Si desea deshacerse de la barra de menú principal en todo el sitio web, también puede hacerlo. No tiene que agregar manualmente el código a cada página. En cambio, solo puede ir a sus opciones de temas de WordPress> Divi>.
Agregue el código CSS Continuar ejecutándose hasta que se encuentre con el cuadro CSS personalizado y agregue el mismo código CSS allí: #-Header Main {


Pantalla: ninguno;

}
Agregue la barra de menú principal a la página Abra la página de destino con Visual Builder ahora que hemos ocultado la barra de menú principal, podemos comenzar a agregar el módulo de menú de ancho completo a nuestra página. Para esto, vaya a la página de destino, por ejemplo, y active Visual Builder.
Agregue la sección de ancho completo continúe agregando una sección de ancho completa justo debajo de la sección de héroes.

El borde superior puede usar todas las opciones de divin integradas para crear el diseño exacto que desea. Lo mantendremos bastante limpio. Lo único que agregaremos a las opciones de nuestra sección es un borde superior: el ancho del borde superior: 7 PX

Color de marco más alto: # F25B3A

Agregue el módulo de menú de ancho completo y luego, agregue el módulo de menú de ancho completo a su sección.
Seleccione el menú principal Seleccione el menú principal como un menú que desea mostrar.
El color de fondo continúa dando a su módulo un color de fondo negro.

Configuración de enlace luego abra la configuración del enlace y aplique los siguientes cambios:

Color de enlace activo: #ffffff

Color de texto en el menú desplegable: #ffffff

El color del texto del menú móvil: #ffffff
Orientación de texto: izquierda
Color de texto: Abierto
Configuración del menú Decorn Modifique la configuración del menú desplegable:
El color del fondo del menú desplegable: # 000000
Menú de línea de color decant: # 000000

Color de fondo del menú móvil: # 000000
Configuración de texto del menú Finalmente, haremos que la configuración de texto coincida con el paquete de apariencia:
Menú de fuentes: Ultra Bold
El estilo de la fuente del menú: mayúscula

¡Haga la sección global de ancho completo y use en otras páginas guardadas como una sección global, terminamos de crear nuestro nuevo menú principal! Si tiene la intención de usarlo en otras páginas, continúe y agréguelo a la Biblioteca Divic como un artículo global.
Agregue a otras páginas sin la barra de menú principal ahora puede agregar fácilmente este menú de ancho completo a otras páginas. ¡Puede elegir su posición y puede jugar con las opciones de diseño construidas que vienen con ella!
Vista previa ahora, que hemos seguido todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Finales finales En esta publicación de blog de uso, le mostré cómo reemplazar la barra de menú principal en la parte superior de sus páginas con módulo de menú de ancho completo.La aplicación de este método le brinda la libertad de poder colocar su menú donde quiera. Además, también puede usar las opciones de división inoperadas para estilizarlo.Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios a continuación.