Cómo crear un menú de navegación vertical en WordPress (5 maneras fáciles) 

Si tu sitio de WordPress está creciendo y tu navegación superior se está llenando demasiado, un menú de navegación vertical es una de las soluciones más sencillas. Lo he visto funcionar bien para tiendas de comercio electrónico con muchas categorías de productos, sitios de documentación y sitios de membresía que necesitan una disposición estructurada en la barra lateral.

En esta guía, te mostraré 5 maneras de añadir un menú de navegación vertical a WordPress sin escribir una sola línea de código.

¿Qué es una barra de navegación vertical en WordPress?

Una barra de navegación vertical en WordPress es un menú del sitio que muestra enlaces en una columna apilada en lugar de la fila horizontal estándar. Normalmente se sitúa en una barra lateral izquierda, aunque puedes colocarla en cualquier lugar que tu tema o constructor de páginas admita.

Los usuarios de WordPress añaden una para liberar espacio en la cabecera, mejorar la legibilidad en sitios con mucho contenido y adaptar diseños que se benefician de una disposición de navegación en barra lateral más estructurada.

¿Cuándo deberías usar una barra de navegación vertical en WordPress?

Un menú de navegación vertical tiene más sentido cuando tu sitio tiene mucho que navegar y la cabecera se está quedando sin espacio. Convierte el espacio de la barra lateral en un menú de navegación lateral claro y legible en lugar de abarrotar todo en una barra superior.

Es especialmente útil para sitios de comercio electrónico con 10 o más categorías de productos, donde los compradores necesitan navegar por muchas opciones sin abarrotar la cabecera. Los sitios de documentación y bases de conocimiento lo utilizan por la misma razón, al igual que los sitios de membresía que dependen de un menú vertical en la barra lateral para agrupar los enlaces del panel por sección.

Dicho esto, un menú de navegación lateral vertical no es siempre la opción correcta. Los sitios de una sola página, los sitios con menos de 6 elementos de navegación y los diseños orientados a dispositivos móviles se benefician mejor de un menú horizontal estándar.

Cómo crear navegación vertical con SeedProd

Crear un menú de navegación vertical en WordPress es pan comido con SeedProd, el creador de sitios web de WordPress de arrastrar y soltar.

Con el creador de arrastrar y soltar de SeedProd, puedes crear temas personalizados de WordPress y páginas web flexibles sin escribir código PHP, Jquery, Javascript, HTML y CSS. Además, su bloque Nav Menu incluye navegación vertical integrada.

Primero, necesitarás instalar y activar el plugin SeedProd. Si necesitas ayuda, puedes consultar nuestra documentación sobre cómo instalar SeedProd Pro.

Nota: Con la versión gratuita de SeedProd, puedes añadir una barra de navegación vertical a páginas individuales. Sin embargo, usaremos SeedProd Pro en esta guía para añadir una barra de menú a las plantillas de nuestro tema de WordPress.

Después de activar el plugin e introducir tu clave de licencia, estarás listo para crear un tema personalizado de WordPress.

Creación de un tema personalizado de WordPress

Para crear tu tema, navega a la página SeedProd » Theme Builder desde tu panel de WordPress. En esta página, puedes elegir un tema predefinido como punto de partida.

Reemplazará tu tema actual con un diseño de sitio web receptivo personalizado de tu elección. Para ello, haz clic en el botón Theme Template Kits.

Verás entonces la biblioteca de temas con diseños para diferentes nichos de sitios web. Al hacer clic en el menú desplegable, puedes filtrarlos por popularidad y tipo.

Examínalos y luego haz clic en el icono de marca de verificación en cualquier diseño para importarlo.

Cuando importas un diseño, SeedProd generará las plantillas que componen tu tema. A partir de ahí, puedes editar cada plantilla y personalizar el diseño para adaptarlo a tus necesidades.

Para todos los pasos, consulta nuestra guía sobre cómo crear un tema personalizado de WordPress.

Añadir una barra de navegación vertical a tus plantillas

Puedes usar SeedProd para añadir una barra de navegación vertical a cualquiera de las plantillas de tu tema. Para esta guía, añadiremos un menú a la plantilla de la ‘Página del Blog’.

Para hacerlo, pasa el cursor del ratón sobre la plantilla y haz clic en el enlace ‘Edit Design’.

