Los mega menús son un elemento de diseño popular que puede darle a su Sitio web un estallido de elegancia mientras ofrece visitantes una capa de navegación adicional. Hay varias formas de agregar mega-menús a Divi. Uno de los métodos más fáciles que he usado esun complemento de terceros llamado Divi Mega Pro .

Divi Mega Pro facilita la creación de mega menús con Divi Builder. Cada menú se puede agregar a cualquier elemento usando una clase CSS. Esto significa que puede agregar un diseño Divi a cualquier enlace en el menú, pero puede ir más allá y agregarlos a cualquier elemento de un diseño Divi simplemente agregando una clase CSS.

Es ideal para crear menús y ventanas emergentes con módulos de tienda, imágenes, controles deslizantes, carteras, íconos, propaganda, videos, blogs, etc. También funciona con Extra.

Crea un Mega Menú Mega Pro

El menú Divi Mega Pro se agrega al menú del tablero. Aquí puede ingresar su clave de licencia, ver los menús que ha creado y crear un nuevo menú. Cuando haga clic para agregar un nuevo menú, verá un editor para el tipo de publicación del menú. La pantalla es simple, pero aquí están pasando muchas cosas.

Editorial - puede crear el megamenú o una información sobre herramientas con Divi Builder.

Fondo Mega Pro - puede seleccionar los colores de fondo y fuente.

Ver ubicaciones - elija todas las páginas o nombre páginas específicas, luego ingrese excepciones.

Mega Pro Animation - seleccione una animación. Elija entre desplazamiento, desplazamiento, perspectiva, fundido o escala.

Mega Pro Triggers - agregue un disparador como selector de CSS. Una vez que lo guarde, verá la clase CSS que va a pegar en el campo de clase CSS de un elemento de menú, módulo, fila o sección. Esto es lo que se hace clic o se coloca sobre para mostrar el menú. Todo se puede utilizar como disparador y no solo como elemento de menú. Esto significa que también puede utilizar Divi Mega Pro para crear ventanas emergentes o información sobre herramientas.

Configuración de pantalla Mega Pro : elija la dirección de visualización (superior o inferior), introduzca los márgenes superior e inferior en píxeles, elija un porcentaje de ancho y active una flecha. La activación de la flecha revela más personalizaciones en las que puede elegir el tipo de flecha (triangular o redonda), elegir el color, establecer el ancho y la altura y obtener una vista previa de la flecha.

personalizaciones el botón cerrar: activa el botón cerrar en el escritorio o en el móvil y personaliza el botón cerrar. Si lo habilita, se previsualizarán las personalizaciones para el color del texto, el color de fondo, el tamaño de fuente, el radio del borde, el relleno y la visualización.

Parámetros adicionales Mega Pro - elija el tipo de disparador (desplazado o pulsado), el tipo de salida (desplazado o pulsado) e introduzca el retardo de salida.

Modelos Divi Mega Pro

El desarrollador ha proporcionado varios modelos para Divi Mega Pro. Cuando compra el complemento, estas plantillas están disponibles en su cuenta, en la pestaña Plantillas de diseño del complemento. Estos son excelentes para ayudarlo a comenzar a diseñar sus mega menús. Usaré algunos en mis ejemplos.

Menú Divi Mega Pro

Una vez que cree un mega menú, aparecerá en la lista. Aquí puede editar, editar o eliminar rápidamente los menús. También puede buscar, filtrar por fecha, ver por estado, etc. También proporciona la clase Mega Pro única para que pueda copiarlos desde aquí en lugar de abrir cada uno para obtener la clase.

Cuando copie la clase, asegúrese de pegarla sin espacios adicionales. De lo contrario, todos los megamenús de la página ya no funcionarán.

Estoy seguro de que no sería fácil de agregar, pero una función de copia y edición sería útil. Puede guardar los diseños de Divi en su biblioteca para reutilizarlos, pero esto no incluye la configuración circundante.

Agregar un disparador

En el campo Mega Pro Triggers, verá una sola clase Mega Pro. Cópielo y péguelo en el campo Clase CSS del elemento que desea usar como disparador.

Para agregar el campo Clase CSS a un elemento de menú, debe habilitar las clases CSS. En la pantalla del menú, seleccione Opciones de pantalla y habilitar clases de CSS.

Pegue la clase CSS en el campo del menú. Ahora, este elemento de menú mostrará el mega menú al pasar el mouse y lo llevará a la página al hacer clic.

Notará que Divi Mega Pro también es una opción en las opciones de enlace del menú. Son excelentes para agregar un elemento de menú al menú que en realidad no va a ninguna parte. Agregue la clase CSS como cualquier otro elemento del menú.

