Cómo enmarcar su menú de navegación con divisores de sección

Su menú de navegación es una de las primeras cosas que buscan los visitantes cuando visitan su sitio. Debido a esto, los sitios web se aseguran de darle la propiedad inmobiliaria principal (en la parte superior de la página) que se merece. Pero si está buscando que su menú de navegación se destaque un poco más, puede darle vida con diseños de fondo personalizados. Con Visual Builder de Divi, puede crear algunos diseños de fondo increíbles con las opciones de fondo Divisor disponibles en cada sección de su página. Y con un poco de creatividad, puede usar un fondo divisor para que sirva como marco único para su 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 enmarcar sus menús de navegación con hermosos diseños de fondo utilizando fondos de división de sección. Usaré el paquete de diseño de farmacia como un sitio de ejemplo para crear estos diseños.

¡Empecemos!

Vistazo

Aquí hay un adelanto de lo que se puede lograr con esta técnica de diseño.

Que necesitas

Para este tutorial, todo lo que realmente necesita es lo siguiente:

• El tema Divi (instalado y activo)
• El paquete de diseño de farmacia (un paquete de diseño prefabricado gratuito disponible dentro de Divi Builder)

Configuración de su menú principal en el personalizador de temas

Para este tutorial, tengo una nueva instalación de Divi con mi menú principal que contiene las seis páginas del paquete de diseño de farmacia. Así es como se ve el menú por defecto.

Como puede ver, el encabezado tiene un fondo blanco y se encuentra 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 que el fondo del encabezado sea transparente para poder agregar mi propio fondo personalizado. Para hacer esto, debemos saltar al personalizador de temas. Desde el panel de WordPress, vaya a Divi> Personalizador de temas. Luego, desde el menú del personalizador, vaya a Encabezado y navegación> Barra de menú principal.

Cambie el color de fondo para que sea completamente transparente arrastrando el control deslizante de transparencia hasta el final o ingrese el código de color rgba (255,255,255,0).

Como puede ver, el fondo del encabezado blanco ha desaparecido y su primera sección ha saltado a la parte superior de la página para servir como fondo de su encabezado y menú principal.

Dado que vamos a agregar un fondo de color para enmarcar nuestro menú de navegación, actualice también las siguientes opciones de texto del menú.

Fuente: Montserrat
Estilo de fuente: Negrita (B)
Color del texto: blanco
Color de enlace activo: blanco

Retroceda un nivel en su menú de personalización y haga clic en la pestaña Navegación fija. Si va a mantener funcional la navegación fija, puede darle un color personalizado que complemente el color de su fondo personalizado que creará en el constructor visual. O puede darle un color más genérico para que pueda enmarcar sus menús principales con diferentes colores por página. Por ahora, usaré un esquema de color más genérico para mi navegación fija. Actualice lo siguiente:

Color de fondo del menú principal: #ffffff
Color del enlace del menú principal: rgba (0,0,0,0.61)
Color del enlace del menú principal activo: # ff5473

¡Ahora estamos listos! Asegúrese de publicar sus cambios.

Enmarcando su menú de navegación con un fondo divisor de sección

Ejemplo 1

Vaya a la página de inicio de su farmacia e implemente el constructor visual. Luego agregue una nueva sección regular sin filas, columnas o módulos (no los necesita) y arrastre la sección a la parte superior de su página (me resulta más fácil reorganizar las secciones en el modo de estructura alámbrica porque 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:

Estilo de divisor superior: ver captura de pantalla
Color del divisor: # ff5473
Altura del divisor: 150 px
Repetición horizontal del divisor: 0.8x
Margen personalizado: -80px inferior
Relleno personalizado: 0px superior, 0px inferior

El color del divisor es el mismo color rosa que se usa en el diseño. Configuré la repetición horizontal del divisor en 0.8x para aplanar un poco el divisor. El margen inferior de -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 enmarca la navegación a la derecha. El divisor se extiende hacia la izquierda para agregar un bonito fondo a su logotipo también.

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

Ejemplo # 2

Para el siguiente ejemplo, voy a colocar la sección de modo que el fondo del divisor solo enmarque el menú de navegación en lugar de extenderse también al logotipo. Para hacer esto, necesitamos darle a nuestra sección un ancho personalizado y alinearla a la derecha para que se ajuste al menú de navegación.

Vaya a la configuración de la sección y actualice lo siguiente:

(Nota: es posible que deba abrir la configuración en el modo de estructura alámbrica, ya que el margen personalizado de la sección puede hacer que no se pueda hacer clic en el menú de la sección. Una vez que abra la configuración en el modo de estructura alámbrica, puede volver al modo de vista de escritorio).

Ancho: 75%
Alineación de la sección: derecha
Estilo de divisor: ver captura de pantalla
Repetición horizontal del divisor: 1x

Así es como se ve:

Con la Navegación fija activada, puede ver cómo se activa el encabezado del menú fijo justo cuando el menú comienza a salir del marco.

Si desea deshabilitar la navegación fija, vaya a Divi> Opciones de tema y deshabilite la opción Barra de navegación fija en Configuración general.

Sin la navegación fija activada, su menú permanecerá bloqueado en su lugar dentro del diseño de su marco a medida que se desplaza.

Sensible

El marco también se verá bien en dispositivos móviles.

Pero siempre puede optar por ocultar el marco dándole a su sección una altura de divisor personalizada de cero para computadoras de escritorio y dispositivos móviles. Y luego personaliza tu menú móvil en el personalizador de temas.

Use marcos de diferentes colores en diferentes páginas

Si lo desea, puede agregar diferentes colores y diseños por página. Todo lo que necesita hacer es guardar su sección en su Biblioteca Divi y agregarla a una página diferente de su sitio web. Luego, puede ajustar el color o el diseño como desee. Las posibilidades son infinitas.

Pensamiento final

Agregar un fondo personalizado a su menú de navegación es bastante fácil con Divi Builder. Todo lo que necesita saber es cómo posicionar su sección para que sirva de fondo para su menú. Y con esta configuración en su lugar, puede probar diferentes estilos de divisores para crear todo tipo de marcos únicos para su menú de navegación. Y como está utilizando una sección, tiene todas las opciones de diseño de una sección para diseñar su marco. Incluso puede usar un fondo de sección simple o degradado y ajustar la posición de su sección en cualquier lugar que desee.

Espero tener noticias tuyas en los comentarios.

¡Salud!