Como hacer un mega menu en wordpress

Cómo usar el mega menú máximo en wordpress

Los mega menús son un patrón de diseño común en los sitios grandes de WordPress. Estos sitios pueden tener una arquitectura de información compleja con muchas secciones y subsecciones diferentes. Al agrupar enlaces similares, los mega menús facilitan al usuario la búsqueda rápida de información relevante.

En este artículo, vamos a echar un vistazo a ejemplos de sitios de WordPress que utilizan mega menús, por qué vale la pena explorar como una opción si usted tiene un sitio web grande, y los plugins para ayudarle a implementar mega menús.

He utilizado el plugin Recent Posts Widget With Thumbnails para añadir las últimas entradas. Para conseguir que se alineen horizontalmente, utilicé un widget en un diseño de una columna más algo de CSS. La única razón por la que las imágenes no se alinean perfectamente es que tienen diferentes alturas.

UberMenu da un control mucho más fino sobre sus mega menús. Cada elemento del menú se puede personalizar. También hay un panel de control global donde se pueden establecer algunas opciones y heredar, por ejemplo, los tamaños de las imágenes por defecto.

Esto fue mucho más fácil que hacer lo mismo en Max Mega Menu ya que pude elegir un diseño automático de tres columnas. El elemento "Dynamic Posts" tiene algunas consultas avanzadas de WP incorporadas. Si hubiera querido, podría haber filtrado por categoría, cambiar el orden de clasificación o excluir publicaciones.

Mega menú elementor gratis

Los menús desempeñan un papel importante en el diseño y la funcionalidad de su sitio web. Ayudan a los visitantes a navegar entre sus páginas y pueden mejorar la usabilidad general. Sin embargo, cuando se tiene mucho contenido, puede ser difícil encontrar la forma de mostrarlo sin que parezca un caos.

Ahí es donde entran los mega menús. Un mega menú de WordPress puede dar a su sitio web una apariencia más profesional y ayudar a la gente a encontrar el contenido que están buscando más fácilmente. Además, hay varios métodos que puedes utilizar para añadir uno a tu sitio web.

En este artículo, explicaremos qué es un mega menú y las ventajas de utilizarlo en WordPress. A continuación, te guiaremos a través de tus opciones para crear uno y exploraremos cinco de las mejores opciones de plugins de mega menú.

Por defecto, WordPress utiliza menús estándar, que muestran una lista de páginas, a veces con desplegables de una columna. No hay información o contenido adicional como imágenes, descripciones, etc. - es sólo una serie de listas. Suele ser bastante simple y sencillo, pero te limita en cuanto al número de páginas o al volumen de información que puedes incluir. Aquí hay un ejemplo de WooCommerce:

Megamenú máximo

...Sí, probablemente. Sin embargo, una mala navegación puede ser el talón de Aquiles de un sitio web de calidad. La facilidad de navegación es una de las características más útiles de un sitio web; si el suyo carece de ella, es suficiente para enviar a alguien a un competidor con mejor UX.

Un megamenú es un tipo de menú que contiene muchas opciones presentadas en un formato desplegable o flyout. Este es un ejemplo de un sitio de turismo canadiense, que agrupa sus enlaces de navegación en categorías:

Los mega menús se utilizan en sitios web de gran tamaño (piense en tiendas online y sitios corporativos) para ayudar a los visitantes a localizar rápidamente el contenido deseado. Un mega menú también puede contener otros tipos de contenido, como una barra de búsqueda, imágenes o vídeos, y/o elementos interactivos.

Aunque WordPress permite construir menús básicos, negociar su herramienta puede ser un reto a medida que el tamaño de su menú crece. Por eso hemos recopilado 11 de los mejores plugins gratuitos y premium de WordPress para configurar y añadir megamenús a tu sitio web.

Con más de 300.000 instalaciones activas hasta la fecha, Max Mega Menu es el principal plugin de mega menús del directorio de plugins de WordPress y el preferido por muchos administradores. La versión gratuita de este plugin se integra con el constructor de menús nativo de WordPress, permitiéndole añadir un flyout o mega menú a su sitio web.

WordPress mega menú sin plugin

Deberías tener algo como la imagen de abajo. Añade tantos sub-elementos como necesites. Nosotros hemos utilizado enlaces personalizados, pero lo normal sería utilizar páginas o entradas reales, o una combinación de páginas, entradas, categorías, etc.

Como ves estamos empezando a mostrar el mega menú para pantallas que tienen al menos 600px de ancho. No tiene sentido mostrarlo para pantallas más pequeñas. Utiliza tu estilo móvil por defecto para pantallas <600px. También estamos mostrando el mega menú al pasar el ratón por encima. Si su tema muestra los submenús al hacer clic, ajuste el código en consecuencia.

Es importante dar position:static; al elemento de menú de nivel superior. De esta manera, el submenú absolutamente posicionado abarcará el 100% del ancho del primer contenedor antecesor que tenga position:relative; . Así que asegúrate de dar position:relative a la cabecera del sitio o a cualquier otro contenedor que te convenga. Si el menú de nivel superior hubiera tenido position:relative; entonces el megamenú sería sólo tan ancho como el elemento de menú de nivel superior.

Esta línea grid-template-columns: repeat(auto-fit,minmax(50%, 1fr)); indica a .sub-menu (clase de sub-navegación de WP por defecto) que todos sus hijos inmediatos se mostrarán como 2 columnas de igual anchura en pantallas de más de 600px de ancho, como 3 columnas de igual anchura en pantallas de más de 992px de ancho, etc. Puede editar los puntos de ruptura para adaptarlos a sus necesidades.