Cómo crear un menú de navegación de WordPress con 2 métodos diferentes

Los menús de navegación son como las estrellas guía de un sitio web. Imagine su sitio web como un mar lleno de cosas por las que pueden navegar los marineros. Por eso necesitan un navegador para llegar fácilmente al destino deseado.

Ahí es donde entran los menús de navegación. Desempeñan un papel clave a la hora de guiar a los visitantes y brindarles una experiencia de navegación perfecta a través de su sitio web.

Entonces, si es propietario o desarrollador de un sitio web, debe esforzarse y concentrarse más en diseñar un menú de navegación fácil de usar para su sitio web.

Los usuarios de WordPress tienen la flexibilidad de diseñar el menú de navegación de WordPress de varias maneras. 

En esta guía, lo guiaremos a través de las profundidades de Gutenberg y Elementor para crear un menú de navegación. Al final de este blog, podrá crear y personalizar el menú de navegación de WordPress y mejorar la experiencia del usuario de su sitio web.

¿Qué es el menú de navegación de WordPress?

El menú de navegación del sitio web es como el mapa de su sitio web y guía a los visitantes a través de sus páginas. Estos menús aparecen como un conjunto de enlaces o botones que normalmente se muestran en una página web, generalmente en la parte superior o lateral. 

Ayuda a mejorar la accesibilidad y la experiencia del usuario de su sitio web al proporcionar una forma estructurada de explorar las páginas del sitio web y su contenido.

Con WordPress, crear y personalizar menús para su sitio web es bastante fácil. Puede agregar páginas, publicaciones, enlaces personalizados o incluso categorías a su menú de navegación de WordPress.

El método predeterminado para crear un menú de WordPress es bastante simple. Proporciona una interfaz sencilla para crear y gestionar menús de navegación.

Sin embargo, encontrará varios complementos de WordPress que agregan funciones avanzadas y flexibilidad en la personalización del menú de navegación. Algunos de estos complementos vienen con una interfaz intuitiva de arrastrar y soltar, lo que le permite organizar los elementos del menú en el orden deseado sin esfuerzo.

En esencia, el menú de navegación de WordPress es un elemento crucial para mejorar la experiencia del usuario de su sitio web, ayudando a los visitantes a encontrar lo que buscan de forma rápida y eficiente.

✅ Método 1: Cómo crear un menú de navegación de WordPress directamente en una página (con GutenKit)

El método convencional para agregar un menú de navegación implica crear el menú dentro del panel de WordPress y luego incorporarlo a una página o publicación.

Pero usando bloques GutenKit, puede crear un menú de navegación de WordPress directamente en una página o publicación. E incluso cree una página personalizada mientras crea el menú de navegación. Descubramos cómo 👇

📢 Requisito previo

Para crear un menú de navegación de WordPress directamente en la página web, debe instalar y activar el complemento GutenKit en su sitio web de WordPress.

⬇️ Descargar el complemento GutenKit

Aprende también💡Cómo instalar y activar el complemento del editor de bloques GutenKit.

#️⃣ Paso 1: seleccione el bloque del menú de navegación

Después de instalar el complemento, abrir una página en el editor de Gutenberg (el editor predeterminado de WordPress).

En el editor, busque y seleccione GutenKit. Menú de navegación bloquear. Luego agregue el menú de navegación a la sección del editor.

#️⃣ Paso 2: agregue elementos de menú al menú de navegación en WordPress

En el Menú de navegación bloque, puede agregar elementos de menú simplemente haciendo clic en el botón del ícono ➕ (más), es decir Agregar menú botón. 

👉 Agregar una página existente al menú de navegación

Cuando hace clic en el botón Agregar menú, aparecerá una lista de las páginas existentes de su sitio web. O también puede buscar escribiendo el nombre de la página o la URL en el campo de búsqueda.

Además, tienes la opción de cambiar el Etiqueta del menú y URL de la página desde la barra lateral y páginas personalizadas hasta el menú de navegación de WordPress.  

✨ Crear nuevas páginas directamente en el menú de navegación

Por ejemplo, mientras creaba un menú, de repente me di cuenta de que olvidé crear la página "Mi cuenta" en el sitio web. 

Por lo general, tenía que volver al panel y crear una nueva página llamada "Mi cuenta". Luego regrese al editor y agregue esta página al menú de navegación.

Bueno, ¡con GutenKit esta molestia se elimina!

Mientras agrega elementos del menú, escriba el nombre de la página en el campo de búsqueda. Si la página no existe en el sitio web, Se creará una página como borrador. y agregado al menú de navegación de WordPress.

Posteriormente podrá editar el contenido de la página y publicarlo para su sitio web.

#️⃣ Paso 3: Configura el menú de navegación de WordPress

En el siguiente paso, puede configurar cómo aparecerá el menú de navegación en su sitio web. Utilice las siguientes configuraciones de GutenKit para personalizar la apariencia del menú:

