Creación de Mega Menús en Divi | Scoreapps

Creación de Mega Menús en Divi

Los mega menús son una excelente manera de consolidar tus elementos de menú excesivos.




Los Mega Menús  permiten a los usuarios ver más enlaces al mismo tiempo sin la molestia de tener que desplazarse, pasar el cursor o recordar el contenido del menú.

Los Mega Menús pueden pensarse como menús desplegables dentro de otros menús desplegables. A diferencia de un menú desplegable estándar, que solo muestra un submenú al pasar el cursor sobre un enlace principal en la barra de navegación, un mega menú te permite tener enlaces principales adicionales y submenús dentro del mismo menú desplegable.

Esto ofrece una experiencia de navegación más organizada y completa para el usuario.

Cómo agregar un Mega Menú a tu barra de navegación

1. Accede al panel de WordPress

Ve a Apariencia → Menús.

WordPress Menus page

 2. Crea un menú con cuatro enlaces principales, y  debajo de cada uno, añade tres subelementos.
  1. Por ejemplo: Estoy añadiendo tres elementos de submenú debajo de cada uno de los cuatro enlaces principales del menú.

Organize the menu items

 3.  Crea un enlace adicional que servirá como el  enlace principal del mega menú. En este ejemplo, se llama "Features" (Características). Luego, arrastra los cuatro enlaces principales del menú (cada uno con sus submenús) debajo del enlace Características.

Build the menu strucutre

4. Para crear un Mega Menú, necesitas agregar una clase CSS especial llamada mega-menu al enlace principal de nivel superior. Para hacerlo, haz clic en el enlace Opciones de pantalla en la parte superior de tu página y asegúrate de que la opción Clases CSS esté marcada. Esto te permitirá añadir la clase necesaria a tu enlace y crear un Mega Menú fácilmente.

Enable the CSS class

5. Habilitar la clase CSS

Agrega  la clase CSS mega-menu al enlace Características que creaste. Haz clic en la flecha a la derecha del elemento del menú Características para desplegar las opciones adicionales de configuración. Busca el cuadro de texto Clases CSS y escribe la clase mega-menu.

Agregar la clase CSS al ítem del menú

Adding the CSS class to the menu item

Cuando recargues la página, verás que todos esos menús anteriores ahora se han agrupado en un solo menú gigante bajo este enlace, el Mega Menú.

Mega memu example

    • Popular Articles

    • Guía de Negocio para Partners

      PLAN DE NEGOCIO: Tu Agencia de IA en 30 días (Documento Confidencial para aspirantes a Partner) Lo que estás a punto de ver es el primer Sistema Multi-agente de IA para Pymes. Puede crearte Webs en minutos, Empleados de IA, Automatizar Blogs, Redes ...
    • Ver una Demo de Scoreapps para Resellers

      En este vídeo te explicamos el modelo de negocio, los tipos de Apps que puedes crear y las distintas herramientas que incluye Scoreapps en su Plan de Resellers: Y en este otro vídeo te enseñamos cómo funciona el software por dentro:
    • Proporciona acceso a tus Aplicaciones

      Con el Plan Reseller o Plan Partner puedes otorgar fácilmente a tus clientes o colaboradores acceso a tus aplicaciones. Accede a tu Panel de Apps, y después accede a cualquier Aplicación: Una vez dentro del constructor de Apps, ve a Mi Cuenta - ...
    • Cómo Crear una App de Tienda

      El comercio electrónico desde dispositivos móviles se disparó desde comienzos de 2020 debido a la Pandemia del Covid19 y sigue creciendo a tasas del 45% anual. Hoy en día, contar con una App de Tienda resulta imprescindible para cualquier negocio de ...
    • Cómo diseñar la pantalla de inicio o portada de una App

      En el video que te mostramos a continuación te explicamos cómo diseñar la pantalla de inicio de una App:
    • Related Articles

    • El Módulo de Menú de Divi

      Cómo agregar, configurar y personalizar el módulo Menú de Divi. El Módulo Menú de Divi te permite colocar un menú de navegación en cualquier parte de tu página. Puedes usar este módulo para añadir una navegación secundaria en el diseño de la página, ...
    • El módulo de menú de ancho completo de Divi.

      Cómo añadir, configurar y personalizar el módulo de menú de ancho completo de Divi <br> El módulo de menú de ancho completo de Divi te permite colocar un menú de navegación de ancho completo en cualquier parte de tu página. Puedes usar este ...
    • Cómo crear sitios web de una sola página con Divi

      Divi facilita la creación de hermosos sitios web de una sola página. <br> La navegación lateral de una sola página de Divi lo hace fácil Cuando creas una nueva página, puedes activar fácilmente la opción de navegación por puntos de Divi, dando ...
    • Uso de las Opciones de Tamaño en Divi

      Las Opciones de Tamaño de Divi facilitan el ajuste del tamaño de secciones, filas, columnas y módulos en Divi. Las Opciones de Tamaño de Divi hacen que ajustar el tamaño de secciones, filas, columnas y módulos sea sencillo. El tamaño es una parte ...
    • El módulo de migas de pan de Divi Woo

      Cómo agregar, configurar y personalizar el módulo de migas de pan de Divi Woo. El módulo Divi Woo Breadcrumbs se integra con WooCommerce y ayuda a los clientes a navegar fácilmente por tu tienda. Usar Woo Breadcrumbs en tu tienda en línea ayudará a ...