Su menú de navegación es una de las primeras cosas que los visitantes buscan cuando van a su sitio. Debido a esto, los sitios web se aseguran de darle el espacio principal (en la parte superior de la página) que se merece. Pero si está buscando hacer 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 impresionantes con las opciones de fondo de Divider disponibles en cada sección de su página. Y con un poco de creatividad, puede usar un fondo divisor para que sirva como un 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 secciones. Usaré el paquete de diseño de farmacia como un sitio de ejemplo para crear estos diseños.
¡Empecemos!
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 necesitas 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)
Para este tutorial, tengo una instalación nueva 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 sobre 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 que el fondo del encabezado sea transparente para poder agregar mi propio fondo personalizado. Para hacer esto, debemos pasar al personalizador de temas . Desde el panel de control de WordPress, ve 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 hacia abajo o ingrese el código de color rgba (255,255,255,0).
Como puede ver, el fondo blanco del encabezado ha desaparecido y su primera sección saltó 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, actualicemos también las siguientes opciones de texto del menú.
Fuente: Montserrat
Estilo de fuente: Negrita (B)
Color del texto: Blanco
Color del 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 generador 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, voy a 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.
Ejemplo 1
Vaya a la página de inicio de su farmacia e implemente el generador 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 del divisor superior: vea la captura de pantalla
Color del divisor: #ff5473
Altura del divisor: 150 px
Repetición horizontal del divisor: 0,8x
Margen personalizado: -80 px en la parte inferior
Relleno personalizado: 0 px en la parte superior, 0 px en la parte inferior
El color del divisor es el mismo color rosa que se usa en el diseño. Establecí 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 el divisor que enmarca la navegación a la derecha. El divisor se extiende hacia la izquierda para agregar un bonito fondo a su logotipo también.
Esto es lo que parece 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, debemos 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 sección de configuració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 del divisor: ver captura de pantalla
Repetición horizontal del divisor: 1x
Esto es lo que parece:
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 mientras se desplaza.
Sensible
El marco incluso se verá bien en el móvil también.
Pero siempre puede optar por ocultar el marco dándole a su sección una altura divisoria personalizada de cero para escritorio y móvil. Y luego personaliza tu menú móvil en el personalizador de temas.
Use diferentes marcos de color 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 puedes ajustar el color o el diseño como quieras. 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 como 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 dado que 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 o degradado de sección simple y ajustar la posición de su sección en cualquier lugar que desee.
Espero escuchar de usted en los comentarios.
¡Salud!