Cómo crear un menú de navegación vertical en WordPress

Un menú de navegación bien diseñado es importante si deseas crear una experiencia de usuario positiva en tu sitio de WordPress.

Si bien los menús horizontales son comunes, un menú de navegación vertical ofrece una forma única y efectiva de organizar el contenido de tu sitio, especialmente para sitios web con muchas páginas o estructuras complejas.

Estos menús pueden mejorar la accesibilidad porque se adaptan mejor a la barra lateral de tu sitio web y son más fáciles de navegar en dispositivos móviles.

En este artículo, te mostraremos cómo crear fácilmente un menú de navegación vertical en WordPress.

¿Qué es un menú de navegación?

Un menú de navegación es una lista de enlaces que apuntan a áreas importantes de un sitio web de WordPress. Este menú generalmente se presenta como una barra horizontal de enlaces en la parte superior de cada página.

Los menús de navegación le dan estructura a tu sitio y ayudan a los visitantes a encontrar lo que buscan. Puedes agregar enlaces a tus páginas más importantes, categorías o temas, publicaciones de blog de WordPress, e incluso agregar enlaces personalizados como tu perfil de redes sociales.

Pero mientras que a menudo los ves colocados horizontalmente en la parte superior de un sitio web, los menús de navegación verticales tienen muchos usos y ventajas.

Un menú de navegación vertical ocupa menos espacio en la página, es más fácil de escanear y navegar, y se puede colocar en tu barra lateral, pie de página o incluso como una ventana emergente, lo que lo hace más flexible.

Por ejemplo, si tienes una tienda en línea, usar un menú de navegación vertical te permitirá mostrar muchas más categorías de productos y productos sin ocupar demasiado espacio.

Dicho esto, veamos varias formas de crear un menú de navegación vertical en WordPress. Estos son los temas que cubriremos en este artículo:

• Prueba diferentes ubicaciones de visualización del menú
• Agregar un menú de navegación vertical a la barra lateral
• Crear un menú de navegación vertical en una publicación o página
• Agregar un menú de navegación vertical usando el editor de sitio completo
• Crear un menú de navegación vertical usando un plugin de creación de temas
• Crear un menú de navegación vertical adaptable para dispositivos móviles
• Crear un menú desplegable en WordPress
• Crear un mega menú en WordPress
• Extra: Crear un menú de navegación flotante y fijo en WordPress

Prueba diferentes ubicaciones de visualización del menú

Cuando agregas un menú de navegación a tu sitio web, se mostrará vertical u horizontalmente. Esto depende de tu tema, así como de la ubicación del menú que selecciones.

El número de ubicaciones de menú disponibles depende del tema que estés utilizando. Es posible que algunas de estas ubicaciones muestren el menú verticalmente.

Para probar esto con tu tema, navega a la página Apariencia » Menús desde la barra lateral de administración de WordPress. Aquí, puedes experimentar para ver qué ubicaciones están disponibles en tu sitio web y cómo se muestran.

Por ejemplo, el tema Twenty Twenty-One no ofrece ubicaciones verticales, mientras que el tema Twenty Twenty ofrece una llamada 'Menú expandido de escritorio'.

Simplemente puedes seleccionar el menú que deseas mostrar verticalmente y luego marcar la casilla 'Menú expandido de escritorio' en la parte inferior de la pantalla.

Después de eso, debes asegurarte de hacer clic en el botón 'Guardar menú' para almacenar tu configuración. Así es como se ve en nuestro sitio web de demostración.

Para obtener más información sobre cómo editar menús y ubicaciones de menús, puedes consultar nuestra guía para principiantes sobre cómo agregar un menú de navegación en WordPress.

Agregar un menú de navegación vertical a la barra lateral

Sin importar qué tema estés usando, es fácil agregar un menú de navegación vertical a la barra lateral usando un widget.

Primero, necesitarás crear un menú de navegación que quieras mostrar si aún no lo has hecho. Luego, debes visitar la página Apariencia » Widgets desde el panel de WordPress.

Desde aquí, simplemente haz clic en el botón '+' en la esquina superior izquierda de la página y arrastra el bloque de Menú de Navegación a la barra lateral.

Después de eso, puedes darle un nombre al widget y seleccionar el menú que deseas mostrar en el menú desplegable. Finalmente, haz clic en el botón 'Actualizar' en la parte superior para guardar tu configuración.

