Menú de navegación de Elementor: cree un menú increíble para su sitio web de WordPress

¿Está buscando una manera de crear un menú increíble para ayudar a mejorar la UI/UX de su sitio web? Si es así, entonces estás en el lugar correcto. Aquí hemos elaborado una guía detallada para ayudarle.

Primero, le mostramos un tutorial paso a paso sobre cómo crear un menú para su sitio web de WordPress. Y una vez que lo domines, te guiaremos sobre cómo usar el widget del menú de navegación de Elementor para personalizar y potenciar tu menú de WordPress.

Tabla de contenido:

• ¿Por qué necesita un menú de navegación personalizado?
• Crea un menú básico de WordPress usando Elementor
• 1. Cree un menú sencillo para su sitio web de WordPress
• 2. Elija y personalice los elementos del menú de navegación.
• 3. Crear submenús: elementos del menú principal e secundario (opcional)
• 4. Administre la ubicación de su menú y publíquelo.
• Cómo crear un menú de navegación usando el widget de navegación Elementor pro
• Funciones clave del widget del menú de navegación de Elementor
• Crear un menú con el widget nav-menu pro
• Menú responsivo móvil
• Terminando

¿Por qué necesita un menú de navegación personalizado?

Es fundamental saber que los menús de navegación son importantes no sólo para atraer tráfico a su sitio sino también para una mejor clasificación SEO.

De hecho, los menús de navegación están diseñados principalmente para la participación del usuario, pero este no es el único propósito.

El segundo factor más importante es tener en cuenta el papel de los "WebCrawler" o Bots que están diseñados para rastrear los sitios web e indexar el contenido al nivel relevante e informar al motor de búsqueda para clasificar el contenido en el lugar correcto.

Por lo tanto, si estás creando menús demasiado complicados, a los bots les resultará difícil clasificar tu contenido, pero también perderás visitantes.

En resumen, la "facilidad de navegación" es un factor fundamental para mejorar la experiencia del usuario y también desempeña un papel imperativo para mejorar la clasificación de nuestro sitio y aumentar el tráfico.

Es una excelente razón para que muchos sitios web comerciales mantengan un único ícono de navegación en lugar de una barra de menú compleja, que se carga en un menú de pantalla completa cuando se hace clic.

Gracias al widget Elementor pro con un menú de navegación 100% responsivo, puedes crear una barra de menú increíblemente flexible y con píxeles perfectos sin usar ningún código.

En este tutorial, le demostraremos cómo utilizar el widget del menú de navegación de Elementor para obtener el menú avanzado y personalizado de WordPress.

Antes de comenzar con el widget de navegación de Elementor, exploremos cómo podemos crear un menú de WordPress simple usando la versión gratuita de Elementor.

Crea un menú básico de WordPress usando Elementor

Ahora, para crear un menú de WordPress, no es necesario instalar ningún plugin especial. De forma predeterminada, WordPress viene con un creador de menús fácil de usar, que le ayudará a crear menús de navegación sencillos para su sitio web.

Dicho esto, no tendrás acceso a ninguna opción de personalización del menú. Asumirá el diseño del tema de WordPress actualmente activo. Pero si eso es todo lo que desea, esta es una excelente manera de configurar un menú de navegación para su sitio web de WordPress.

1. Cree un menú sencillo para su sitio web de WordPress

Lo primero es lo primero, deberá iniciar sesión en su panel de control de WordPress.

Ahora, desde la barra lateral izquierda, ve a Apariencia > Menús . Aquí encontrará un diseño de dos columnas con "Agregar elementos de menú" a la izquierda y "Estructura del menú" a la derecha.

En Estructura del menú, encontrará un campo para el "Nombre del menú". Este será el nombre del menú que crearemos ahora mismo. Llamémoslo Menú 1.

Nota : No te preocupes. Tus lectores no podrán ver los nombres de los menús. Es una función que le ayudará a mantener organizados todos sus diferentes menús.

Después de darle un nombre a su menú, haga clic en el botón "Crear menú" para que esté disponible. Ahora, necesitas agregar los diferentes elementos del menú.

2. Elija y personalice los elementos del menú de navegación.

Ahora viene la parte en la que completa su nuevo menú con elementos de menú. En la sección "Agregar elementos de menú" en el lado izquierdo, encontrará una lista organizada de cosas que puede agregar a su menú.

