Crear Mega Menús

Los mega menús se pueden definir como menús desplegables dentro de menús desplegables. Son especialmente útiles cuando su sitio tiene una gran cantidad de secciones hacia las cuales necesita enlazar desde el menú principal. Para no sobrecargar el menú con varias líneas y sus correspondientes menús desplegables, tendrá la opción de crear un bloque completo de hasta cuatro columnas como submenú único que puede contener ilimitados enlaces.

Divi - Menú estándar

En este ejemplo, los elementos del menú “Qué hacemos” y “Más información” son menús desplegables independientes, pero con la característica mega menú puede agruparlos para que aparezcan como un solo menú desplegable dentro del elemento “Quiénes somos”.

En primer lugar, deberá tener creado el menú y asignado a la ubicación Menú principal, desde la opción Apariencia > Menús del administrador de WordPress.

Divi - Estructura de mega menú

Traslade los elementos “Qué hacemos” y “Más información” a la posición de subelementos de “Quiénes somos”, arrastrando y soltando los bloques como se muestra en la siguiente imagen.

Divi - Mover elementos de mega menú

Los bloques completos ahora son subelementos del elemento del menú “Quiénes somos”. Para transformarlo en mega menú, deberá añadir la etiqueta mega-menu a la clase CSS personalizada de este elemento y luego hacer clic en Guardar menú.

Divi - Clase CSS de mega menú

Si no ve el campo Clases CSS (opcional) en las propiedades del elemento del menú, deberá seleccionar la casilla correspondiente en las Opciones de pantalla de la parte superior del administrador de WordPress.

Divi - Activar clases CSS de menú

Una vez guardado el menú, los elementos trasladados a “Quiénes somos”, aparecerán en el sitio como elementos del mega menú.

Dos elementos más, “Portfolio” y “Otros proyectos”, se crearon para colocar dentro de “Quiénes somos” y así completar las cuatro columnas, para una distribución uniforme en el mega menú.

Divi - Mega menú

Vea el vídeo tutorial en el cual se muestra paso a paso la creación de un mega menú aquí (en inglés).

Facebook
Google+
Twitter
LinkedIn
WhatsApp
Skype
Enviar por correo
Imprimir

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *