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

How to Create a Vertical Navigation Menu in WordPress

¿Quieres crear un menú de navegación vertical en WordPress?

En WordPress, los menús de navegación se pueden mostrar horizontal o verticalmente. Los menús verticales ofrecen una serie de beneficios como: B. Mejor alineación con la barra lateral de su sitio y navegación más sencilla en dispositivos móviles.

En este artículo le mostraremos cómo crear un menú de navegación vertical en WordPress.

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

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

El menú de navegación es una lista de enlaces que apuntan a áreas importantes de un sitio web. Por lo general, se presentan como una barra de enlace horizontal en la parte superior de cada página de un sitio de WordPress.

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

Pero mientras que a menudo los ve horizontalmente en la parte superior de un sitio web, los menús de navegación verticales tienen muchas aplicaciones y beneficios.

Veamos algunas formas de crear un menú de navegación vertical en WordPress. Estos son los temas que trataremos en este artículo:

Cuando agrega un menú de navegación a su sitio web, aparecerá vertical u horizontalmente. Depende de su tema, así como del elemento del menú que elija.

El número de elementos de menú disponibles depende del tema utilizado. Puede notar que algunos de estos lugares muestran el menú verticalmente.

Para probar esto con su tema, necesita navegar Apariencia »Menús. Aquí puede experimentar para ver qué ubicaciones están disponibles en su sitio y cómo aparecen.

Por ejemplo, el tema Twenty Twenty-One no ofrece ninguna posición vertical, mientras que el tema Twenty Twenty ofrece una llamada "Menú de escritorio avanzado".

El tema Veinte Veinte tiene una posición de menú vertical

Simplemente puede seleccionar el menú que desea mostrar verticalmente y luego marcar la casilla "Menú de escritorio avanzado" en la parte inferior de la pantalla. Luego, debe asegurarse de hacer clic en el botón "Guardar menú" para guardar su configuración.

Así es como se ve en nuestro sitio web de demostración.

Veinte vista previa del elemento de menú Vertical

Para obtener más información sobre la edición de menús y elementos de menú, consulte nuestra Guía para principiantes para agregar un menú de navegación a WordPress.

No importa qué tema uses, puedes agregar fácilmente un menú de navegación vertical a la barra lateral usando el widget.

Primero debe crear un menú de navegación que desee mostrar si aún no lo ha hecho.

Entonces necesitas navegar Apariencia »Widgets. Desde aquí, simplemente haga clic en el botón azul "+" para insertar bloques en la parte superior de la página y arrastre el bloque "Menú de navegación" a la barra lateral.

Agregue un bloque de menú de navegación a la barra lateral

Luego puede nombrar el widget y seleccionar el menú que desea mostrar en el menú desplegable.

Así es como se ve el menú de la barra lateral vertical en nuestro sitio web de demostración.

Visualización del menú de navegación vertical en la barra lateral

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

Primero debe crear una nueva publicación o editar una existente. Luego debe hacer clic en el botón azul "+" para insertar bloques en la parte superior de la página y luego arrastrar el bloque de navegación a la página.

Agregue un bloque de navegación a su publicación o página

Luego debe elegir qué menú mostrar. Simplemente haga clic en el botón "Seleccionar" en el menú "en la barra de herramientas y seleccione el menú que desee.

Finalmente, debe mirar la configuración del bloque en el panel izquierdo. Allí encontrará dos botones de navegación en el menú. Debe hacer clic en la flecha hacia abajo para alinear el menú verticalmente.

Cambie su bloque de menú de navegación a orientación vertical

El nuevo editor de sitio completo le permite personalizar sus temas de WordPress con el editor de bloques. Lanzado en WordPress 5.9, le permite agregar diferentes bloques a sus plantillas para crear un diseño único.

Sin embargo, el editor de sitio completo todavía está en versión beta y está limitado a temas específicos que lo admiten, como: B. El tema predeterminado es Veintidós Veintidós. Consulte nuestro artículo sobre los mejores temas de WordPress para la edición completa de sitios web para obtener más información.

Para agregar un menú de navegación usando el editor de sitio completo, debe ir Apariencia »Editor desde tu panel de WordPress. Una vez en el editor, haz clic en el menú de navegación que aparece en la parte superior del encabezado del sitio web.

Luego debe hacer clic en el botón "Seleccionar navegación" en la barra de herramientas.

En la barra de herramientas, haga clic en el menú Seleccionar navegación.

Ahora verá varias opciones para personalizar el menú de navegación a la derecha. Una de estas opciones es si el menú debe mostrarse en orientación horizontal o vertical.

Simplemente haga clic en la flecha de alineación vertical hacia abajo para crear un menú vertical.

Haga clic en la flecha de alineación vertical hacia abajo para crear un menú vertical

Para obtener más información, consulte nuestra guía para agregar un menú de navegación a WordPress

Producto de semilla es el mejor complemento para crear páginas de WordPress y temas personalizados en el mercado. Con él, puede crear fácilmente menús verticales en cualquier lugar de su sitio web de WordPress.

Primero debes instalarlo y activarlo Producto de semilla enchufar. Consulte nuestra guía paso a paso para instalar el complemento de WordPress para obtener más detalles.

