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

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

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 domine, lo guiaremos sobre cómo usar el widget del menú de navegación de Elementor para personalizar y potenciar su menú de WordPress.

Tabla de contenidos:

• ¿Por qué necesita un menú de navegación personalizado?
• Crear un menú básico de WordPress usando Elementor
• 1. Cree un menú simple 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 y secundario (opcional)
• 4. Administra la ubicación de tu menú y publica
• Cómo crear un menú de navegación usando el widget Elementor pro nav '
• Características clave del widget Elementor Nav-Menu
• Crea un menú con el widget pro de nav-menu
• Menú móvil receptivo
• Terminando

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

Es fundamental saber que los menús de navegación son importantes no solo para atraer tráfico a su sitio, sino también para una mejor clasificación de 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 "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á creando menús demasiado complicados, sería difícil para los bots clasificar su contenido, pero también perderá a sus visitantes.

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

Es una excelente razón para que muchos sitios web de negocios mantengan un solo icono 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% sensible, puede crear una barra de menú increíblemente flexible y perfecta en píxeles sin usar ningún código.

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

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

Crear un menú básico de WordPress usando Elementor

Ahora, para crear un menú de WordPress, no necesita instalar ningún plugin especial. De forma predeterminada, WordPress viene con un generador 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á acceso a ninguna opción de personalización para el menú. Asumirá el diseño del tema de WordPress actualmente activo. Pero si eso es todo lo que desea, entonces esta es una excelente manera de configurar un menú de navegación para su sitio web de WordPress.

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

Lo primero es lo primero, deberá iniciar sesión en su panel de backend 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 ayuda a mantener todos sus diferentes menús organizados.

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

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

Ahora viene la parte en la que llena su nuevo menú con elementos de menú. En la sección "Agregar elementos de menú" a su 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 debajo de "Agregar elementos de menú" tiene la opción de cambiar entre: Más reciente , Ver todo y Buscar . Recuerde usar 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 y secundario (opcional)

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

Cuando un usuario se desplaza 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 de él. ¡Ahora simplemente arrástralo hacia la derecha y listo!

4. Administra la ubicación de tu menú y publica

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

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

Ahora, las ubicaciones de menú disponibles dependerán del tema que haya instalado. En este ex amp le, tenemos un tema que es compatible con 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 ofrece WordPress de forma predeterminada. Sin embargo, si desea más personalización y funcionalidad, siga leyendo para obtener más información sobre el widget de menú de navegación de Elementor Pro.

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

Si desea agregar un menú de navegación personalizado a su sitio de WordPress, necesitará la versión Elementor Pro. La versión de Elementor Pro viene con el widget de navegación de Elementor junto con muchas otras características especiales, como más de 300 plantillas, un generador 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 Nav Menu en sí? Aquí hay una breve introducción.

Características clave del widget Elementor Nav-Menu

• El widget de menú de navegación le da 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 flotantes 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 correcta de alineación, espaciado y relleno.

Crea un menú con el widget pro de nav-menu

Tendrá que crear un menú básico de WordPress como hemos mencionado anteriormente y luego personalizará el menú predeterminado de WordPress utilizando el widget pro-nav-menu. Una vez que haya creado la lista principal, el siguiente paso es agregarla a la ubicación deseada, es decir, la sección 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 : tiene 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 extiende 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 son de diseño vertical y requieren interacción con el usuario para revelarlos. Se utilizan principalmente para crear un diseño limpio.

Alinear secció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 puede optar por el marco, el fondo y las animaciones de texto sutiles.

Las animaciones de subrayado son las siguientes:

• Fundido: la animación de fundido ofrece una animación de fundido debajo de los elementos del menú.
• Diapositiva: la animación de la diapositiva desliza la barra debajo de los elementos del menú.
• Grow : La animación de crecimiento crece desde el medio hacia afuera y da una sensación de crecimiento.
• Drop in : la animación fluye de abajo hacia arriba.
• Abandonar: la animación de abandono fluye de arriba hacia abajo.

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

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

Sección de indicador de submenú : el widget Elementor está repleto de muchas opciones de estilo de submenú. Donde no solo puede 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 se acerca al espaciado y al relleno del menú extremadamente bien. Trabajaron duro detrás de las puertas para asegurarse de poder llevar las herramientas al desarrollador para que puedan 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 el aspecto de su marca a medida 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ú transparente o semitransparente.

Como diseñador, puede jugar con estas opciones tanto como pueda y asegurarse de diseñar los fondos según sus gustos.

Menú móvil receptivo

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 usted pueda crear la barra de navegación para dispositivos móviles.

El widget Elementor le permite un control completo de las opciones del menú móvil en WordPress. Puede controlar la vista de la pantalla móvil con un conjunto de configuraciones separado para pantallas solo para 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 funciones del menú móvil de Elementor son las siguientes:

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

Navegación receptiva : ofrece un posicionamiento receptivo 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 a mantener a sus visitantes en su sitio durante mucho tiempo. El menú es tan importante como el diseño completo de cualquier sitio web, el encabezado y la sección de 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 usar un menú elegante hecho a medida en su sitio web, en su página de destino, en el encabezado o en cualquier otra sección donde desee mostrarlo.