Manual de Usuario: AOS Tabs Mega Menu v2.2

Introducción

¡Bienvenido a AOS Tabs Mega Menu!

Este plugin ha sido diseñado para transformar la navegación estándar de WordPress en una experiencia de usuario rica, organizada e intuitiva. Olvídate de los menús desplegables largos y confusos. Con nuestro constructor visual, podrás crear mega menús complejos, anidados y con pestañas, permitiéndote mostrar grandes cantidades de información de forma limpia y accesible.

Este manual te guiará a través de todas sus características, desde la creación de tu primer menú hasta la personalización de cada detalle estético.

Instalación y Activación

La instalación sigue el procedimiento estándar de WordPress:

1. Ve a Plugins → Añadir nuevo en tu panel de WordPress.

2. Haz clic en Subir plugin.

3. Selecciona el archivo .zip del plugin y haz clic en Instalar ahora.

4. Una vez instalado, haz clic en Activar plugin.

Verás una nueva opción en tu menú de administración llamada «AOS Tabs Mega Menus». ¡Ya estás listo para empezar!

Manejo del Plugin: Paso a Paso

1. Creando tu Primer Menú

Todo comienza en la pantalla principal del plugin.

• Añadir un Menú: Ve a AOS Tabs Mega Menus → Añadir nuevo. Dale un título descriptivo a tu menú (por ejemplo, «Menú Principal de Navegación») y haz clic en Publicar. Este título es solo para tu referencia interna.

• Duplicar un Menú: En la lista de menús, puedes pasar el ratón sobre uno existente y hacer clic en Duplicar. Esto crea una copia exacta, ideal para hacer variaciones o pruebas sin empezar de cero.

2. El Constructor del Menú: La Estructura de 4 Niveles

El corazón del plugin es el metabox «Constructor del Menú». Aquí es donde das forma a tu navegación. La estructura se organiza en 4 niveles jerárquicos:

1. Elemento Principal (Nivel 1): Es el enlace visible en la barra de navegación principal. Al pasar el ratón sobre él, se despliega el mega menú.

2. Pestaña (Nivel 2): Son las pestañas (verticales u horizontales) que organizan el contenido dentro del mega menú.

3. Título de Lista (Nivel 3): Encabezados que agrupan listas de enlaces dentro de una pestaña.

4. Enlace Final (Nivel 4): Los enlaces individuales que forman el submenú, debajo de un Título de Lista.

Acciones Disponibles:

• Añadir (): Cada nivel tiene un botón para añadir un elemento hijo (un Elemento Principal añade Pestañas, una Pestaña añade Títulos de Lista, etc.).

• Editar (): Abre una ventana modal donde puedes modificar el Título, la URL, el Icono y otras opciones específicas de ese elemento como elegir si las pestañas de ese elemento en concreto se mostrarán en formato Horizontal o Vertical. Esto te da un control total para combinar diferentes estilos en una misma barra de navegación.

• Eliminar (): Borra el elemento y todos sus hijos.

•  Arrastrar y Soltar (Drag & Drop): ¡Di adiós a los campos numéricos! Ahora puedes reordenar cualquier elemento simplemente haciendo clic y arrastrando desde el icono de agarre que aparece a la izquierda de cada título. Esto funciona en los 4 niveles del menú, permitiéndote reorganizar la estructura de forma visual y ultrarrápida.
• Bloques Colapsables: Para menús muy largos, ahora puedes contraer y expandir cada Elemento Principal (Nivel 1). Simplemente haz clic en la flecha junto al icono de agarre. Esto te permite ocultar el contenido de un bloque para centrarte en los demás y facilitar la reordenación. El estado (contraído o expandido) se guardará con tu menú.
•  
•  

3. Personalización: El Panel de Opciones de Diseño

Aquí es donde das vida y personalidad a tu menú. El panel está organizado en 4 secciones colapsables para que encuentres fácilmente lo que buscas.

Opciones Generales

Controlan el aspecto global del contenedor del mega menú.

• Ancho Mínimo Contenido: Define el ancho mínimo en píxeles del área de contenido.

• Estilos del Contenedor: Personaliza el Borde, Radio del Borde (para esquinas redondeadas) y la Sombra para dar profundidad.

Estilos Menú Principal (Nivel 1)

Afecta a los enlaces de la barra de navegación principal. Puedes definir colores de fondo y texto para tres estados:

• Normal: Apariencia por defecto.

• Hover: Cuando el ratón pasa por encima.

• Activo: Cuando el mega menú está desplegado.

Estilos Pestañas (Nivel 2)

Controla el aspecto de las pestañas dentro del mega menú.

• Estilo de Pestaña: Elige entre Clásico (estilo pestaña tradicional) o Botón.

• También puedes definir colores para los estados Normal (Inactivo), Hover y Activo.

Estilos Contenido (Nivel 3 y 4)

Personaliza el texto dentro del área de contenido.

• Títulos de Lista (Nivel 3): Ajusta el color, tamaño de fuente, negrita y, como novedad, un Estilo de Viñeta (círculo, cuadrado, etc.).

• Enlaces Finales (Nivel 4): Controla el color, tamaño y negrita.

• Estilos Submenú (Nivel 4): Define la Sangría Izquierda en píxeles y el Estilo de Viñeta para diferenciar visualmente los sub-enlaces.

4. Publicando tu Menú: El Shortcode

Una vez que has construido y diseñado tu menú, el último paso es mostrarlo en tu web. En el metabox «Shortcode», encontrarás un código similar a este: [aostmm_menu id="123"].

• Copia este shortcode.

• Pégalo en cualquier página, entrada, widget o constructor visual (Elementor, Divi, etc.) donde quieras que aparezca el menú.

¡Eso es todo! El plugin se encargará de renderizar el menú con toda la estructura y estilos que has configurado.

Casos de Uso y Recomendaciones

Ejemplos de Aplicación

• Tienda Online (E-commerce): Ideal para mostrar un catálogo extenso.

  • Elemento Principal: «Productos».

  • Pestañas: «Ropa», «Calzado», «Accesorios».

  • Títulos de Lista: Dentro de «Ropa», podrías tener «Camisetas», «Pantalones», «Abrigos».

• Sitio Web Corporativo o de Servicios: Para organizar una amplia oferta de servicios.

  • Elemento Principal: «Nuestros Servicios».

  • Pestañas: «Marketing Digital», «Diseño Web», «Consultoría SEO».

  • Títulos de Lista y Enlaces: Detallar cada uno de los servicios específicos.

• Blog o Portal de Noticias: Para organizar las categorías de forma visual.

  • Elemento Principal: «Categorías».

  • Pestañas: «Viajes», «Tecnología», «Gastronomía».

  • Títulos de Lista: Subcategorías como «Europa», «Asia», etc.

Recomendaciones de Buenas Prácticas

• Menos es más: Aunque el plugin es potente, no sobrecargues los menús. Una buena navegación debe guiar, no abrumar.

• Coherencia Visual: Utiliza el panel de estilos para que el diseño del menú se integre a la perfección con la identidad visual de tu marca.

• Los Iconos como Guía: Usa los iconos de forma sutil para ayudar al usuario a identificar rápidamente las secciones principales.

• ¡Prueba en Móvil!: El menú es responsive, pero siempre es buena idea verificar cómo se ve y se comporta en dispositivos móviles para asegurar la mejor experiencia.

• Guarda con Frecuencia: Acuérdate de hacer clic en «Actualizar» para guardar tus cambios en la estructura y el diseño.