Esto abre el creador de páginas de arrastrar y soltar, con una vista previa en vivo a la derecha y una barra lateral de bloques a la izquierda.

Ahora, desplázate hacia abajo en la barra lateral de bloques y busca el bloque Nav Menu. Una vez que lo encuentres, arrástralo a donde quieras mostrar tu menú de navegación, como la barra lateral.

Por defecto, el Nav Menu solo mostrará un elemento de menú ‘About’. Puedes cambiar esto en la configuración del menú haciendo clic en el bloque. Luego se mostrarán los ajustes en la barra lateral izquierda.

Al principio, el tipo de menú ‘Simple’ está activado, lo que te permite crear tu propio menú de navegación.

Para esta guía, seleccionaremos el tipo ‘WordPress Menu’, que te permite usar tu menú de navegación existente de WordPress.

El siguiente paso es hacer que la barra sea vertical en lugar de una barra de navegación horizontal. Puedes hacerlo haciendo clic en la pestaña Avanzado en la configuración del bloque y seleccionando el diseño de lista ‘Vertical’.

En el mismo panel, puedes personalizar los colores del menú, la tipografía, el color de fondo, la alineación del texto, la decoración del texto y más.

Cuando estés satisfecho con tu menú, haz clic en el bot ildeo>Guardar para almacenar tus cambios. Puedes repetir estos pasos para cada plantilla que requiera navegación vertical.

4 Formas más de crear navegación vertical en WordPress

Crear una barra de navegación vertical con SeedProd es una excelente opción si estás usando un plugin de creación de temas. Pero, ¿qué pasa si quieres usar las herramientas que ya están en tu sitio web?

A continuación, encontrarás cuatro métodos más para añadir navegación vertical a WordPress.

¿Qué temas de WordPress incluyen soporte de navegación vertical?

Otra forma de añadir navegación vertical a tu sitio web es elegir un tema de WordPress que la soporte. Muchos temas de WordPress tienen soporte integrado para barras de navegación verticales, lo que te ahorrará mucho tiempo.

La ventaja aquí es la simplicidad. Elige un tema que se adapte a tu estética y deja que haga el trabajo pesado por ti. Esta podría ser la solución perfecta si no tienes muchos conocimientos técnicos o te falta tiempo.

Sin embargo, ten en cuenta que no todos los temas ofrecerán esta función. Al elegir tu tema, ve a su configuración o documentación para ver si incluye una barra de navegación vertical.

Por ejemplo, el tema predeterminado Twenty-Twenty-One no incluye navegación vertical. Mientras tanto, el tema Astra soporta un menú hamburguesa oculto y un menú en el pie de página que puedes mostrar apilado o en línea.

Para obtener ayuda para editar tu menú, puedes consultar nuestra guía sobre cómo editar la barra de navegación en WordPress.

Añadir una barra de navegación vertical con el Editor de Sitio Completo

Muchos temas de WordPress son compatibles con el Editor Completo del Sitio de WordPress (FSE). Se conocen como temas basados en bloques y te permiten personalizar tu tema visualmente.

Para hacer esto, navega a Apariencia » Editor desde tu administrador de WordPress. Desde allí, haz clic en el menú de navegación en la parte superior del encabezado de tu sitio web.

Después de hacer clic en el menú, verás varias opciones en el panel de navegación lateral. Por ejemplo, si haces clic en la pestaña Configuración, hay una opción para cambiar la orientación de los elementos de la lista del menú.

Haz clic en la flecha hacia abajo para cambiar el menú a navegación vertical.

Ahora haz clic en el bot ildeo>Guardar para guardar tus cambios.

Añadir un menú de navegación vertical a la barra lateral de WordPress

Puedes añadir fácilmente un menú de navegación en la barra lateral a tu sitio usando widgets si no quieres cambiar tu tema de WordPress. Este método es ideal si no tienes instalado un tema basado en bloques.

Primero, asegúrate de haber configurado un menú de navegación. Luego, dirígete a Apariencia » Widgets desde tu panel de WordPress.

Desde allí, haz clic en el bot ildeo> (+) y busca el widget de Menú de Navegación.

Después de hacer clic para añadirlo a tu barra lateral, puedes darle un título al menú y elegir qué menú mostrar.

