Cómo diseñar un menú web
Opciones de diseño de menú, personalización, consejos y ejemplos
Explore 7 diseños de menús de sitios web, aprenda a personalizarlos y descubra cómo puede usarlos.
Esta guía se centra en el diseño del menú: cómo se ve el menú y cómo funciona. Si desea aprender a diseñar un menú de sitio web, mostrarlo en cada página de su sitio web o crear un menú de navegación para una página web en particular, le recomendamos que lea otra guía:
El menú de navegación es una lista de enlaces que conducen a varias páginas de su sitio web o secciones específicas dentro de una página web en particular. Ayuda a los visitantes del sitio web a navegar entre las páginas del sitio web o entre las diferentes secciones de una página específica.
Consejos generales
>
El menú debe ayudar a los visitantes del sitio web a encontrar información rápida y fácilmente.
>
El menú debe ser conciso.
>
Mantenga la cantidad de elementos del menú al mínimo
>
Agregue no más de cinco elementos de menú a una barra de navegación
>
Haga que los elementos del menú no tengan más de una palabra
>
Es mejor si esa palabra es corta.
>
No diseñe en exceso la barra de navegación del menú, ya que no debe distraer al usuario del contenido de su sitio web.
Ejemplos de buenos diseños de menú
Opciones de diseño de menú
Menú estático transparente sobre la portada
Qué aspecto tiene:
Dicho menú se fija en la parte superior de la página para no distraer a los visitantes del sitio web del contenido, y pueden encontrarlo fácilmente cuando sea necesario, ya que se fija en un lugar específico de la página.
Dicho menú se fija en la parte superior de la página para no distraer a los visitantes del sitio web del contenido, y pueden encontrarlo fácilmente cuando sea necesario, ya que se fija en un lugar específico de la página.
Cómo configurarlo:
Agregue un bloque ME301 a la página y aplique la siguiente configuración:
Configuración principal → Comportamiento de posición del menú: Absoluto.
Fondo del menú → Opacidad del fondo del menú: 0%.
Agregue un bloque ME301 a la página y aplique la siguiente configuración:
Configuración principal → Comportamiento de posición del menú: Absoluto.
Fondo del menú → Opacidad del fondo del menú: 0%.
Haga clic aquí para ver un ejemplo de un menú estático transparente en el sitio web
Opciones de diseño de menú
Menú fijo
Qué aspecto tiene:
Dicho menú siempre está visible en la página y se puede acceder fácilmente desde cualquier lugar de la página. Por lo general, tiene un fondo transparente en la parte superior de la página (en la portada) que se vuelve opaco en el desplazamiento.
Dicho menú siempre está visible en la página y se puede acceder fácilmente desde cualquier lugar de la página. Por lo general, tiene un fondo transparente en la parte superior de la página (en la portada) que se vuelve opaco en el desplazamiento.
Cómo configurarlo:
Agregue un bloque ME301 a la página y aplique la siguiente configuración:
Configuración principal → Comportamiento de posición del menú: Corregido en el desplazamiento.
Fondo del menú → Color de fondo del menú. Pick un color.
Fondo del menú → Opacidad del fondo del menú: 0%.
Fondo del menú → Opacidad del fondo del menú al desplazarse: 80%.
Agregue un bloque ME301 a la página y aplique la siguiente configuración:
Configuración principal → Comportamiento de posición del menú: Corregido en el desplazamiento.
Fondo del menú → Color de fondo del menú. Pick un color.
Fondo del menú → Opacidad del fondo del menú: 0%.
Fondo del menú → Opacidad del fondo del menú al desplazarse: 80%.
Haga clic aquí para ver un ejemplo de un menú fijo en el sitio web
Opciones de diseño de menú
Menú fijo en la parte superior de la página,
Menú que aparece en el desplazamiento
Menú que aparece en el desplazamiento
Qué aspecto tiene:
Este menú es similar al descrito anteriormente. Lo que lo hace diferente es otro menú que aparece en el desplazamiento y presenta aún más elementos. Por ejemplo, el menú de navegación superior contiene un logotipo, algunos elementos de menú que conducen a diferentes páginas del sitio web y algunos enlaces de redes sociales. Cuando el usuario se desplaza por la página, aparece otra barra de menús, con un logotipo, una llamada a la acción y un botón de devolución de llamada.
Este menú es similar al descrito anteriormente. Lo que lo hace diferente es otro menú que aparece en el desplazamiento y presenta aún más elementos. Por ejemplo, el menú de navegación superior contiene un logotipo, algunos elementos de menú que conducen a diferentes páginas del sitio web y algunos enlaces de redes sociales. Cuando el usuario se desplaza por la página, aparece otra barra de menús, con un logotipo, una llamada a la acción y un botón de devolución de llamada.
Cómo configurarlo:
Agregue un bloque ME301 a la página y aplique la siguiente configuración:
Menú Uno (ubicado en la parte superior de la página)
Configuración principal → Comportamiento de la posición del menú: Absoluta.
Fondo del menú → Opacidad del fondo del menú: 0%.
Menú Dos (aparece en el desplazamiento)
Configuración principal → Comportamiento de la posición del menú: Corregido en el desplazamiento.
Configuración principal → menú Revelar cuando la página se desplaza hacia abajo en píxeles: 600px.
Fondo del menú → Color de fondo del menú. Elige un color.
Fondo del menú → Opacidad del fondo del menú: 70%.
Agregue un bloque ME301 a la página y aplique la siguiente configuración:
Menú Uno (ubicado en la parte superior de la página)
Configuración principal → Comportamiento de la posición del menú: Absoluta.
Fondo del menú → Opacidad del fondo del menú: 0%.
Menú Dos (aparece en el desplazamiento)
Configuración principal → Comportamiento de la posición del menú: Corregido en el desplazamiento.
Configuración principal → menú Revelar cuando la página se desplaza hacia abajo en píxeles: 600px.
Fondo del menú → Color de fondo del menú. Elige un color.
Fondo del menú → Opacidad del fondo del menú: 70%.
Haga clic aquí para ver los ejemplos de estos menús en un sitio web
Opciones de diseño de menú
Menú Hamburguesa
Qué aspecto tiene:
El menú de hamburguesas son las tres líneas horizontales en la parte superior de la pantalla. Cuando el usuario hace clic en él, se abre para revelar un menú de navegación.
Para qué puedes usarlo:
Tal menú es perfecto para su sitio web si desea que los visitantes se centren en el contenido sin distraerse con otros elementos de diseño. El menú de hamburguesas se utiliza generalmente en una versión móvil del sitio web. Puede configurar cómo aparece el menú en diferentes dispositivos.
Por ejemplo, puede optar por un menú normal para que aparezca solo en la versión de escritorio de su sitio web y hacer que el menú hamburguesa sea visible únicamente en dispositivos móviles.
El menú de hamburguesas son las tres líneas horizontales en la parte superior de la pantalla. Cuando el usuario hace clic en él, se abre para revelar un menú de navegación.
Para qué puedes usarlo:
Tal menú es perfecto para su sitio web si desea que los visitantes se centren en el contenido sin distraerse con otros elementos de diseño. El menú de hamburguesas se utiliza generalmente en una versión móvil del sitio web. Puede configurar cómo aparece el menú en diferentes dispositivos.
Por ejemplo, puede optar por un menú normal para que aparezca solo en la versión de escritorio de su sitio web y hacer que el menú hamburguesa sea visible únicamente en dispositivos móviles.
Cómo configurarlo:
Agregue un bloque ME401/402/403/404/405 a la página, configure el comportamiento de la posición del menú, el color del icono de menú y el color del texto del elemento de menú.
Por ejemplo, puede aplicar la siguiente configuración:
Configuración principal → Comportamiento de posición del menú: Corregido en el desplazamiento.
Elemento de menú → Color. Elige negro.
Fondo del menú → Color de fondo del menú contraído. Hazlo transparente.
Fondo del menú → Color de fondo del menú expandido. Elige blanco.
Agregue un bloque ME401/402/403/404/405 a la página, configure el comportamiento de la posición del menú, el color del icono de menú y el color del texto del elemento de menú.
Por ejemplo, puede aplicar la siguiente configuración:
Configuración principal → Comportamiento de posición del menú: Corregido en el desplazamiento.
Elemento de menú → Color. Elige negro.
Fondo del menú → Color de fondo del menú contraído. Hazlo transparente.
Fondo del menú → Color de fondo del menú expandido. Elige blanco.
Haga clic aquí para ver un ejemplo de un menú de hamburguesas en el sitio web
Opciones de diseño de menú
Menú multinivel
Qué aspecto tiene:
Aparece un menú desplegable cuando hace clic en un elemento del menú.
Para qué puedes usarlo:
Grandes sitios web con una estructura avanzada.
Aparece un menú desplegable cuando hace clic en un elemento del menú.
Para qué puedes usarlo:
Grandes sitios web con una estructura avanzada.
Cómo configurarlo:
Agregue el bloque ME301 a la página, configure un menú similar al descrito anteriormente y, a continuación, agregue Subelementos en el panel Contenido del bloque.
1. Abra el panel Contenido del bloque → Elementos del menú → Agregar subelementos.
2. Haga clic en el icono más junto a un elemento, ingrese un título de subelemento y asigne un enlace. Repita hasta que se agreguen todos los subelementos necesarios.
3. Abra el panel Configuración del bloque → Configuración del submenú. Seleccione la casilla de verificación "Mostrar icono de menú de segundo nivel".
Tenga en cuenta que no se podrá hacer clic en el elemento del menú principal. Si desea que se pueda hacer clic en él, cree un subelemento duplicado en el menú desplegable.
Agregue el bloque ME301 a la página, configure un menú similar al descrito anteriormente y, a continuación, agregue Subelementos en el panel Contenido del bloque.
1. Abra el panel Contenido del bloque → Elementos del menú → Agregar subelementos.
2. Haga clic en el icono más junto a un elemento, ingrese un título de subelemento y asigne un enlace. Repita hasta que se agreguen todos los subelementos necesarios.
3. Abra el panel Configuración del bloque → Configuración del submenú. Seleccione la casilla de verificación "Mostrar icono de menú de segundo nivel".
Tenga en cuenta que no se podrá hacer clic en el elemento del menú principal. Si desea que se pueda hacer clic en él, cree un subelemento duplicado en el menú desplegable.
Haga clic aquí para ver un ejemplo de un menú multinivel en el sitio web
Opciones de diseño de menú
Pestañas
Cómo se ve:
Una pestaña activa permite a los usuarios explorar el contenido vinculado a ella sin salir de la página web.
Para qué puedes usarlo:
Las pestañas le permiten mostrar varias categorías del mismo tipo de contenido, como diferentes categorías de trabajos dentro de un portafolio.
Una pestaña activa permite a los usuarios explorar el contenido vinculado a ella sin salir de la página web.
Para qué puedes usarlo:
Las pestañas le permiten mostrar varias categorías del mismo tipo de contenido, como diferentes categorías de trabajos dentro de un portafolio.
Cómo configurarlo:
Agregue un bloque ME602 o ME603 a la página. Puede usar estos bloques para crear pestañas y mostrar contenido cuando el usuario hace clic en una pestaña dentro de la misma página. A continuación, debe agregar bloques en una secuencia que cambiará cuando el usuario haga clic en una pestaña en particular.
Cómo funciona:
1. Agregue títulos de pestaña en el panel Contenido del bloque ME602 o ME603.
2. Agregue los ID de los bloques que deberían estar visibles cuando haga clic en la pestaña (sepárelos con una coma, sin espacio).
Nota: Puede copiar el ID del bloque en el panel Configuración del bloque: desplácese hacia abajo hasta la parte inferior del panel para encontrarlo.
Agregue un bloque ME602 o ME603 a la página. Puede usar estos bloques para crear pestañas y mostrar contenido cuando el usuario hace clic en una pestaña dentro de la misma página. A continuación, debe agregar bloques en una secuencia que cambiará cuando el usuario haga clic en una pestaña en particular.
Cómo funciona:
1. Agregue títulos de pestaña en el panel Contenido del bloque ME602 o ME603.
2. Agregue los ID de los bloques que deberían estar visibles cuando haga clic en la pestaña (sepárelos con una coma, sin espacio).
Nota: Puede copiar el ID del bloque en el panel Configuración del bloque: desplácese hacia abajo hasta la parte inferior del panel para encontrarlo.
Haga clic aquí para ver un ejemplo de este menú en el sitio web
Opciones de diseño de menú
Menú con carrito, búsqueda y favoritos
Qué aspecto tiene:
Muestra artículos en el carrito de compras, artículos agregados a favoritos y un widget de búsqueda en el menú cerca de la sección de navegación.
Para qué puedes usarlo:
El menú es útil para elCatalogo de productousuarios para mostrar el carrito de compras, el widget de búsqueda del sitio web y Favoritos de forma concisa.
Muestra artículos en el carrito de compras, artículos agregados a favoritos y un widget de búsqueda en el menú cerca de la sección de navegación.
Para qué puedes usarlo:
El menú es útil para elCatalogo de productousuarios para mostrar el carrito de compras, el widget de búsqueda del sitio web y Favoritos de forma concisa.
Cómo configurarlo:
Agregue el bloque ME401 a la página → pestaña Contenido → Carrito, Búsqueda y Favoritos → seleccione las casillas de verificación para mostrar los iconos que necesita en el menú.
Seleccione la casilla de verificación "No mostrar botones de widgets nativos" para mostrar los iconos solo en el menú.
Agregue el bloque ME401 a la página → pestaña Contenido → Carrito, Búsqueda y Favoritos → seleccione las casillas de verificación para mostrar los iconos que necesita en el menú.
Seleccione la casilla de verificación "No mostrar botones de widgets nativos" para mostrar los iconos solo en el menú.
Luego agregue el bloque de carrito de compras ST100, el bloque de widget de búsqueda T985 y el bloque de Favoritos ST110 y publique la página.
Hecho.
Esta característica funciona para todos los bloques de menú numerados ME4XX.
Esta característica funciona para todos los bloques de menú numerados ME4XX.
Haga clic aquí para ver un ejemplo de este menú en el sitio web.
Opciones de visualización:
Si desea mostrar ambos iconos y el botón del widget Favoritos en el menú, desmarque "No mostrar botones de widget nativos" en la pestaña Contenido del bloque ME401.
Si desea mostrar ambos iconos y el botón del widget Favoritos en el menú, desmarque "No mostrar botones de widget nativos" en la pestaña Contenido del bloque ME401.
Puede ocultar el icono del widget para los bloques ST100 Shopping cart y T985 Search: en la pestaña "Más configuraciones" en la configuración del bloque, seleccione la casilla de verificación "No mostrar el botón del widget". Publique la página.
¡Hecho! Se muestran tres iconos en el menú y hay un widget separado para Favoritos. Puede configurar la visibilidad para el carrito de compras o el widget de búsqueda de manera similar.
Haga clic aquí para ver un ejemplo de este menú en el sitio web.
A continuación se muestran algunas opciones clave de diseño de menú. Si tiene nuevas ideas y desea compartirlas, envíe el enlace a su sitio web por correo electrónico a team@tilda.cc con el "Diseño de menú" en la línea de asunto. ¡Gracias!
¡Mucha suerte con tus experimentos de diseño!
¡Mucha suerte con tus experimentos de diseño!
El sitio web con el que ha estado soñando comienza aquí
