Cómo crear mega menú en Elemoror

El WordPress más complejo viene con la necesidad de un menú más completo. Una de las opciones populares para hacer el menú más completo es el mega-menú. Los mega menús son grandes menús extensibles en los que todo es visible simultáneamente. Como sabemos, los sitios web más populares usan esta función en sus sitios, lo que significa que los mega menús son muy útiles. Hasta que se haga este artículo, Elementor no acepta la creación de mega menús, por lo que necesitará la ayuda de suplementos de tercera parte. Hay muchos suplementos para Elementor en WordPress Plugin Director para crear un menú Mega, pero algunos suplementos no son flexibles. En este tutorial, le mostraremos cómo crear un mega menú en Elementor con Crocoblock. Jetmenu hará que sea mucho más fácil procesar mega menús.

contenido
Cómo crear mega menú en Elemoror usando JetMenu
Paso 1: Configure un menú de WordPress existente
Paso 2: Configurar la configuración de JetMenu
Paso 3: Habilitar jetmenu y establecer el elemento del menú de mega
Paso 3: Menú Mega de diseño en Elementor
Paso 4: cree una plantilla de encabezado usando temas constructor de elementor pro
conclusión
Cómo crear mega menú en Elemoror usando JetMenu Hay tres complementos que debe instalar antes de comenzar el tutorial, de la siguiente manera:
elemento
Elementor Pro (Elementor Pro se requiere cuando desea crear una plantilla de encabezado personalizada usando el constructor de temas)
JetMenu (puede comprar JetMenu para un solo complemento o comprar un paquete de Crocoblock)
Descargar jetmenu
Paso 1: Configure un menú de WordPress existente ahora, es hora de construir el menú en sí. Antes de ir a la configuración del complemento y comenzar a aplicar cualquier cambio, queremos asegurarnos de que al menos tenga un menú en su sitio de WordPress. Si aún no tiene ningún menú, simplemente crea uno. Puede leer este artículo para averiguar cómo crear un menú en WordPress. Para configurar su menú Menú, conectarse al tablero de WordPress y acceder a los menús Look -> y puede ver el menú existente. En este ejemplo, utilizamos nuestro menú existente “MENA DE MEGA DE Ejemplo”. El menú debe establecerse como el principal/principal. En la configuración del menú, configure la ubicación de visualización en el menú principal o el menú principal. Luego guarde el menú haciendo clic en el botón Menú Guardar.
Paso 2: Configure la configuración de JetMenu para abrir la configuración de JetMenu, inicie sesión en el tablero y acceda a Crocoblock> Jetplugins> JetMenu> Configuración general.

En la parte superior del archivo de configuración general, encontrará algunas opciones, administrador preestablecido, opciones de exportación, opciones de importación y opciones de restablecimiento. En estas opciones, puede ver cuatro opciones, como el estado de la carga de imágenes SVG, la caché de plantilla, el menú de renovación y el menú CSS de caché. La única opción para cambiar aquí es el menú de renovación. Cuando se activa esta opción, todas las configuraciones realizadas en el tablero de jetmenu solo se aplicarán a los menús desde las ubicaciones de WordPress. Entonces, si desea usar el menú anterior con estas configuraciones, mantenga esta opción apagada. Sin embargo, en este tutorial queremos construir un nuevo menú desde cero, como lo haremos en este tutorial, cambiar los Swaters. Puede abrir esas opciones y jugar con esas configuraciones con su creatividad, pero en este tutorial, no cambiaremos nada. Paso 3: Active JetMenu y establezca el elemento del menú Mega. Permitiremos que JetMenu continúe el proceso de creación de MEGA. En el tablero de WordPress, acceda a la apariencia -> menús. Luego abra el bloque de configuración de ubicación de JetMenu y cambie el interruptor de activación de JetMenu para la ubicación actual en el menú principal.

Luego, coloque el cursor sobre un elemento de menú que desea activar el mega meni, luego el botón de configuración aparecerá en el lado derecho del elemento de menú. En este ejemplo, seleccionamos dos elementos de menú como mega disparadores del menú, hay “artículos” y “información”. Haga clic en el botón Configuración “y verá la ventana emergente. En la ventana emergente, verá algunas configuraciones. En este tutorial, configuramos solo para una sola configuración, es decir, la activación de contenido mega. Por lo tanto, cambie el interruptor a la derecha a la opción Use Mega Content. Recuerde hacer clic en el botón Guardar para guardar los cambios. Paso 3: Diseñe el menú Mega en el elemento, luego iniciaremos el editor de elementos, presionaremos el botón Editar contenido y el editor de elementor se abrirá en una ventana.

Ahora, puede crear el menú Mega con su creatividad. En primer lugar, diseñaremos el primer elemento de menú “artículos”. En este ejemplo, comenzamos a crear una sección con dos columnas. Puede elegir cualquier widget deseado en el panel de widgets. Aquí, agregaremos el widget del menú del mega vertical. Escriba el menú del mega verticalmente en el cuadro de búsqueda y luego tírelo y colóquelo en el área de la tela (primera columna).

Aplicamos algunos cambios en la configuración del bloque de la siguiente manera:

Contenido:

Menú: artículos (puede seleccionar el menú existente que se ha creado antes). Debe crear un nuevo menú si no tiene uno y luego volver aquí para continuar el tutorial.


Estilo
Menú principal: configure el ancho del menú principal en 300
A continuación, continuamos en la segunda columna. En este ejemplo, agregaremos las publicaciones de widget que. Seleccione las publicaciones de widget de la barra de menú, luego tire y colóquelo en el área de la tela (segunda columna).
En el conjunto de configuraciones, aplicamos algunas configuraciones a continuación: Contenido -> Publicaciones generales: 6
Columnas: 2

Altura de columnas iguales: Sí

Muestra publicaciones de extracción: no
Mostrar términos de publicación: no
Muestra meta publicaciones: no
Contenido> carrusel
Habilitar carrusel: sí
Pausa al pasar con el mouse: sí
Después de haber terminado de editar, actualice haciendo clic en el botón Actualizar. Cierre la ventana del editor de elementos haciendo clic (x). Cuando vuelva a configurar el elemento del menú, asegúrese de hacer clic en el botón Guardar.
Luego pasamos al segundo elemento del menú “Info”. Haga clic en el botón Editar contenido de mega. Una vez que ingresó a la ventana del editor de elementos, agregue una sección de dos columnas. En la primera columna, agregaremos el widget de Google Maps. Seleccione el widget de Google Maps en la barra de menú, luego tire y colóquelo en el área de la tela (primera columna). En la pestaña Contenido, encontrará algunas opciones para editar la ubicación, el zoom y la altura de los mapas. Entonces, edite la configuración de acuerdo con la preferencia.
A continuación, nos movemos a la segunda columna. En esta columna, agregaremos el formulario de widget, que es uno de los widgets incorporados Elementor Pro. Encuentre ese widget, luego tire y colóquelo en el área de la tela (segunda columna).
Después de haber terminado de editarlo, actualice haciendo clic en el botón Actualizar. Cierre la ventana del editor de elementos haciendo clic (x). Cuando vuelva a configurar el elemento del menú, asegúrese de hacer clic en el botón Guardar.

Paso 4: Cree una plantilla de encabezado usando temas Builder de Elementor Pro Now, es hora de aplicar el mega-menú que acaba de crear como plantilla de encabezado usando el Elementor Pro.

En el tablero, vaya a las plantillas -> Builder de temas. Esto lo llevará a una ventana que contiene muchas opciones para construir la plantilla. Haga clic en la pestaña Encabezado, luego cree una nueva plantilla de encabezado haciendo clic en el botón Agregar nuevo. Verás la biblioteca de encabezado. En este ejemplo, crearemos un encabezado desde cero. Cierre la ventana de la biblioteca e ingresará al editor de elementor. Una vez que haya ingresado al editor de elementor, cree una nueva sección con dos columnas. Usaremos la primera columna para el logotipo del sitio y la segunda columna para el Mega -Meni que acabamos de crear. Seleccione el logotipo del sitio en el panel de widgets, luego tire y colóquelo en el área de la tela (primera columna). Luego seleccione el widget del menú Mega en el panel de widgets y tire y colóquelo en el área de tela (segunda columna).

Entonces es hora de aplicar algunos cambios en el encabezado. Puedes jugar con tu configuración y estilizarla con tu creatividad. Si no tiene idea, puede ver nuestra configuración a continuación: el logotipo del sitio en la pestaña de estilo, configure la altura en menú de 100 mega en la pestaña de estilo, edite la tipografía de artículos y establezca el tamaño en 20

Bueno, estaba hecho. Antes de publicar la plantilla de encabezado, no olvide cambiar el nombre del encabezado haciendo clic en el botón de encabezado, luego puede cambiar el nombre de la luz. Una vez que haya publicado la plantilla de encabezado, el nuevo menú Mega se aplicará a su sitio.