Así es como se ve el menú de barra lateral vertical en nuestro blog de WordPress de demostración.

Crear un menú de navegación vertical en una publicación o página

Puedes agregar un menú de navegación vertical a publicaciones y páginas de manera similar.

Primero, necesitas crear una nueva publicación o editar una existente.

Después de eso, haz clic en el botón '+' en la parte superior de la página y luego arrastra el bloque de Navegación a la página.

A continuación, elige qué menú se mostrará. Simplemente haz clic en el botón 'Seleccionar Menú' en la barra de herramientas y selecciona el menú deseado.

Finalmente, necesitas mirar la configuración del bloque en el panel de la derecha.

Allí, encontrarás dos botones para la orientación del menú. Deberás hacer clic en el botón de flecha hacia abajo para orientar el menú verticalmente.

Una vez que hayas terminado, haz clic en el botón 'Publicar' o 'Actualizar' para guardar tu configuración.

Agregar un menú de navegación vertical usando el editor de sitio completo

Si estás utilizando un tema basado en bloques, entonces puedes agregar fácilmente el menú de navegación vertical a tu sitio usando el editor de sitio completo.

Para hacer esto, dirígete a la pantalla Apariencia » Editor desde tu panel de WordPress. Una vez que estés en el editor, haz clic en el menú de navegación que aparece en la parte superior del encabezado del sitio web.

A continuación, haz clic en el botón ‘Seleccionar navegación’ en la barra de herramientas.

Ahora, verás diferentes opciones para personalizar el menú de navegación en el panel de la derecha.

Una de esas opciones es si mostrar el menú con una orientación horizontal o vertical. Simplemente haz clic en la flecha hacia abajo para la orientación vertical para crear un menú vertical.

Para más información, consulta nuestra guía sobre cómo agregar un menú de navegación en WordPress.

Finalmente, haz clic en el botón ‘Guardar’ para almacenar tu configuración. Ahora has agregado un menú de navegación vertical a tu sitio.

Crear un menú de navegación vertical usando un plugin de creación de temas

SeedProd es el mejor constructor de páginas de WordPress y plugin constructor de temas personalizados del mercado. Te permite crear fácilmente menús verticales en cualquier parte de tu sitio web de WordPress.

Primero, necesitas instalar y activar el plugin SeedProd. Para más detalles, consulta nuestra guía para principiantes sobre cómo instalar un plugin de WordPress.

Al activarlo, deberás ingresar tu clave de licencia. Puedes encontrar esta información en tu cuenta en el sitio web de SeedProd.

Después de eso, puedes usar SeedProd para crear un tema personalizado de WordPress.

Creación de un Tema Personalizado de WordPress

Encontrarás el constructor de temas de SeedProd navegando a la página SeedProd » Theme Builder. Aquí, usarás uno de los temas prediseñados de SeedProd como punto de partida. Esto reemplazará tu tema actual de WordPress con un diseño nuevo y personalizado.

Puedes hacer eso haciendo clic en el botón 'Temas'.

Luego se te mostrará una lista de temas diseñados profesionalmente para diferentes tipos de sitios web. Por ejemplo, hay plantillas llamadas 'Negocio Moderno', 'Agencia de Marketing' y 'Tema para Corredor Hipotecario'.

Echa un vistazo a las opciones y selecciona la que mejor se adapte a tus necesidades haciendo clic en el ícono de la marca de verificación.

Una vez que hayas elegido un tema, SeedProd generará todas las plantillas de tema que necesites. Puedes aprender a personalizar estas plantillas en nuestra guía sobre cómo crear fácilmente un tema personalizado de WordPress.

Añadir un menú de navegación vertical a las plantillas de tu sitio

Ahora, puedes usar SeedProd para añadir un menú de navegación vertical a cualquiera de tus plantillas de tema. En este tutorial, añadiremos un menú a la plantilla del índice del blog.

Necesitas pasar el ratón sobre esa plantilla y luego hacer clic en el enlace 'Editar diseño'.

Esto abrirá el constructor de páginas de arrastrar y soltar de SeedProd, donde verás una vista previa de tu sitio web a la derecha y un panel de bloques a la izquierda.

Desde aquí, desplázate hacia abajo por los bloques hasta llegar a la sección Avanzado.

