Cómo colocar el menú de navegación de los divisores de su sección

El menú de navegación es una de las primeras cosas que los visitantes buscan al acceder a su sitio por este motivo, los sitios web se aseguran de que le ofrezcan bienes inmuebles primarios (en la parte superior de la página) que merece. Pero si desea que su menú de navegación salga un poco más tiempo, puede darle vida con modelos de fondo personalizados. Con Visual Builder Div, puede crear algunos modelos de fondo maravillosos con las opciones de fondo de divisor disponibles en cada sección de su página y con poca creatividad, puede usar un fondo divisor para servir como un solo cuadro para el menú de navegación. Incluso puede crear un fondo de menú único para cada página de su sitio web.
En este tutorial, le mostraré lo fácil que es adaptarse a sus menús de navegación con hermosos patrones de fondo utilizando fondos de división de secciones. Usaré el paquete de modelos farmacéuticos como ejemplo de un sitio para crear estos modelos. ¡Vamos a empezar! Dibuja el ojo es un pico de lo que se puede hacer con esta técnica de diseño.


Lo que necesita para este tutorial, solo necesita lo siguiente:
El tema de la división (instalado y activo)
Paquete de disposición de farmacia (una disposición prefabricada gratuita disponible en Divi Builder)
Configuración del menú principal en el cliente temático para este tutorial, tengo una nueva instalación de la división con mi menú principal que contiene las seis páginas del paquete de diseño farmacéutico. Así es como se ve el menú de forma predeterminada.

Como puede ver, el encabezado tiene un fondo blanco y está por encima de la primera sección de la página. Cuando se desplaza hacia abajo, el encabezado se convierte en una barra de menú de navegación fija. Pero para este tutorial, quiero hacer el fondo de fondo, para que pueda agregar mi propio fondo personalizado. Para hacer esto, debemos pasar al personalizador del tema. Desde el tablero de WordPress, vaya a Divi> Customizer de temas. Luego, desde el menú de personalización, vaya al encabezado y la navegación> Barra del menú principal. Cambie el color de fondo para que sea completamente transparente deslizando el control deslizante de transparencia al final o ingrese el código de color RGBA (255,255,255.0).

Como puede ver, el fondo blanco del encabezado desapareció y la primera sección saltó en la parte superior de la página para servir como fondo y menú principal. Debido a que agregaremos un fondo de color para que se ajuste al menú de navegación, actualice las siguientes opciones de texto en el menú. Fuente: Montserrat Font estilo: en negrita (b) Color de texto: White Color Link: White

Regrese a un nivel en el menú personalizado y haga clic en la pestaña de navegación fija. Si mantiene la funcionalidad de la navegación fija, puede darle un color personalizado que complementa el color del fondo personalizado que construirá en el Visual Builder. O puede darles un color más genérico, para que pueda colocar sus menús principales con diferentes colores basados ​​en la página. Por ahora, usaré un esquema de color más genérico para mi navegación fija. Actualizar lo siguiente:

El color del fondo del menú principal: #ffffff Enlace del menú principal: RGBA (0.0,0,61) enlace de color Menú activo principal: # FF5473 ¡Ahora estamos listos! Asegúrese de publicar los cambios. La clasificación de su menú de navegación con una sección de división de la sección Ejemplo no. 1 Vaya a la página de inicio de la farmacia e implemente el generador visual. Luego agregue una nueva sección habitual sin líneas, columnas o módulos (no los necesita) y tire de la sección en la parte superior de la página (parece más fácil reorganizar las secciones en modo de estructura alambre, porque estos son bloques más grandes).
Ahora regrese al modo de escritorio para completar el diseño. Abra la configuración de la sección y actualice lo siguiente: Conjunto del divisor superior: consulte la captura de pantalla del divisor de color: # FF5473 Altura del divitor: 150 PX Distribuidor horizontal: 0.8x Margen personalizado: -80 PX Bajo el revestimiento personalizado: 0 PX arriba, 0 px fondo

El color del divisor es el mismo color rosa utilizado en la apariencia. Establecí la distribución horizontal del divisor a 0.8x para aplanar ligeramente el divisor. El margen inferior -80px lleva la sección hacia abajo en la página para ocultar el fondo blanco de la sección. Esto da como resultado que el divisor caiga a la derecha. El divisor se extiende hacia la izquierda para agregar un hermoso fondo y su logotipo


Así es como se ve en el sitio en vivo.

Ejemplo no. 2 Para el siguiente ejemplo, colocaré la sección para que el fondo del divisor solo enmarque el menú de navegación en lugar de extenderse al logotipo. Para hacer esto, debemos ofrecer a nuestra sección un ancho personalizado y alinearlo a la derecha, para que se ajuste al menú de navegación. Acceda a la configuración de la sección y actualice lo siguiente: (Nota: es posible que deba abrir la configuración de la estructura de alambre, porque la sección personalizada de la sección puede hacer que el menú de la sección no se pueda hacer clic. Una vez que haya abierto la configuración en modo de estructura alambre, puede devolver A la vista de escritorio de modo.) Ancho: 75% de alineación de la sección: Estilo de divisor derecho: ver Captura del distribuidor horizontal: 1x
Así es como se ve:

Con la navegación fija activada, puede ver cómo activar el encabezado del menú fijo, justo cuando el menú comienza a abandonar el marco.
Si desea deshabilitar la navegación fija, navegue por las divisiones en el tema y desactive las opciones de barra de navegación fija desde la configuración general.

Sin navegación activa activa, su menú permanecerá bloqueado en su lugar en el diseño del marco mientras se ejecuta.

Receptivo El marco se verá incluso en los dispositivos móviles.

Pero puede elegir en cualquier momento para ocultar el marco ofreciendo a su sección una altura del separador cero y móvil personalizado. Y luego personalice su menú móvil en la tarea personalizada.

Use diferentes marcos de color en diferentes páginas

Si lo desea, puede agregar diferentes colores y patrones basados ​​en la página.Todo lo que tiene que hacer es guardar la sección en la biblioteca de la Divica y agregarla a otra página de su sitio web.Entonces puede ajustar el color o el diseño como desee.Las posibilidades son ilimitadas.El pensamiento final agregar un fondo personalizado al menú de navegación es en realidad bastante fácil con el Builder Div.Todo lo que necesita saber es cómo colocar su sección para servir como fondo para su menú y con esta configuración, puede probar diferentes estilos de separación para crear todo tipo de marcos únicos para el menú de navegación.Y dado que usa una sección, tiene todas las opciones de diseño de una sección para diseñar su marco.Incluso puede usar un fondo o gradiente simple y ajustar la posición de la sección donde quiera. Espero tener noticias suyas en los comentarios.¡Suerte!