De forma predeterminada, contiene cualquiera de sus páginas, publicaciones, páginas de destino, enlaces personalizados y categorías.

simplemente seleccione los elementos del menú que desea agregar usando la casilla de verificación y luego haga clic en el botón "Agregar al menú". Esto llenará su menú con todos los elementos de menú seleccionados.

Nota : Observe que cada sección bajo “Agregar elementos de menú” tiene la opción de alternar entre Más reciente , Ver todo y Buscar . Recuerde utilizar estas opciones si hay muchos artículos.

Una vez que haya terminado de agregar todos los elementos del menú, presione el botón "Guardar menú" y continúe con el siguiente paso.

3. Crear submenús: elementos del menú principal e secundario (opcional)

¿Sabías que por defecto WordPress también te permite crear submenús? Al crear la estructura del submenú, tiene un elemento de menú principal y un elemento de menú secundario.

Cuando un usuario pasa el cursor sobre el elemento del menú principal, revelará todos los elementos del menú secundario ocultos debajo de él.

¿Guay, verdad?

Ahora, para crear una estructura de submenú, todo lo que tiene que hacer es elegir un elemento de menú que desee que esté en el menú principal. A continuación, arrastre y suelte todos los elementos del menú que desee como elementos del menú secundario debajo. ¡Ahora simplemente arrástralo hacia la derecha y listo!

4. Administre la ubicación de su menú y publíquelo.

Ahora que ha creado su nuevo menú y ha agregado submenús, es hora de administrar su ubicación.

En la parte superior del editor de menú, deberías ver una opción llamada "Administrar ubicaciones". Haga clic en él y debería aparecer algo similar a la siguiente pantalla:

Ahora, las ubicaciones del menú disponibles dependerán del tema que haya instalado. En este amp , tenemos un tema que admite 3 menús.

Después de asignar un menú a cada una de las ubicaciones de menú disponibles, haga clic en "Guardar cambios" y listo.

Ahora conoce todas las funciones básicas del menú que WordPress ofrece de forma predeterminada. Sin embargo, si desea más personalización y funcionalidad, siga leyendo para conocer el widget del menú de navegación de Elementor Pro.

Cómo crear un menú de navegación usando el widget de navegación Elementor pro

Si desea agregar un menú de navegación personalizado a su sitio de WordPress, necesitará la versión Elementor Pro. La versión Elementor Pro viene con el widget de navegación Elementor junto con muchas otras características especiales, como más de 300 plantillas, un creador de temas, un widget emergente, widgets de WooCommerce y muchas otras características interesantes.

¿Cuáles son las características clave específicas del widget del menú de navegación? Aquí hay una breve introducción.

Funciones clave del widget del menú de navegación de Elementor

• El widget del menú de navegación le brinda la libertad de colocar su menú en cualquier lugar que desee. En su encabezado o en la parte superior o en cualquier lugar de su página.
• Puede agregar varios menús en su sitio y también en sus páginas por separado o globalmente.
• Dale un aspecto deslumbrante a tu menú usando animación, efectos de desplazamiento o estado activo
• Cree un menú adaptable para dispositivos móviles de su sitio y controle cómo se verá su sitio en las pantallas móviles
• Personalice el color, la tipografía y el relleno u otros ajustes de su barra de menú
• Cree un menú de píxeles perfectos con la precisión adecuada de alineación, espaciado y relleno.

Crear un menú con el widget nav-menu pro

Necesitará crear un menú básico de WordPress como mencionamos anteriormente y luego personalizará el menú predeterminado de WordPress usando el widget de menú pro-nav. Una vez que haya creado la lista principal, el siguiente paso es agregarla a la ubicación deseada, es decir, a la sección de encabezado.

Ahora, cuando haya terminado con la configuración básica, personalicemos el menú usando el widget del menú de navegación.

En la esquina superior de la sección de configuración, hay tres opciones disponibles; Contenido, Estilo y Avanzado.

La sección Diseño : tienes tres opciones: Horizontal, vertical o un acordeón desplegable oculto.

• Horizontal: el diseño horizontal es el diseño más común utilizado por los sitios. Se propaga por la pantalla de izquierda a derecha.
• Vertical: también encontrará un diseño vertical en muchos sitios, específicamente en sitios que ofrecen servicios creativos. En el caso de un diseño vertical, la extensión de la barra de navegación será de arriba a abajo.
• Desplegable: los menús desplegables también son bastante comunes. Los menús desplegables tienen un diseño vertical y requieren interacción con el usuario para revelarse. Se utilizan principalmente para crear un diseño limpio.

