Cómo crear un menú desplegable en WordPress (Guía para principiantes)

¿Quieres crear un menú desplegable en WordPress?

Un menú desplegable muestra una lista de enlaces cuando pasas el cursor del ratón sobre un elemento del menú. Puedes usar estos menús para mostrar muchas opciones en un espacio pequeño y ayudar a los visitantes a encontrar lo que buscan organizando los enlaces en categorías.

En esta guía para principiantes, te mostraremos cómo crear un menú desplegable en WordPress.

¿Por qué usar menús desplegables en WordPress?

WordPress viene con un sistema de gestión de menús integrado que te permite agregar fácilmente menús de navegación a tu sitio.

Los menús de navegación son enlaces a las páginas más importantes de tu sitio web y generalmente aparecen en una fila junto al logotipo de tu sitio web.

Si estás iniciando un blog de WordPress o creando un sitio web con solo unas pocas páginas, entonces puede tener sentido crear tu menú como una sola fila. Los visitantes podrán ver todas tus páginas importantes de un vistazo.

Sin embargo, si tienes una tienda en línea o un sitio web grande, es posible que tengas mucho contenido. Agregar todos estos enlaces al menú puede ser abrumador y hacer que tu sitio se vea desordenado.

Los menús desplegables resuelven este problema mostrando solo los enlaces del menú cuando un visitante pasa el cursor del ratón sobre el elemento principal. También te permiten organizar tu contenido en temas, categorías o grupos. Incluso podrías agregar títulos a tus menús.

Similar a los menús de navegación verticales, son perfectos para mostrar mucho contenido en un espacio pequeño.

Dicho esto, veamos cómo puedes crear fácilmente menús desplegables en WordPress y luego agregarlos a tu sitio web.

Tutorial en video

Suscríbete a WPBeginner

Si no te gusta el video o necesitas más instrucciones, simplemente sigue leyendo.

Paso 1: Elegir un tema con soporte para menús desplegables

WordPress viene con un sistema de gestión de menús incorporado, pero la apariencia de estos menús variará según tu tema de WordPress.

Casi todos los temas de WordPress admiten menús desplegables de forma predeterminada. Sin embargo, algunos temas pueden no tener un soporte adecuado para menús desplegables. Para empezar, debes asegurarte de que tu tema admita menús desplegables.

¿Cómo sabes si tu tema admite navegación desplegable?

Si descargaste el tema del repositorio oficial de WordPress, simplemente visita la página de ese tema y haz clic en el botón 'Vista previa' para ver una demostración en vivo.

Luego puedes verificar si la demostración incluye un menú desplegable.

Si estás utilizando un tema premium de WordPress, el desarrollador puede tener una demostración en vivo en su sitio web. También puedes consultar la documentación del tema para obtener más información.

Si aún no estás seguro, siempre puedes pedirle ayuda al desarrollador. Para más información sobre este tema, consulta nuestra guía sobre cómo pedir soporte de WordPress correctamente y obtenerlo.

Si tu tema de WordPress no admite menús desplegables, entonces necesitarás encontrar un tema que sí lo haga. Para obtener muchos consejos, consulta nuestra guía sobre cómo elegir el tema perfecto de WordPress.

Para ayudarte, aquí tienes algunos temas excelentes que admiten menús desplegables:

• Astra – Un tema multipropósito de WordPress que viene con varios sitios de inicio y toneladas de funciones.
• Temas de StudioPress – Construidos sobre el framework de temas Genesis, estos temas profesionales deberían ayudar a que tu sitio web cargue más rápido.
• OceanWP – Un tema popular de WordPress adecuado para todo tipo de sitios web.
• Ultra – Impulsado por el constructor Themify, este tema de WordPress de arrastrar y soltar viene con plantillas hermosas y opciones de tema flexibles.
• Divi – Un tema popular de Elegant Themes que utiliza el constructor de páginas Divi y viene con toneladas de funciones de arrastrar y soltar, incluidos menús desplegables.

Dicho esto, veamos cómo crear un menú desplegable de WordPress.

Paso 2: Crear un menú de navegación en WordPress

Empecemos creando un menú simple.

Si ya has configurado un menú de navegación en tu sitio web, puedes saltar al siguiente paso.

Para empezar, ve a Apariencia » Menús en el panel de WordPress y luego haz clic en el enlace ‘Crear un menú nuevo’.

Nota: Si en su lugar ves Apariencia » Editor, significa que tu tema admite la Edición Completa del Sitio (FSE). En ese caso, puedes saltar a la sección FSE a continuación.

A continuación, deberás escribir un nombre para el menú de navegación.

Esto es solo para tu referencia, así que puedes usar cualquier cosa que te ayude a identificar el menú dentro del área de administración de WordPress.

