Tutorial Divi: Mega menú de productos WooCommerce con imágenes destacadas

Divi mega menú de estilo

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

Un mega menú es un tipo de menú que contiene muchas opciones presentadas en formato desplegable. 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 (tiendas en línea y sitios corporativos) para ayudar a los visitantes a localizar rápidamente el contenido que desean. 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 crear menús básicos, negociar con su herramienta puede resultar complicado a medida que el tamaño de los menús crece. Por eso hemos recopilado 11 de los mejores plugins gratuitos y premium de WordPress para configurar y añadir mega menús a tu sitio web.

Con más de 300.000 instalaciones activas hasta la fecha, Max Mega Menu es el plugin de mega menús líder del directorio de plugins de WordPress y el preferido de 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.

Mega menú pixel Divi

Definitivamente el mejor plugin que he utilizado, vi el video y entendí cómo hacerlo. Me alegré de que hay muchas opciones para la personalización flexible del menú de hamburguesa, usted puede hacer la navegación de superposición a pantalla completa. ¡Eso es lo que necesito!

  Como añadir imágenes destacadas por categoría

Tal vez soy tonto, pero ¿alguien puede decirme cómo funciona este plugin? Se ve bien en los anuncios, y tienen diseños prediseñados en una biblioteca, pero no me las arreglé para conseguir que funcione. Primero se negó a instalar, a pesar de que compré la licencia, y luego tuve problemas para entender la configuración y cómo funciona. Intenté contactar con el autor pero no hubo respuesta. Yo sólo quería tener un simple menú de hamburguesa, para ser utilizado en un Onepage WP-sitio. No funcionó. Me di por vencido después de muchas horas de trabajo y Youtube-viendo.

Tuve un par de problemas para configurar la integración después de actualizar a la versión Pro, así que envié un ticket y el apoyo fue excelente. Solucionaron los problemas que tenía y el menú quedó genial.

¡El mejor plugin de mega menú de la historia! He estado creando sitios para mis clientes utilizando el plugin desde la primera versión. El plugin ha evolucionado y un montón de nuevas características para crear mega menús se han añadido durante este tiempo.

Diseño de mega menú Divi

Por último, debemos destacar la integración con el panel de control del personalizador. Esta es una característica que sólo está disponible en la versión premium megamenú y es una característica importante si va a incluir este plugin en su proyecto temas, ya que esto le permite a usted ya sus usuarios finales para ajustar todo el esquema de color del menú o la configuración de diseño y ver el efecto de que los cambios en tiempo real.

  Imágenes WebP desde WordPress 5-8

1. Sticky navbar no funciona correctamente. Crea una barra de desplazamiento inesperada en los dispositivos móviles y oculta algunos de sus elementos de menú. Al final, decidí desactivarla y codificarla yo mismo para hacerla pegajosa.

4. El plugin te obliga a usar ciertas fuentes. Para mí es innecesario tener una fuente personalizada para la barra de navegación, pero si es necesario, entonces por lo menos nos dan la opción de utilizar una fuente heredada en su lugar. Si no estableces la fuente en el campo de entrada, entonces saldría “font-family: 0” porque el autor no comprobó si el campo estaba vacío sino que asignó el valor directamente. Esto resulta en un mal estilo y no es bueno para la semántica.

Motor Divi mega menú

Los mega menús son un patrón de diseño común en los grandes sitios 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 post, 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 ejecuta un sitio web grande, y plugins para ayudarle a implementar mega menús.

Usé el plugin Recent Posts Widget With Thumbnails para añadir las últimas entradas. Para conseguir que se alinearan 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.

  Cómo mostrar imágenes del antes y el después con efecto deslizante

UberMenu ofrece un control mucho más preciso sobre tus mega menús. Cada elemento del menú se puede personalizar. También hay un panel de control global donde algunas opciones se pueden establecer y heredar, por ejemplo, los tamaños de imagen 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 item “Dynamic Posts” tiene algunas consultas avanzadas de WP incorporadas. Si hubiera querido, podría haber filtrado por categoría, cambiado el orden de clasificación o excluido entradas.