Sección de alineación : esta sección le ayuda a alinear los elementos de texto del menú; centro, derecha o izquierda.

Sección de animación : esta sección le permitirá agregar efectos de animación debajo, sobre o efectos de animación de doble línea. También puedes optar por las animaciones de marco, fondo y texto sutil.

Las animaciones subrayadas son las siguientes:

• Desvanecimiento: la animación de desvanecimiento ofrece animación de desvanecimiento debajo de los elementos del menú.
• Diapositiva: la animación de diapositiva desliza la barra debajo de los elementos del menú.
• Crecer : La animación de crecimiento crece desde el centro hacia afuera y da una sensación de crecimiento.
• Caída : la animación de caída fluye de abajo hacia arriba.
• Abandonar: la animación de abandono fluye de arriba a abajo.

Del mismo modo, existen animaciones enmarcadas, superpuestas, de doble línea, de fondo y de texto. Cada uno de ellos ofrece su propio conjunto de animaciones y puedes comprobarlas tú mismo para saber qué obtienes con ellas.

Sección Puntero : selecciona el tipo de puntero en el menú desplegable.

Sección de indicador de submenú : el widget Elementor incluye muchas opciones de estilo de submenú. Donde no sólo podrás controlar el color, el estilo y también el fondo del menú.

Relleno y espaciado del menú: el relleno se puede ajustar rápidamente. Puede cambiar el relleno horizontal para el menú y el submenú, el relleno vertical, el espacio intermedio y la alineación derecha, izquierda y centrada.

Elementor aborda extremadamente bien el espaciado y el relleno del menú. Trabajaron duro detrás de las puertas para asegurarse de poder llevar las herramientas al desarrollador para que pueda crear fácilmente el diseño en el que están pensando.

El espaciado del menú ofrece muchas opciones que incluyen:

• Espacio entre elementos del menú
• Relleno horizontal y vertical para elementos de menú y submenú
• Alineación central, izquierda, derecha y justificada.

Color de fondo y tipografía : puede obtener una apariencia de marca personalizada con la ayuda de la combinación de colores y el color de fondo deseados. Además, también puede elegir las opciones de menú transparentes o semitransparentes.

Como diseñador, puedes jugar con estas opciones tanto como puedas y asegurarte de diseñar los fondos según tus gustos.

Menú responsivo móvil

Los dispositivos móviles son una parte importante de la web y es por eso que los desarrolladores de Elementor también brindan herramientas para que puedas crear la barra de navegación para dispositivos móviles.

El widget Elementor le permite un control total de las opciones del menú móvil en WordPress. Puede controlar la vista de la pantalla móvil con un conjunto separado de configuraciones para pantallas solo móviles. Hay una opción para la configuración de la pantalla del móvil en la parte inferior de la sección de configuración de Elementor donde puede ver las opciones de la pantalla del móvil.

En resumen, las características del menú móvil de Elementor son las siguientes:

• Ancho completo en dispositivos móviles: tienes la opción de establecer el ancho completo o el ancho limitado también.
• Puntos de interrupción de tableta o dispositivo móvil: puede utilizar la configuración de punto de interrupción para configurar el menú móvil para dispositivo móvil o tableta.
• Menús verticales y de acordeón: Elementor también ofrece la opción de mostrar un ícono de hamburguesa plegable.
• Alternar alineación: el icono de hamburguesa se puede alinear al centro, a la izquierda o a la derecha.
• Alineación lateral/central: elige la alineación del menú móvil.

Navegación responsiva: Ofrece un posicionamiento responsivo del menú.

Terminando

El menú es una de las características más importantes de cualquier sitio web. Porque ayuda a los visitantes a recorrer su sitio web y, si crea una lista de manera inteligente, ayudará a mantener a los visitantes en su sitio durante mucho tiempo. El menú es tan importante como el diseño completo de cualquier sitio web, el encabezado y el pie de página.

Por lo tanto, el widget de menú debe ser capaz de ofrecer la apariencia única de su marca con todas las características esenciales. El widget de navegación de Elementor viene con capacidades ricas en funciones que permiten a los clientes personalizar la sección del menú para que se ajuste a la voz de su marca. Ahora, puede utilizar un menú elegante hecho a medida en su sitio web, en su página de destino, encabezado o cualquier otra sección donde desee mostrarlo.