Después de escribir un título en el campo 'Nombre del menú', haz clic en 'Crear menú'. WordPress creará un menú vacío para ti.

A continuación, deberás agregar los enlaces principales al menú de navegación. Estos son los elementos que aparecerán en la fila superior de tu menú desplegable y actuarán como padres de todas las demás publicaciones y páginas.

En la columna de la izquierda, simplemente marca la casilla junto a cada página que desees agregar. Luego, haz clic en el botón 'Añadir al menú'.

Esas páginas ahora aparecerán en la columna de la derecha bajo 'Estructura del menú'.

También puedes seleccionar publicaciones de blog, categorías o agregar enlaces personalizados. Para obtener instrucciones más detalladas, consulta nuestra guía sobre cómo agregar un menú de navegación en WordPress.

Paso 3: Agregar sub-elementos a un menú

A continuación, necesitamos agregar sub-elementos que aparecerán dentro del menú desplegable. Puedes agregar un sub-elemento debajo de cualquier elemento del menú existente.

En esta guía, te mostraremos cómo agregar categorías de temas debajo de un elemento de menú 'Blog', pero los pasos serán similares sin importar qué contenido agregues.

En la columna de la izquierda, simplemente selecciona todas las páginas que deseas agregar como sub-elementos y luego haz clic en el botón 'Añadir al menú'. Tus elementos ahora aparecerán en la columna de la derecha.

Sin embargo, por defecto, todos estos enlaces aparecen como elementos de menú normales, lo que significa que se agregarán a la fila superior.

Necesitamos hacer que sean sub-elementos de un padre en su lugar.

Para hacer esto, simplemente arrastra y suelta un elemento del menú y colócalo debajo del padre deseado. Luego, muévelo ligeramente hacia la derecha y se convertirá en un sub-elemento.

Ahora, simplemente repite este proceso para cada sub-elemento que desees mostrar en el menú desplegable.

Cuando estés satisfecho con la configuración del menú, no olvides hacer clic en el botón ‘Guardar menú’ para almacenar tus cambios.

Paso 4: Publica tu menú desplegable

Si estás editando un menú que ya está activo en tu sitio web, los visitantes verán tus cambios de inmediato.

Sin embargo, si estás creando un menú nuevo, deberás elegir una ubicación para ese menú.

Cada tema de WordPress tiene sus propias ubicaciones de menú, que puedes encontrar en la sección ‘Ajustes del menú’ en el lado derecho de la pantalla. Simplemente marca la casilla junto a la ubicación que deseas usar y luego haz clic en el botón ‘Guardar menú’.

Alternativamente, puedes agregar menús de navegación personalizados en tu tema de WordPress.

Hecho esto, puedes visitar tu sitio web para ver el menú desplegable en acción.

Cómo crear un menú desplegable usando el editor de sitio completo

Si estás usando un tema basado en bloques como Hestia Pro, entonces puedes agregar un menú desplegable a cualquier parte de tu sitio usando el editor de sitio completo.

Para empezar, simplemente ve a Temas » Editor en el panel de WordPress.

Por defecto, el editor de sitio completo mostrará la plantilla de inicio de tu tema.

Para agregar un menú desplegable a una parte diferente de tu sitio web, haz clic en 'Plantillas' o 'Patrones'.

El editor ahora mostrará una lista de todas las plantillas o partes de plantilla que componen tu tema de WordPress.

Simplemente haz clic en el área donde deseas agregar el menú desplegable. Por ejemplo, si estás creando un menú de navegación principal, normalmente querrás seleccionar la parte de la plantilla Encabezado.

WordPress ahora mostrará una vista previa de la plantilla o parte de la plantilla.

Para editar esta plantilla, haz clic en el pequeño ícono de lápiz.

Hecho esto, haz clic en el ícono azul '+' en la esquina superior izquierda.

En la barra de búsqueda que aparece, escribe 'Navegación'.

Cuando aparezca el bloque correcto, arrástralo y suéltalo en tu diseño.

Ahora, simplemente haz clic para seleccionar ese bloque y verás todas las diferentes configuraciones que puedes usar para personalizar el bloque de navegación.

Por ejemplo, puedes cambiar el diseño, editar la configuración de visualización, cambiar el color del texto y del fondo, y ajustar el tamaño de la fuente.

Para agregar las páginas de nivel superior a tu menú, simplemente haz clic en el botón '+'.

En la ventana emergente que aparece, empieza a escribir el título o la URL de la página que deseas agregar. Cuando aparezca la página correcta, haz clic para agregarla al menú.

Simplemente repite este proceso para agregar todos los elementos de nivel superior al menú desplegable.

Hecho esto, puedes agregar un submenú a cualquier elemento principal.

En el menú de la derecha, haz clic en el ícono de puntos junto al elemento principal. Luego, selecciona ‘Agregar enlace de submenú’.

En la ventana emergente que aparece, escribe el título o la URL de la página que deseas mostrar en el menú desplegable.

Cuando aparezca la página correcta, haz clic para agregarla como un elemento de submenú.

Ahora, simplemente repite estos pasos para todos los elementos que deseas mostrar en el menú desplegable.

Cuando estés satisfecho con la configuración del menú, haz clic en ‘Guardar’ para almacenar tus cambios.

Ahora, si visitas tu sitio web, verás el menú desplegable en acción.

Consejos para crear menús desplegables interactivos

Los menús de navegación son importantes porque son el primer lugar al que los visitantes acudirán para encontrar contenido interesante o información específica.

Usarlos correctamente ayudará a los visitantes a navegar por tu sitio web. También te ayudará a obtener más conversiones y ventas, al mismo tiempo que aumentas tus visitas a la página y reduces tu tasa de rebote.

Teniendo esto en cuenta, aquí tienes algunos consejos para crear menús desplegables útiles y fáciles de usar.

1. Crea menús desplegables de varios niveles

En esta guía, te mostramos cómo crear una fila superior y un conjunto de subelementos. Sin embargo, también puedes agregar un subelemento debajo de otro subelemento para crear menús desplegables de varios niveles.

Esto puede ser útil para sitios que tienen mucho contenido o muchas categorías de contenido diferentes.

Por ejemplo, si tienes una tienda en línea, podrías tener una categoría de 'Electrónica' y una subcategoría de 'Laptops'. Sin embargo, también podrías tener subcategorías adicionales, como 'Laptops Apple' o 'Bolsas y fundas para laptops'.

En este caso, puede tener sentido crear un desplegable de varios niveles. Para hacerlo, simplemente arrastra cualquier página debajo de un subelemento y muévela ligeramente hacia la derecha.

2. Crea Múltiples Menús Desplegables

Puedes crear tantos menús desplegables como desees y luego mostrarlos en diferentes áreas de tu sitio web. Por ejemplo, podrías crear un menú desplegable que muestre solo las categorías de productos.

Esto es genial para tus páginas de productos, pero también podrías querer crear un menú desplegable único para tu página de inicio para que los compradores puedan encontrar diferentes áreas de tu sitio, como el formulario de contacto y el blog.

Simplemente crea un nuevo menú desplegable siguiendo el mismo proceso descrito anteriormente, y luego usa la configuración de 'Ubicación' para controlar dónde aparece este menú desplegable en tu sitio web.

3. Crea Menús con Vista Previa en Vivo

Si crear tu menú desplegable en el panel de administración se vuelve demasiado complicado, puedes cambiar al personalizador de WordPress. Simplemente ve a Apariencia » Personalizar para iniciar el personalizador de temas de WordPress en vivo.

Desde aquí, haz clic en la pestaña 'Menús' y luego selecciona el menú de navegación. Ahora verás un editor de arrastrar y soltar en la columna de la izquierda con una vista previa en vivo de tu sitio en el panel derecho.

Ahora puedes trabajar en tu menú, y cualquier cambio que hagas se mostrará en la vista previa en vivo.

4. Creando un Mega Menú Grande como Menú Desplegable en WordPress

Si tienes mucho contenido, es posible que te cueste organizarlo de forma ordenada usando un menú desplegable estándar.

En su lugar, puedes mostrar la estructura completa de tu sitio web como un mega menú que solo aparece cuando los usuarios pasan el cursor sobre el menú principal.

Los mega menús son similares a un menú desplegable, pero pueden mostrar muchos más enlaces, submenús y otros elementos. Para obtener instrucciones detalladas, consulta nuestro tutorial paso a paso sobre cómo crear un mega menú en WordPress.

4. Exporta tus menús desplegables

¿Tienes varios sitios web de WordPress? En ese caso, es posible que desees usar el mismo diseño y estructura de menú en todos tus sitios.

La función de importación/exportación predeterminada de WordPress no te permite importar y exportar menús por sí solos, pero es posible transferir tus menús usando un plugin.

Para obtener instrucciones detalladas paso a paso, consulta nuestra guía sobre cómo importar y exportar menús de navegación en WordPress.

Esperamos que este artículo te haya ayudado a aprender cómo crear fácilmente un menú desplegable en WordPress. También te puede interesar nuestra guía sobre cómo agregar una barra de búsqueda a tu menú, o consulta nuestra selección experta de los mejores tutoriales para dominar los menús de navegación de 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.