Desbloquee el poder de la navegación del usuario: aprenda a crear un menú desplegable con estilo en WordPress

La navegación por su sitio web es una parte esencial de la experiencia del usuario. Un menú es un elemento imprescindible para cualquier sitio web. Su único propósito es ayudar a sus usuarios a encontrar fácilmente el contenido de su interés y permitirles llegar rápidamente a la ubicación del sitio que desean. Pero tener demasiados elementos de menú puede causar confusión y dañar el diseño de su sitio web.

Es por eso que un menú desplegable bien diseñado puede ayudar mucho a mejorar UX y disminuir las tasas de rebote.

Un menú desplegable muestra una lista de enlaces cuando pasa el mouse sobre un elemento del menú.

Puede parecer una tarea complicada crear una barra de navegación. Pero, afortunadamente, WordPress facilita la creación de un menú desplegable. Puede crear fácilmente un menú personalizado que se ajuste a las necesidades de su sitio.

Vamos a mostrar cómo crear un menú desplegable en WordPress sin usar ningún código. Pero primero, comencemos con lo básico.

¿Cuándo necesita un menú desplegable en lugar de un menú normal?

Ya respondimos por qué necesita un menú en cada sitio web. El menú le garantiza una mejor navegación para sus usuarios y les ayuda a encontrar el contenido correcto con facilidad. Y, francamente, las personas no tienen la paciencia para visitar su sitio web y buscar contenido sin una navegación adecuada.

Pero, ¿por qué estamos hablando de agregar un menú desplegable en lugar de un menú convencional donde puede ver todos los elementos del menú uno al lado del otro?

La respuesta es simple, hacer que el sitio web sea más legible y mejorar la experiencia del usuario. Piénsalo. Tienes una tienda online y tienes varias páginas como-

• páginas de productos
• páginas de contacto
• almacenar paginas
• paginas de cuenta
• páginas del carrito y más.

¿Sería prudente mostrar todas las páginas en el estilo de menú normal?

Vea las dos imágenes a continuación-

• Aquí está la imagen uno con un menú normal.

• Aquí está la imagen dos con un menú desplegable

¿Cuál se ve mejor?… Obviamente el segundo, ¿no?

Cuando está creando un sitio web con pocas páginas, tiene sentido colocar los elementos del menú en una sola fila. Pero hacer eso para un sitio web grande abrumará a los visitantes y su sitio web se verá desordenado y complicado. Ahí es donde un menú desplegable bien diseñado:

• Organizar temas en categorías, grupos
• Ayudar a los visitantes a encontrar lo que buscan
• Aumenta tu tasa de conversión
• Disminuya su tasa de rebote
• Haga que su sitio web se vea limpio y organizado.

Entonces, si está ejecutando un gran sitio web en línea, debe agregar un menú desplegable en su sitio. Ahora, aprendamos cómo hacer un menú desplegable en WordPress.

Cómo crear un menú desplegable en WordPress con funciones predeterminadas

Crear un menú desplegable en WordPress es muy fácil. No es necesario agregar ningún código adicional ni nada. Simplemente arrastre y suelte los elementos del menú de forma organizada y tendrá un menú desplegable.

Nota: Estamos preparando este tutorial utilizando las funciones predeterminadas de WordPress. Sin embargo, puede agregar un menú desplegable usando el tema que está usando. Pero primero, debe averiguar si ese tema le permite agregar un menú desplegable. Debe leer sus características y documentación, ya que muchos temas permiten que solo sus usuarios premium agreguen un menú desplegable.

Estos son los pasos que debe seguir para crear un menú desplegable en WordPress.

Paso 1: crea un menú vacío

En primer lugar, debe crear un menú vacío. Para eso, inicie sesión en su tablero de WordPress y vaya a Apariencia -> Menú. Luego haga clic en la opción Crear un nuevo menú .

Después de eso, debe darle a su menú un nombre propio y hacer clic en el botón Crear menú para finalizar.

Paso 2: agregue elementos de menú a su menú recién creado

Después de crear su menú, debe agregar elementos de menú. En el lado izquierdo, verá que todas las publicaciones y páginas se enumeran una por una. Marque los elementos del menú que desea agregar, haga clic en el botón Agregar al menú y los elementos se agregarán al menú.

