Una barra de navegación vertical en WordPress ayuda a los visitantes a navegar por su sitio más fácilmente utilizando el espacio de la barra lateral en lugar de un menú superior abarrotado. Es fácil de configurar y puede hacer que tu sitio tenga un aspecto más limpio a la vez que mejora la experiencia del usuario.
En esta guía, le mostraré paso a paso cómo crear una barra de navegación vertical en WordPress utilizando diferentes métodos
Índice
Por qué utilizar una barra de navegación vertical en WordPress
Una barra de navegación vertical facilita la navegación por los sitios web apilando los enlaces en barras laterales o pies de página. Así se ahorra espacio horizontal y se ofrece a los visitantes un menú claro y escaneable.
Es especialmente útil para los sitios de comercio electrónico, donde los compradores necesitan ver muchas categorías de productos sin sentirse abrumados.
En resumen, los menús verticales mejoran la usabilidad, liberan espacio de diseño y crean una mejor experiencia de usuario.
Cómo crear una navegación vertical con SeedProd
Crear una barra de navegación vertical en WordPress es pan comido con SeedProd, el mejor constructor de sitios web y plugin de páginas de aterrizaje para WordPress.
Con el constructor de arrastrar y soltar de SeedProd, puede crear temas de WordPress personalizados 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 incorporada.
En primer lugar, tendrá que instalar y activar el plugin SeedProd. Si necesitas ayuda, puedes consultar nuestra documentación sobre la instalación de SeedProd Pro.
Nota: Con la versión gratuita de SeedProd, puede añadir una barra de navegación vertical a páginas individuales. Sin embargo, vamos a utilizar SeedProd Pro para esta guía para añadir una barra de menú a nuestras plantillas de temas de WordPress.
Después de activar el plugin e introducir su clave de licencia, estará listo para crear un tema de WordPress personalizado.
Creación de un tema de WordPress personalizado
Para crear su tema, vaya a la página SeedProd " Theme Builder desde su panel de control de WordPress. En esta página, puedes elegir un tema ya creado como punto de partida. Reemplazará su tema existente con un diseño de sitio web responsivo personalizado de su elección.
Para ello, haga clic en el botón Kits de plantillas de temas.
A continuación, verás la biblioteca de temas con diseños para diferentes nichos de sitios web. Si haces clic en el menú desplegable, podrás filtrarlos por popularidad y tipo. Navega a través de ellos, 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í, puede editar cada plantilla y personalizar el diseño para adaptarlo a sus necesidades.
Para conocer todos los pasos, consulte nuestra guía sobre cómo crear un tema personalizado para WordPress.
Añada una barra de navegación vertical a sus plantillas
Puede utilizar SeedProd para añadir una barra de navegación vertical a cualquiera de sus plantillas de temas. Para esta guía, vamos a añadir un menú a la plantilla 'Blog Page'.
Para ello, sitúe el cursor del ratón sobre la plantilla y haga clic en el enlace "Editar diseño".
Esto abre el constructor 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 por la barra lateral de bloques y busca el bloque Menú Nav. Una vez que lo encuentres, arrástralo hasta donde quieras mostrar tu menú de navegación, como la barra lateral.
Por defecto, el menú de navegación sólo mostrará la opción "Acerca de". Puede cambiar esto en la configuración del menú haciendo clic en el bloque. Se mostrarán los ajustes en la barra lateral izquierda.
Al principio, se activa el tipo de menú "Simple", que le permite construir su propio menú de navegación.
Para esta guía, seleccionaremos el tipo 'Menú WordPress', que le permite utilizar su menú de navegación WordPress existente.
El siguiente paso es hacer que la barra sea vertical en lugar de una barra de navegación horizontal. Para ello, haz clic en la pestaña Avanzado de la configuración del bloque y selecciona el diseño de lista 'Vertical'.
En el mismo panel, puede personalizar los colores del menú, la tipografía, el color de fondo, la configuración de la alineación del texto, la decoración del texto y mucho más.
Cuando esté satisfecho con su menú, haga clic en el botón Guardar para almacenar los cambios. Puedes repetir estos pasos para cada plantilla que requiera navegación vertical.
4 formas más de crear una navegación vertical en WordPress
Crear una barra de navegación vertical con SeedProd es una gran opción si estás usando un plugin constructor de temas. Pero ¿qué pasa si desea utilizar las herramientas que ya están en su sitio web?
A continuación, encontrará cuatro métodos más para añadir navegación vertical a WordPress.
Elija un tema con barra de navegación vertical
Otra forma de añadir navegación vertical a tu sitio web es elegir un tema de WordPress que la admita. Muchos temas de WordPress incorporan soporte para barras de navegación vertical, lo que te ahorrará mucho tiempo.
La principal ventaja es la sencillez: elige un tema que se adapte a tu estética y deja que haga el trabajo pesado por ti. Esta puede ser la solución perfecta si no eres un experto en tecnología o tienes poco tiempo.
Sin embargo, tenga en cuenta que no todos los temas ofrecen esta función. Cuando elijas tu tema, ve a su configuración o documentación para ver si incluye una barra de navegación vertical.
Por ejemplo, el tema por defecto de Twenty-Twenty-One no incluye navegación vertical. En cambio, el tema Astra incluye un menú de hamburguesa fuera del lienzo y un menú de pie de página que se puede mostrar apilado o en línea.
Si necesita ayuda para editar su menú, puede consultar nuestra guía sobre cómo editar la barra de navegación en WordPress .
Añadir una barra de navegación vertical con Full Site Editor
Muchos temas de WordPress son compatibles con el Full Site Editor (FSE) de WordPress. Se conocen como temas basados en bloques y te permiten personalizar tu tema visualmente.
Para ello, vaya a Apariencia " Editor desde el administrador de WordPress. Desde allí, haz clic en el menú de navegación en la parte superior de la cabecera de tu sitio web.
Tras 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ú.
Pulse la flecha hacia abajo para cambiar el menú a navegación vertical.
Ahora haga clic en el botón Guardar para guardar los cambios.
Añadir un menú de navegación vertical a la barra lateral de WordPress
Puedes añadir fácilmente una barra de navegación vertical a tu barra lateral usando widgets si no quieres cambiar tu tema de WordPress. Este método es ideal si no tienes instalado un tema basado en bloques.
En primer lugar, asegúrate de haber configurado un menú de navegación. A continuación, dirígete a Apariencia " Widgets desde el panel de control de WordPress.
Desde ahí, haz clic en el botón (+) más y busca el widget 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 guarde los cambios y previsualice su sitio para ver la barra de navegación lateral vertical en acción.
Crear una barra de navegación vertical para entradas y páginas
Puede adoptar un enfoque similar para añadir barras de navegación verticales a sus entradas y páginas de WordPress.
En primer lugar, edite o cree una nueva entrada o página. A continuación, añada el bloque Menú de navegación.
En la barra lateral derecha, haga clic en la flecha hacia abajo para que el menú sea vertical y, a continuación, guarde los cambios.
Cuando veas la entrada o la página, verás una nueva barra de navegación vertical.
Preguntas frecuentes sobre las barras de navegación verticales
Cree su próximo menú de navegación vertical
Con esto concluye nuestra guía sobre cómo crear una barra de navegación vertical en WordPress. Ahora te toca a ti crear un sistema de navegación más fácil de usar para tu sitio web.
Recuerde, tanto si opta por SeedProd como si elige alguna de las otras soluciones que hemos tratado, el objetivo sigue siendo el mismo. Mejore la experiencia de sus lectores, mantenga su sitio organizado y facilite la navegación a los visitantes.
¡Feliz diseño!
Para más consejos de navegación, consulte el siguiente tutorial:
- Cómo personalizar los estilos de menú de WordPress
- Cómo editar menús para móviles en WordPress
- La navegación en las páginas de aterrizaje está muerta: he aquí por qué
- Cómo hacer una página de aterrizaje sin navegación
- Cómo añadir una barra lateral diferente para diferentes páginas en WordPress
Gracias por leernos. Nos encantaría conocer tu opinión, así que no dudes en unirte a la conversación en YouTube, X y Facebook para obtener más consejos y contenidos útiles para hacer crecer tu negocio.
