El nav menu en Elementor o, como también es llamado, menú de navegación, es un elemento de indispensable importancia en la creación de cualquier página web, ya que permite que la experiencia del usuario sea más fluida al brindarle acceso a diferentes secciones del sitio web de manera más organizada. El día de hoy queremos mostrarte cómo crear un nav menu en Elementor y así optimices tus páginas en WordPress.
¿Qué es un nav menu en Elementor?
Un nav menu, como su nombre lo indica, es un menú de navegación de los sitios web que contiene enlaces que llevan a las secciones más importantes de la página, como pueden ser el Inicio, Blog, Contactos, etc. Es posible crear un nav menu en Elementor de manera personalizada y sin necesidad de tener conocimientos en programación.
Existen dos formas de hacer esto: la primera es usar el widget de menú de WordPress y la segunda es usar el widget de menú de Elementor, este último nos brinda mayor flexibilidad para crear menús con diseños especiales, como menús desplegables o mega menús.
¿Cómo crear un nav menu en Elementor?: paso a paso
Crea el menú desde WordPress
Antes de empezar a diseñar con Elementor, debes crear un menú en tu panel de WordPress. Para hacerlo:
- Ve a Apariencia > Menús en el panel de control de WordPress.
- Asigna un nombre a tu menú y selecciona las páginas, categorías o enlaces personalizados que quieres incluir.
- Guarda los cambios.
Agrega el widget nav menu en Elementor
Una vez que hayas creado tu menú en WordPress, es momento de diseñarlo con Elementor. Veamos cómo:
- Abre la página donde deseas agregar el menú en Elementor.
- En la barra lateral de Elementor, busca el widget “Nav Menu” y arrástralo a la sección donde quieres colocarlo.
- En el menú desplegable de configuración, selecciona el menú que creaste anteriormente en WordPress.
Elige el diseño del nav menu
Ahora que has agregado el widget, es momento de personalizar el diseño de tu nav menu en Elementor:
- Diseño horizontal o vertical: Puedes elegir si quieres que tu menú sea horizontal, típico en la parte superior del sitio web, o vertical, ideal para menús desplegables en barras laterales.
- Alineación: Configura la alineación de los elementos del menú (izquierda, centro o derecha) según el diseño de tu sitio web.
- Puntero: Define si deseas un puntero visual (subrayado, línea doble, fondo) que aparezca al pasar el cursor sobre los ítems del menú.
Personaliza el estilo del menú
El siguiente paso es ajustar la apariencia del nav menu en Elementor utilizando las opciones de personalización de estilo:
- Tipografía y colores: Puedes cambiar la fuente, el tamaño y los colores del texto, así como los estilos de hover y activo para cuando los usuarios interactúan con el menú.
- Espaciado: Ajusta el espaciado entre los elementos del menú, tanto horizontal como verticalmente.
- Bordes y sombra: Si lo deseas, agrega bordes y sombras para dar un toque más personalizado a tu menú.
Configura el menú para dispositivos móviles
No olvides hacer que tu nav menu en Elementor sea totalmente responsive para que funcione correctamente en dispositivos móviles:
- Breakpoint: Define a partir de qué tamaño de pantalla quieres que el menú cambie a un menú móvil (habitualmente con un ícono tipo hamburguesa).
- Alineación del menú móvil: Decide si los ítems del menú en dispositivos móviles aparecerán centrados o alineados a la izquierda.
- Ícono de menú (hamburguesa): Selecciona el ícono que representará el menú en pantallas pequeñas y personaliza su estilo.
Agrega submenús o menús desplegables
Si tu sitio tiene varias secciones o categorías, es posible que necesites un menú con submenús o menús desplegables. Elementor te permite configurar esto de manera sencilla:
- Submenú desplegable: Si tu menú contiene varias categorías, como una tienda online con categorías de productos, puedes organizar estos submenús arrastrando y colocando los ítems debajo del principal en el menú de WordPress.
- Indicador de submenú: Selecciona un ícono (como una flecha o un chevron) que indique visualmente que un ítem tiene un submenú.
Si te ha interesado este pequeño tutorial sobre el nav menu en Elementor y quieres seguir aprendiendo sobre temáticas similares, no dudes en inscribirte en el Bootcamp que Keepcoding tiene para ti. Se trata del curso ux ui que tenemos, en donde te prepararemos para el mundo laboral en donde puedes acceder a excelentes ofertas y salarios competitivos. ¡Apúntate y comienza tu transformación profesional hoy!
