Cómo editar el menú móvil en Webflow

Un menú de navegación simple e intuitivo es uno de los elementos de diseño más importantes de su sitio. Actúa como un mapa, alejando a los visitantes de la página principal. Con el creciente número de personas que utilizan Internet en sus dispositivos móviles, su sitio web también debe tener un menú de navegación compatible con dispositivos móviles.

Afortunadamente, Webflow ha facilitado la adición de una barra de menú de hamburguesa plegable que simplificará su sitio móvil. Sigue leyendo para aprender a editar este menú móvil en Webflow.

Cómo agregar una barra de navegación

El menú de hamburguesas es un elemento de diseño vital cuando se trata de un espacio horizontal limitado. Esto elimina la necesidad de una barra de navegación fija voluminosa que ocupa un espacio valioso.

En Webflow, este menú y sus funciones están integrados en el elemento NavBar. Para agregar este elemento a su diseño, debe seguir cuatro simples pasos:

• Toque el ícono «+» en la parte superior del panel izquierdo para abrir el panel «Agregar».

• Desplácese hacia abajo hasta la sección «Componentes».

• Mantenga presionado el elemento NavBar.

• Arrastra el elemento al encabezado de la página.

Cómo editar menú móvil

Una vez que haya agregado una barra de navegación a su sitio web, puede diseñar y personalizar este menú de varias maneras diferentes.

Cómo añadir más enlaces al menú

El elemento de la barra de navegación contiene un botón de menú y un menú de navegación, este último contiene enlaces de navegación. Cuando lo agregue a su diseño, habrá algunos marcadores de posición de enlace que puede eliminar o editar con enlaces a su sitio web.

Siga estos pasos para agregar más enlaces de navegación:

• Haga clic en cualquier elemento dentro de la barra de navegación.

• Vaya al panel Configuración de elementos a la derecha.

• Haga clic en el ícono de ajustes para abrir «Configuración».

• Desplácese hasta la sección Configuración de la barra de navegación.

• Haga clic en el botón «Agregar enlace».

Ahora que tiene suficientes enlaces para todas las páginas relevantes del sitio web, es el momento de hacer el enlace real.

• Seleccione un enlace de navegación.
• Vaya al panel Configuración de elementos.

• Busque la sección Configuración de enlaces.

• Introduzca la URL de la página web especificada en el campo «URL».

Cómo cambiar la animación del menú

En Webflow, también puede cambiar la forma en que se muestra el menú móvil cuando los visitantes hacen clic en el botón de menú. Puede elegir entre tres tipos de animaciones de revelación:

• Menú desplegable: de forma predeterminada, el menú móvil desaparece de la barra de navegación cuando el visitante hace clic en el botón de menú. Ocupará todo el ancho de la ventana del navegador.
• Derecha: si selecciona esta animación expandida, su menú móvil aparecerá en el lado derecho de la pantalla. Este menú ocupará toda la altura de la ventana del navegador.
• Arriba a la izquierda: este tipo de menú es idéntico al menú Arriba a la derecha, excepto que el menú de navegación se mueve desde el lado izquierdo de la pantalla.

Para configurar la animación de expansión deseada, haga lo siguiente:

• Seleccione cualquier elemento dentro de la barra de navegación.

• Vaya al panel Configuración de elementos en el lado derecho de la pantalla.

• Toque el ícono de ajustes para iniciar Configuración.

• Vaya a la sección «Configuración de la barra de navegación».

• Haga clic en la opción «Tipo».

• Seleccione su estilo preferido en el menú desplegable.

En la sección Configuración de la barra de navegación, también puede administrar lo siguiente:

• Apertura suave: el tipo de curva utilizada para animar la transición abierta.
• Facilidad de cierre: el tipo de curva utilizada para animar la transición de cierre.
• Duración: El tiempo que tarda en aparecer el menú.

Tenga en cuenta que la duración de la transición se mide en milisegundos.

Cómo cambiar el estilo del menú

Webflow ha facilitado el estilo de cualquier parte de la barra de navegación, lo que facilita la incorporación de un menú móvil en el diseño de su sitio web.

Para aplicar estilo al botón de menú, haga lo siguiente:

• Seleccione el botón de menú.

• Vaya al panel Estilo a la derecha (icono de pincel).

El panel Estilo le permite cambiar todos los aspectos del botón de menú. Muy a menudo, los diseñadores cambian el color y el tamaño del fondo del botón.

Para cambiar el color de fondo, haga lo siguiente:

• Ve a la sección «Fondos».

• Toque el icono de gota de color para abrir el Selector de color.

• Elige el color que quieras.

Si quieres cambiar el tamaño del icono de la hamburguesa, sigue estos pasos:

• Ve a la sección Tipografía.

• Aumente o disminuya el tamaño del icono en el campo Aa.

También puede cambiar el color del icono en el cuadro de arriba, marcado con una A y una mancha de color.

Si bien hay muchas formas de personalizar el botón de menú, no puede reemplazarlo con un elemento de texto o una imagen personalizada.

Navegación móvil simplificada

Al diseñar un menú móvil, desea aprovechar al máximo un espacio bastante limitado. Por lo tanto, trate de no sobrecargar el menú con opciones para no confundir a los visitantes. Además, asegúrese de que los elementos del menú sean breves, nítidos y fáciles de leer.

Después de eso, puedes jugar con el estilo y la animación del menú para mantener a tus visitantes interesados ​​en cada paso del camino.

¿Ha intentado agregar un menú móvil a su sitio? ¿Cuántas opciones incluiste? Háganos saber en los comentarios a continuación.