1. Punto de interrupción del menú: Mientras personaliza el menú, puede configurar el punto de interrupción del menú para tableta o dispositivo móvil, o agregar un punto de interrupción personalizado.
2. Bloqueo de desplazamiento para fuera del lienzo: Puede aplicar el bloqueo de desplazamiento cuando el menú aparece como un menú fuera del lienzo.
3. Justificar contenido: Tiene múltiples opciones para justificar el contenido del menú como Inicio, Centro, Fin, etc.
4. Alinear elementos: También puede alinear el contenido del menú a la derecha, izquierda o centro.

🟢 Configuración del menú móvil 

Con el editor de bloques de GutenKit, puedes configurar por separado la apariencia del menú móvil. Las siguientes configuraciones están disponibles para el bloque del Menú de navegación.

• Logotipo del menú móvil
• Enlace al menú
• Icono de hamburguesa

#️⃣ Paso 4: personaliza los estilos del menú de navegación de WordPress

Para personalizar el menú de navegación de GutenKit en WordPress, vaya al Estilos pestaña en el editor de bloques. En la pestaña de estilo, puede personalizar el envoltorio del menú, los elementos del menú, la hamburguesa y el logotipo del menú móvil.

✅ Método 2: Cómo agregar un menú de navegación en el editor clásico de WordPress

Si todavía estás usando el editor clásico, debes agregar el menú de navegación de WordPress desde el Apariencia > Menús desde su tablero. Para agregar un nuevo menú:

• Paso 1: Ir a Apariencia > Menús.
• Paso 2: Introducir el Nombre del menú.
• Paso 3: Selecciona el Ubicación de visualización.
• Etapa 4: Clickea en el "Crear menú" botón.

Después de crear el menú, puede agregar elementos de menú desde la barra lateral.

• Paso 5: Después de eso, agregue páginas, publicaciones, enlaces personalizados y categorías al menú.
• Paso 6: Finalmente haga clic en el Guardar menú botón.

➕ Bonificación: Cómo editar el menú de navegación en WordPress usando Elementor

Si es usuario de Elementor, puede editar y personalizar fácilmente los menús de navegación de WordPress utilizando ElementsKit.

En el editor de Elementor, arrastre y suelte el Menú de navegación de ElementsKit widget. Después de eso, puede personalizar la configuración del menú, la configuración del menú móvil y los estilos de menú.

#️⃣ Configuración del menú

• Selección de menú: Cuando elige "Seleccionar menú", verá las opciones de menú actuales de su sitio web.
• Alineación del menú horizontal: Determine dónde desea que aparezca su menú; las opciones incluyen Izquierda, Centro, Derecha y Justificado.
• Comportamiento desplegable: Opte por que los menús desplegables se abran al pasar el cursor o hacer clic.
• Indicador de submenú: Personalice el ícono que acompaña a los menús principales y facilita la navegación a los submenús. Si está utilizando la versión pro de ElementsKit, encontrará la función Icono de indicador desplegable en lugar de la opción "Indicador de submenú".

#️⃣ Configuración del menú móvil

• Logotipo del menú móvil: Asigne un logotipo específicamente para visualización móvil.
• Enlace del menú: Mantenga el enlace predeterminado para la página de inicio o especifique una URL personalizada en el campo proporcionado. Al hacer clic en el logotipo, se dirigirá a los usuarios al enlace designado.
• Icono de hamburguesa (opcional): Seleccione un icono de la biblioteca o cargue su propio SVG.
• Área de clic del submenú: Si el menú contiene submenús, designe un icono para facilitar la navegación dentro de esas áreas.

#️⃣ Estilos de menú

Personalización del contenedor de menú: Aquí puede ajustar aspectos como la altura del menú, el estilo de fondo, el relleno, el ancho, el radio del borde, el espaciado de los iconos y más.

Estilo de elementos del menú: Personalice la apariencia de los elementos del menú con opciones de estilo de fondo, color, espaciado de bordes, margen de elementos y más.

Personalización de elementos del submenú: De manera similar a los elementos del menú, personalice los elementos del submenú con varias opciones de estilo disponibles en esta sección.

Diseño del panel del submenú: Amplíe esta sección para acceder a una multitud de opciones de personalización para diseñar el panel del submenú a su gusto.

Estilo del icono de hamburguesa: Explore diferentes opciones de estilo para el ícono de la hamburguesa, incluidos colores, tamaños, posiciones y características adicionales.

Personalización del logotipo del menú móvil: Adapte el logotipo del menú móvil a sus preferencias utilizando las opciones proporcionadas en esta sección.

Terminando

Si sigue la guía paso a paso descrita en este blog, ahora posee el conocimiento para crear sin esfuerzo menús personalizados adaptados a las necesidades de su sitio web. Recuerde mantener la estructura de su menú lógica, concisa e intuitiva para garantizar una navegación perfecta para sus visitantes. Con la flexibilidad y versatilidad de WordPress, las posibilidades para crear menús de navegación dinámicos y atractivos son infinitas. ¡Sumérgete, experimenta y eleva la navegación de tu sitio web a nuevas alturas!