Una vez que localices el bloque de Menú de Navegación, deberías arrastrarlo a tu barra lateral o a donde quieras mostrar el menú de navegación. Por defecto, solo hay un elemento en el menú, 'Acerca de'.

Ahora, necesitarás cambiar la configuración del menú. Para hacerlo, haz clic en el menú y las opciones disponibles se mostrarán en la columna izquierda.

Actualmente, el tipo de menú 'Simple' está seleccionado. Esto te permite crear tu propio menú de navegación en SeedProd.

Sin embargo, para este tutorial, haremos clic en el tipo 'Menú de WordPress' para usar el menú de navegación de WordPress en su lugar.

Finalmente, necesitas hacer clic en la pestaña 'Avanzado'. Aquí encontrarás una opción para orientar el diseño de la lista vertical u horizontalmente.

Cuando hagas clic en el botón 'Vertical', notarás que la vista previa cambia inmediatamente a un menú de navegación vertical.

No olvides hacer clic en el botón 'Guardar' en la parte superior de la pantalla para almacenar tu menú vertical.

Crear un menú de navegación vertical adaptable para dispositivos móviles

Puede ser difícil tocar un menú estándar mientras se usa la pantalla pequeña de un smartphone. Es por eso que te recomendamos que previsualices la versión móvil de tu sitio de WordPress para ver cómo se ve tu sitio web en dispositivos móviles.

Los menús verticales son mucho más fáciles de navegar, especialmente cuando usas un menú adaptable a pantalla completa que se ajustará automáticamente a diferentes tamaños de pantalla.

Para aprender cómo hacer que tu menú de navegación sea más fácil de usar en dispositivos móviles, consulta nuestra guía sobre cómo agregar un menú adaptable a pantalla completa en WordPress.

Crear un menú desplegable en WordPress

Un menú desplegable se ve como un menú de navegación horizontal normal en la parte superior de la pantalla. Pero cuando pasas el mouse sobre uno de los elementos, se muestra un submenú vertical.

Si tienes un sitio web con mucho contenido, un menú desplegable te permite organizar la estructura del menú por temas o jerarquía. Esto mostrará más contenido en un espacio limitado.

Para mostrar un menú de navegación desplegable en tu sitio web, deberás elegir un tema con soporte para menús desplegables. Después de eso, necesitas crear el menú de navegación y luego agregar subelementos a algunas de las entradas del menú.

Puedes aprender cómo hacerlo paso a paso en nuestra guía para principiantes sobre cómo crear un menú desplegable en WordPress.

Crear un mega menú en WordPress

Un mega menú lista varios menús verticalmente a través de la página. Son similares a los menús desplegables, excepto que todos los submenús se muestran a la vez, lo que permite a los usuarios encontrar tu mejor contenido de forma rápida y sencilla.

Los mega menús son muy atractivos e interactivos porque combinan lo mejor de los menús horizontales y verticales para mostrar una vista general útil del contenido de tu sitio web en una sola pantalla.

Recientemente agregamos un mega menú a WPBeginner para mejorar la descubribilidad del contenido. Explicamos cómo lo hicimos en nuestro análisis detrás de cámaras de nuestro nuevo diseño de sitio.

Puedes aprender más en nuestra guía sobre cómo agregar un mega menú a tu sitio de WordPress.

Extra: Crear un menú de navegación flotante y fijo en WordPress

También puedes crear un menú de navegación flotante fijo para tu sitio web para mejorar la participación del usuario. Un menú fijo permanece visible en tu pantalla incluso mientras los usuarios se desplazan hacia abajo en tu página, lo que facilita su acceso.

Para hacer que tu menú de navegación sea fijo, necesitas instalar y activar el plugin Sticky Menu & Sticky Header. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Al activarlo, dirígete a la página Ajustes » Sticky Menu y escribe #main-navigation junto a la opción ‘Sticky Element (required)’. De esta manera, incluso puedes hacer que tu menú de navegación vertical sea fijo.

Una vez que hayas terminado, haz clic en ‘Guardar Cambios’ para almacenar tu configuración. Para más instrucciones, puedes ver nuestro tutorial sobre cómo crear un menú de navegación fijo flotante en WordPress.

Esperamos que este tutorial te haya ayudado a aprender cómo crear un menú de navegación vertical en WordPress. También podrías querer aprender cómo ocultar un menú móvil en WordPress o nuestra guía sobre cómo agregar iconos de imagen con menús de navegación en WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.