Ahora guarda tus cambios y previsualiza tu sitio para ver el menú de navegación lateral vertical en acción.

Crear una barra de navegación vertical para entradas y páginas

Este enfoque funciona bien para publicaciones de tutoriales largos o páginas de documentación donde deseas una navegación por secciones dentro del artículo junto con el contenido principal. Utiliza el mismo bloque de Navegación que el método de la barra lateral, pero colocado directamente dentro del contenido de la publicación o página en su lugar.

Primero, edita o crea una nueva publicación o página. Luego, añade el bloque de Navegación.

En la barra lateral derecha, haz clic en la flecha hacia abajo para que el menú sea vertical y, a continuación, guarda los cambios.

Esto concluye nuestra guía sobre cómo crear un menú de navegación vertical en WordPress. Ahora es tu turno de construir un sistema de navegación más fácil de usar para tu sitio web.

Preguntas frecuentes sobre barras de navegación verticales

¿Qué es una barra de navegación vertical?

Una barra de navegación vertical es un menú del sitio que muestra los enlaces en una columna apilada en lugar de una fila horizontal. Normalmente aparece en una barra lateral izquierda y funciona bien para sitios con muchas páginas o categorías para navegar. La mayoría de los sitios de WordPress que añaden una lo hacen para liberar espacio en la cabecera y facilitar el escaneo del menú.

¿Cuándo deberías usar una barra de navegación vertical en WordPress?

Utiliza un menú de navegación vertical cuando tu sitio tenga más de 6 o 7 elementos de navegación de nivel superior, o cuando tu audiencia necesite explorar muchas categorías a la vez. Es una buena opción para tiendas de comercio electrónico, bases de conocimiento y sitios de membresía. Evítalo en sitios sencillos o diseños "mobile-first" donde el espacio de la barra lateral es limitado.

¿Cuál es la diferencia entre la navegación vertical y la horizontal?

La navegación horizontal muestra los enlaces del menú en una sola fila en la parte superior de la página. La navegación vertical apila los enlaces en una columna, normalmente en una barra lateral. Los menús horizontales funcionan bien para sitios sencillos con pocas páginas; los menús verticales manejan listas de enlaces más grandes sin abarrotar la cabecera.

¿Cómo gestionas la adaptabilidad a dispositivos móviles para una barra de navegación vertical?

La mayoría de las herramientas de WordPress que añaden navegación vertical, incluido SeedProd, gestionan la adaptabilidad a dispositivos móviles automáticamente. Para configuraciones personalizadas, utiliza un menú plegable o de tipo "hamburguesa" en pantallas pequeñas para que la navegación vertical no ocupe toda la ventana gráfica. Prueba siempre en un dispositivo móvil real antes de publicar.

¿Cuál es el ancho ideal para una barra de navegación vertical?

Un ancho de entre 200 y 300 píxeles funciona bien para la mayoría de los sitios. Es lo suficientemente ancho como para mostrar las etiquetas completas del menú sin truncarlas y lo suficientemente estrecho como para dejar espacio para tu contenido principal. Verifica siempre que el menú siga siendo legible en una ventana gráfica de tableta de 768 píxeles, no solo en escritorio.

Crea tu próximo menú de navegación vertical

Eso concluye nuestra guía sobre cómo crear un menú de navegación vertical en WordPress. Ahora es tu turno de construir un sistema de navegación más fácil de usar para tu sitio web.

Ya sea que elijas SeedProd o uno de los otros métodos, el objetivo es el mismo. Un buen sistema de navegación hace que tu sitio sea más fácil de usar, y eso siempre vale la pena el esfuerzo.

¡Feliz diseño!

¿Listo para construir tu sitio? Obtén SeedProd y añade navegación vertical a cualquier plantilla en minutos.

Para obtener más consejos de navegación, consulta el siguiente tutorial:

• Cómo personalizar los estilos del menú de WordPress
• Cómo editar menús móviles en WordPress
• La navegación en las páginas de destino ha muerto: he aquí por qué
• Cómo crear una página de destino sin navegación
• Cómo agregar una barra lateral diferente para diferentes páginas en WordPress

¡Gracias por leer! Nos encantaría conocer tu opinión, así que únete a la conversación en YouTube, X y Facebook para obtener más consejos y contenido útil para hacer crecer tu negocio.