Esto agregará los elementos del menú en una fila.

Paso 3: crea el menú desplegable

Después de crear el menú, ahora es el momento de crear el menú desplegable. Pero primero, debe elegir el menú principal. En nuestro caso, estamos eligiendo Lista de tiendas como elemento del menú principal, mientras que Tienda y Administrador de tiendas como elemento del submenú.

Todo lo que necesita hacer es arrastrar y soltar los elementos del menú debajo de la Lista de tiendas y simplemente moverlo ligeramente hacia la derecha. Se convertirá en un subelemento.

De esta manera, puede crear tantos menús desplegables como desee.

Paso 4: elija una ubicación para su menú

A medida que crea un nuevo menú, debe elegir la ubicación de su menú. Cada tema de WordPress define sus propias ubicaciones de menú, que verá en la columna de la derecha, en "Configuración del menú". Simplemente marque la casilla junto a la ubicación que desea usar y luego haga clic en el menú 'Guardar'.

Paso 5: Publique su nuevo menú desplegable

Estas casi listo. Ahora necesitas publicar tu menú. Si está personalizando el menú en vivo, sus usuarios ya pueden ver los cambios. Pero si está creando un nuevo menú, debe hacer clic en el botón Guardar menú para publicar el menú desplegable.

Felicitaciones, ha creado un menú desplegable en su sitio de WordPress.

Bono 01: Cómo personalizar el menú desplegable

Si desea un menú desplegable más personalizado y personalizado con las opciones predeterminadas, puede seguir estos simples trucos:

a) Adición de enlaces personalizados

Si desea un menú desplegable que incluya todas las categorías de su sitio web, puede crear un enlace personalizado. Simplemente haga clic en la pestaña Enlace personalizado y use "#" como URL y "Categorías" o algo similar para la etiqueta.

A continuación, puede agregar las categorías como el elemento del submenú en el enlace personalizado. Se podrá hacer clic en cada categoría, pero no en el menú.

b) Administrar la personalización con Vista previa en vivo

Mientras crea su menú desplegable, verá un botón Administrar con vista previa en vivo .

Este botón le permitirá ver los cambios del menú en vivo. Al colocar su menú, será bueno ver los cambios en la parte delantera.

c) Use CSS para personalizar aún más el menú desplegable

Esto no es para principiantes. Pero si tiene conocimientos de codificación, puede incorporar esos conocimientos agregando su propia personalización al menú desplegable.

Puede usar CSS para personalizar aún más el menú desplegable. Simplemente haga clic en el botón Opciones de pantalla y elija la opción de clase CSS,

Esto agregará una clase CSS a los elementos del menú. Puede agregar su clase CSS aquí y personalizará el menú.

Bono 02: Cómo usar el código para agregar un menú desplegable

Si desea usar código para crear un menú desplegable en WordPress, puede agregar el siguiente código en el archivo function.php de su tema.

Para mostrar todas sus publicaciones, deje el "-1" en su lugar. Para mostrar diez publicaciones, por ejemplo, reemplaza el "-1" con el número "10".

 $args = array( 'numberposts' => -1);?> <form action="<? bloginfo('url'); ?>" method="get"> <select name="page_id"> <?php global $post; $args = array( 'numberposts' => -1); $posts = get_posts($args); foreach( $posts as $post ) : setup_postdata($post); ?> <option value="<? echo $post->ID; ?>"><?php the_title(); ?></option> <?php endforeach; ?> </select> <input type="submit" name="submit" value="view" /> </form>

Así es como se verá el menú:

Preguntas frecuentes sobre cómo crear un menú desplegable en WordPress

¡Cree un menú desplegable de la manera correcta!

Después de leer nuestro artículo, estamos seguros de que te has convertido en un experto en la creación de un menú desplegable para tu sitio de WordPress.

Crear un menú es necesario para cada sitio web. Pero si no lo hace con cuidado, arruinará su sitio web. WordPress facilita la administración de sitios web. Te da la opción de crear tu propio menú.

Hemos intentado explicar la forma sencilla de crear un menú desplegable en WordPress. Siga los pasos cuidadosamente y cree su propio menú desplegable personalizado para su sitio.