Nota: Hay versión gratuita de SeedProd Le permite agregar una vertical a páginas individuales Agregar un menú de navegación. Sin embargo, necesita la versión Pro para acceder a Theme Builder y agregar un menú a sus plantillas de temas.

Después de la activación, deberá ingresar su clave de licencia. Puede encontrar esta información en su cuenta en el sitio web de SeedProd.

Clave de licencia de SeedProd

Luego, debe usar SeedProd para crear un tema de WordPress personalizado.

Crear un tema personalizado de WordPress

Puede encontrar el generador de temas SeedProd yendo a SeedProd »Creador de temas Remover. Aquí utilizará uno de los temas de SeedProd prefabricados como punto de partida. Esto reemplazará su tema de WordPress existente con un nuevo tema personalizado.

Puede hacerlo haciendo clic en el botón "Temas".

Crea tu propio diseño personalizado

Se le presentará una lista de temas diseñados profesionalmente para diferentes tipos de sitios web. Por ejemplo, hay plantillas llamadas Modern Business, Marketing Agency y Mortgage Broker Theme.

Revise las opciones y elija la que mejor se adapte a sus necesidades haciendo clic en el icono de marca de verificación.

Elige un tema que se adapte a tus necesidades

Una vez que seleccione un tema, SeedProd generará todas las plantillas de temas que necesita. Aprenda a personalizar estas plantillas con nuestra guía para crear fácilmente un tema de WordPress personalizado.

Agregue un menú de navegación vertical a las plantillas de su sitio

Ahora puede usar SeedProd para agregar un menú de navegación vertical a cada una de sus plantillas de diseño. En este tutorial agregaremos un menú a la plantilla de índice del blog.

Debe mantener el cursor del mouse sobre esta plantilla y luego hacer clic en el enlace "Editar tema".

Haga clic en el enlace Editar tema

Esto abrirá el generador de páginas de arrastrar y soltar de SeedProd. Verá una vista previa de su sitio a la derecha y una colección de bloques para agregar a su sitio a la izquierda.

Debe desplazarse hacia abajo por los bloques hasta llegar a la pestaña Avanzado.

Una vez que encuentre el bloque del menú de navegación, debe arrastrarlo a la barra lateral o donde desee que aparezca el menú de navegación. De forma predeterminada, solo hay un elemento en el menú "Acerca de".

Arrastre el bloque del menú de navegación a la página

Ahora necesita cambiar la configuración del menú. Para hacer esto, debe hacer clic en el menú y las opciones disponibles aparecerán en un panel en el lado izquierdo de la página.

El tipo de menú Simple está actualmente seleccionado. De esta manera puedes 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.

Haga clic en la opción de menú de WordPress

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

Cuando haga clic en el botón Vertical, notará que la visualización cambia inmediatamente al menú de navegación vertical.

Haga clic en la opción vertical

Asegúrese de hacer clic en el botón "Guardar" en la parte superior de la pantalla para guardar su menú vertical.

Puede ser difícil tocar el menú estándar mientras usa la pantalla pequeña del teléfono inteligente. Por lo tanto, le recomendamos que revise la versión móvil de su sitio de WordPress para ver cómo se ve su sitio móvil.

Los menús verticales son mucho más fáciles de navegar, especialmente si usa un menú de pantalla completa personalizable que se ajusta automáticamente a diferentes tamaños de pantalla.

Ver el menú en pantalla completa

Para saber cómo hacer que su menú de navegación sea más compatible con dispositivos móviles, lea nuestra guía sobre cómo agregar un menú de pantalla completa personalizable a WordPress.

El menú desplegable parece un menú de navegación horizontal normal en la parte superior de la pantalla, pero al mantener el cursor del mouse sobre uno de los elementos, aparece un submenú vertical.

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

Descripción general del menú desplegable

Para mostrar un menú desplegable para navegar por su sitio, debe elegir un tema que admita menús desplegables. Luego debe crear el menú de navegación y luego agregar subelementos a algunos elementos del menú.

Para obtener una guía paso a paso sobre cómo hacer esto, consulte nuestra guía para principiantes sobre cómo crear un menú desplegable en WordPress.

El megamenú enumera múltiples menús verticalmente a lo largo de la página. Son similares a los menús desplegables, excepto que todos los submenús aparecen a la vez, lo que permite a los usuarios encontrar su mejor contenido de forma rápida y sencilla.

Los mega menús son extremadamente atractivos e interactivos, ya que combinan lo mejor de los menús horizontales y verticales para mostrar una descripción general útil del contenido de su sitio en una pantalla.

Recientemente agregamos un mega menú a AprenderWP para mejorar la detección de contenido. Explicamos cómo hicimos esto en nuestra mirada tras bambalinas al nuevo diseño de nuestro sitio.

Mega menú de WordPress para principiantes de WPBeginner

Consulte nuestra guía para obtener más información sobre cómo agregar un mega menú a su sitio de WordPress.

Esperamos que este tutorial te haya ayudado a crear un menú de navegación vertical en WordPress. Es posible que también desee aprender cómo iniciar su propio podcast o ver nuestra comparación experta de los mejores registradores de dominios.

Si te ha gustado este artículo, suscríbete al nuestro. canal de Youtube para videos tutoriales para WordPress. También puedes encontrarnos en Closermarketing.es y Facebook.

.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir