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

¿Quieres hacer un menú desplegable y añadirlo a tu sitio web de WordPress?

Un menú desplegable muestra una lista de enlaces mientras pasas el ratón por encima de un elemento del menú.

Usamos un menú desplegable en WPBeginner, adelante y pasa el ratón por encima del menú de navegación de la parte superior.

En esta guía para principiantes, te mostraremos cómo crear fácilmente un menú desplegable en WordPress con instrucciones paso a paso.

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

WordPress viene con un sistema de gestión de menús incorporado que le permite añadir fácilmente menús de navegación a su sitio de WordPress.

Los menús de navegación son enlaces a las páginas principales de su sitio web que suelen aparecer en la parte superior como una fila horizontal justo al lado del logotipo del sitio web.

Si estás empezando un blog o creando un sitio web con sólo unas pocas páginas, entonces puedes añadirlas en la fila única.

Sin embargo, si tiene una tienda en línea o un sitio web grande, puede que quiera añadir más enlaces al menú de navegación.

Los menús desplegables te ayudan a resolver el problema del espacio limitado mostrando los enlaces del menú sólo cuando los usuarios acercan el ratón a un elemento superior. También permiten organizar la estructura del menú por temas o jerarquía.

Por último, también se ven muy bien.

Dicho esto, ahora veamos cómo puedes crear fácilmente menús desplegables de WordPress y añadirlos a tu sitio web.

Video Tutorial

Suscríbase a WPBeginner

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

Paso 1. Elegir un tema con el soporte del menú desplegable

WordPress viene con un sistema de gestión de menús incorporado, pero la visualización de esos menús depende totalmente del tema de WordPress.

Casi todos los temas de WordPress admiten menús desplegables de forma predeterminada. Sin embargo, es posible que algunos temas no tengan el soporte de menú adecuado.

Debes asegurarte de que estás usando un tema de WordPress que soporta menús desplegables.

¿Cómo sabes si el tema que estás usando es compatible con el menú desplegable?

Puedes simplemente visitar el sitio web del tema donde encontrarás un enlace a la demo del tema. Desde allí puedes ver si la demo muestra un menú desplegable en el menú de navegación.

Si no lo es, entonces tendrás que encontrar un tema de WordPress que lo haga.

Vea nuestra guía para elegir el tema perfecto de WordPress para su sitio web.

Aquí hay algunos temas excelentes que apoyan el menú desplegable fuera de la caja.

• Astra - Es un tema multipropósito de WordPress que viene con varios sitios de inicio y toneladas de características.
• Temas de StudioPress - Construidos sobre el marco de temas de genesis, estos temas profesionales están altamente optimizados para el rendimiento.
• OceanWP - Un tema popular de WordPress que es adecuado para todo tipo de sitios web.
• Ultra - Impulsado por el constructor Themify, este tema de WordPress de arrastrar y soltar viene con hermosas plantillas y opciones de temas flexibles.
• Divi - popular tema de Elegant Themes que utiliza el constructor de páginas Divi y viene con un montón de funciones de arrastrar y soltar, incluyendo menús desplegables.

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

Paso 1. Crear un menú de navegación en WordPress

Si ya ha configurado un menú de navegación en su sitio web, puede pasar al siguiente paso.

Vamos a crear primero un simple menú.

Ve a la página de Apariencia " Menús y haz clic en el enlace "Crear un nuevo menú" en la parte superior.

A continuación, debe proporcionar un nombre para el menú de navegación. Este nombre no será visible públicamente en su sitio web. El propósito del nombre del menú es ayudarte a identificar el menú dentro del área de administración de WordPress.

Introduce un nombre para tu menú y luego haz clic en el botón "Crear menú".

WordPress creará ahora un nuevo menú vacío para ti.

Añadamos los enlaces superiores al menú de navegación. Estos elementos aparecerán en la fila superior del menú.

Simplemente selecciona las páginas que quieres añadir en la columna de la izquierda y haz clic en el botón "Añadir al menú". También puedes seleccionar entradas de blog, categorías o añadir enlaces personalizados.

Ahora verá que esas páginas aparecen en la columna derecha bajo su nuevo menú.

Paso 2. Adición de subelementos a un menú

Los subelementos son los elementos que aparecerán dentro del menú desplegable. Dependiendo de cómo quieras organizar tus menús, puedes añadirlos bajo cualquiera de los elementos existentes.

Por el bien de este tutorial, añadiremos categorías bajo el enlace del blog.

Simplemente selecciona los elementos que quieres añadir en la columna de la izquierda y luego haz clic en el botón "Añadir al menú". Tus artículos aparecerán ahora en la columna derecha.

Sin embargo, estos enlaces aparecerán como artículos regulares. Necesitamos hacerlos un subítem del menú principal.

Puedes simplemente arrastrar y soltar un elemento del menú y colocarlo bajo el elemento superior. Muévelo ligeramente a la derecha, y se convertirá en un subítem.

Repite el proceso para todos los enlaces que quieras mostrar en el menú desplegable.

Una vez que hayas terminado, no olvides hacer clic en el botón "Guardar menú" para almacenar los cambios.

Paso 3. Publica tu menú desplegable

Si está editando un menú que ya está en vivo en su sitio web, entonces comenzará a aparecer en su sitio web de inmediato.

Sin embargo, si se trata de un nuevo elemento del menú, ahora debes elegir una ubicación temática para mostrar este menú.

Los temas de WordPress pueden mostrar menús en diferentes lugares. Cada tema define sus propias ubicaciones de menú, y puedes seleccionar qué menú quieres mostrar allí.

Encontrarás esta opción en la columna de la derecha en "Configuración del menú". Selecciona una opción junto al ajuste "Ubicación de visualización" y haz clic en el botón "Guardar menú".

Ahora puede visitar su sitio web para ver su menú desplegable en acción.

Consejos para crear menús desplegables interactivos

Los menús de navegación son importantes porque es el primer lugar donde sus usuarios buscarán si quieren ver información específica.

Usarlas correctamente ayudará a sus usuarios a encontrar su camino en su sitio web. También le ayudará a obtener más visitas, conversiones y ventas en su sitio web.

A continuación se ofrecen algunos consejos para que los menús de navegación sean más interactivos con los menús desplegables.

1. Puedes crear menús desplegables de varios niveles

Haciendo un enlace un subítem de otro enlace hace que aparezca en el menú desplegable. También puede agregar un subelemento debajo de otro subelemento para crear menús desplegables de varios niveles.

Tu tema los mostraría automáticamente como un sub-menú dentro del desplegable.

2. También puedes crear múltiples menús desplegables

Puedes crear un menú desplegable debajo de cualquier enlace superior de tu menú. Incluso puedes agregar varios menús desplegables en tu menú de navegación principal.

3. Crear menús con una vista previa en vivo

Si el menú se complica demasiado, puedes cambiar a la vista previa visual. Ve a Apariencia " Personalizar para lanzar el personalizador del tema en vivo.

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

4. Creando un gran mega menú como desplegable en WordPress

Los menús desplegables sólo muestran un desplegable a la vez. ¿Y si quisieras mostrar la estructura completa de tu sitio web como un mega menú que sólo aparece cuando los usuarios pasan el cursor por el menú principal?

Los megamenes aparecen como un menú desplegable, pero pueden mostrar muchos más enlaces, sub-menús y más. Para obtener instrucciones detalladas, consulta nuestro tutorial paso a paso sobre cómo crear un mega menú en WordPress.

Esperamos que este artículo te haya ayudado a aprender a crear fácilmente un menú desplegable en WordPress. También puedes ver nuestra guía sobre cómo crear un menú de navegación flotante y pegajoso en WordPress y cómo añadir iconos de imágenes a los menús de navegación en WordPress.

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