Sección de contacto en el mega menú.

El menú se abre al pasar el mouse. Siempre puedo hacer clic en el enlace de Contacto para abrir la página de contacto si quiero. Si solo quisiera que se muestre el mega menú, podría usar el enlace del menú principal de Contacto y cambiarle el nombre (como en el ejemplo anterior).

En este, cambié los colores ligeramente usando la configuración de fondo y pantalla en lugar de usar Divi Builder. Agrega una barra en la parte inferior del menú.

Llamada a la acción simple con columnas de menú

Este es uno de los modelos que agrega múltiples columnas. Hago ajustes a los colores de fondo y fuente. También agregué una flecha e hice el ancho del 75%.

Las opciones de color de fondo y fuente agregan un poco más para que se destaque. Dejé la alineación predeterminada, que coloca el menú a la derecha de la pantalla. Puede ajustar la posición en la configuración.

fichas

La plantilla de pestaña incluye un módulo de código con jQuery para crear el efecto de desplazamiento.

Agregué contenido a las pestañas y las adapté al sitio. Cada uno de los enlaces de la izquierda muestra una pestaña diferente en la mayor parte del menú.

Configuraciones Info Bubbles

Para este, agregué la clase CSS a una propaganda para que abra una pequeña ventana emergente al pasar el mouse. La ventana emergente es solo una imagen con una sombra debajo.

En la imagen de arriba, mi mouse está sobre las palabras SITIO WEB EN VIVO. Aún no he ajustado la posición, pero es fácil hacer que aparezca en cualquier lugar que desee.

Para este, creé una ventana emergente para mostrar una imagen con algo de texto. Configuré la dirección de visualización en Baja y, para que aparezca junto a la imagen que quiero agregar, agregué un margen de -300.

La ventana emergente ahora aparece a la izquierda y en la parte superior de la imagen cuando coloco el cursor sobre ella. Agregué color de fondo transparente, color de borde, relleno y contorno redondeado.

Licencia y documentacion

Usted tiene la opción entre cuatro licencias:

• Un solo sitio - $ 15 por año
• Tres sitios - $ 29 por año
• Sitios ilimitados - $ 59 por año
• Vida útil ilimitada: $ 129 por única vez

Documentación se proporciona mediante una demostración en video y un artículo en el sitio explica las características y explica, paso a paso, cómo usar el complemento.

[vc_row center_row=”sí”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DESCARGAR TEMA DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/filiales/idevfiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DESCARGAR EL TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Otros tutoriales de Divi

• 5 sitios web para su uso restaurante temático Divi
• Cómo agregar texto en un producto Divi WooCommerce
• Cómo cambiar el color del menú entre páginas Divi
• Cómo personalizar las cuadrículas de un blog con Divi
• Cómo utilizar la función de editor Divi en WordPress
• Cómo crear un control deslizante Divi a pantalla completa
• Cómo cambiar el color de los menús entre páginas Divi
• Características que probablemente no conozcas sobre Divi
• Cómo usar Divi Builder en WordPress
• Cómo usar el módulo de desplazamiento de video Divi
• Cómo usar el módulo Divi Builder Flip
• Cómo agregar un módulo testimonial en Divi Builder
• Cómo usar el módulo de texto Divi
• Cómo crear un control deslizante en Divi
• Cómo editar un rol de usuario Divi
• Cómo usar el módulo de Divi Social Media
• Cómo usar el módulo de tienda en el tema WordPress Divi
• Cómo usar el módulo de la barra lateral Divi
• Cómo usar el Módulo Divi Price Table
• Cómo usar el módulo de título de las publicaciones de Divi
• Cómo agregar un módulo de video de Divi
• Cómo usar el módulo de navegación del artículo
• Cómo usar el módulo de búsqueda Divi
• Cómo usar el módulo Divi wallet
• Cómo usar el módulo de persona en Divi Builder
• Cómo usar el módulo de billetera con filtro Divi
• Cómo usar el módulo deslizante de ancho completo
• Cómo usar el Módulo de imagen Divi Builder
• Cómo utilizar el módulo de navegación de ancho completo de Divi Builder
• Cómo usar el módulo de la galería de imágenes
• Cómo utilizar el módulo de tarjeta de ancho completo de Divi Builder
• Cómo utilizar el módulo de cartera de ancho completo de Divi
• Cómo usar el módulo de encabezado de ancho completo Divi
• Cómo usar el módulo Divi Counter
• Cómo usar el control deslizante de artículos en Divi Builder
• Cómo usar el módulo Divi Email Optin