Cómo crear un menú desplegable con estilo con el widget JetMenu

Por Lionel Valentin Caderon

Diseñador de Páginas Web, Artista Comercial, Caricaturista y Escritor pepiniano nacido en Añasco, Puerto Rico.

También hemos Publicado

Tutorial de Esta Semana

Cómo crear un menú desplegable con estilo con el widget JetMenu

Menu desplegable

Síguenos en Facebook

Menu desplegable

En este tutorial, aprenderás cómo crear y personalizar un menú desplegable con el complemento JetMenu .

La Casa del Bordado
Laboratorio San Sebastian
Colon Pratts 360
Comercio Local
Funeraria Rios Caldas
Anunciate Ahora 360
Tomassini Dental Laboratory
On Stage

El complemento JetMenu permite cambiar la apariencia del menú y crear un elegante menú desplegable, así como poderosos mega menús horizontales y verticales. Siga los pasos que se describen a continuación para obtener más información sobre el menú desplegable y la forma de crearlo.

Creación y estilo de un menú desplegable

Paso 1 : el primer paso es instalar y activar el complemento JetMenu .

Paso 2 : después de eso, vaya a la sección Apariencia> Menús en el Panel de WordPress y cree un nuevo menú haciendo clic en la opción Crear menú .

Paso 3 : proporcione un nombre para el nuevo menú y elija la ubicación del menú en la página de la lista. Luego, haga clic en Guardar menú .

Paso 4 : su nuevo menú se puede mostrar en cualquier parte de la página, la lista de ubicaciones del menú depende totalmente del tema activo en su sitio. Asegúrese de habilitar JetMenu para la ubicación actual en el panel de Configuración de JetMenu y haga clic en la opción Guardar menú .

Personalizar los elementos del menú.

Paso 1 : ahora llene su menú con las páginas, publicaciones o enlaces personalizados que desea que se muestren en el menú.

Paso 2 – Luego, proceda a construir la estructura del menú. Además, puede organizar los bloques de menú en el orden que prefiera.

Imaginemos que quieres que ciertos artículos se conviertan en hijos de cualquier otro artículo. Todo lo que necesita hacer es agarrar y arrastrar los elementos un poco hacia la derecha debajo del determinado elemento principal en el que desea agregar subelementos.

También es posible agregar varios niveles de sub artículos usando una jerarquía preferible para expandir el menú. Cuando se crea la estructura, haga clic en Guardar menú.

Paso 3 : con la ayuda del complemento JetMenu, puedes asignar íconos e insignias a tus elementos de menú. Cuando pasas el cursor sobre el elemento, verás el botón JetMenu a la izquierda del título. Pinchalo.

Paso 4 – Como resultado, aparecerá una nueva ventana, donde tienes varias pestañas. En la sección de iconos , puede seleccionar uno de los iconos de la biblioteca de iconos para usar para el elemento del menú.

Paso 5 – Luego, vaya a la pestaña Insignias , escriba el texto, que debe mostrarse como la insignia y elija el color del texto y la insignia en sí con la herramienta de selección de color. Cierre la ventana y repita el proceso para todos los elementos, a los que desea agregar un icono y una insignia.

Configuración de estilo en JetMenu para elementos de submenú

Puede acceder a muchas opciones de estilo si va al bloque de Configuración de JetMenu en el Panel de WordPress. Aquí encontrará el conjunto completo de configuraciones de estilización, que le permiten decorar y personalizar su menú a su gusto.

Paso 1 : continúe con los Estilos de submenú y asegúrese de estar en la pestaña Panel de submenú simple ahora.

Este bloque permite gestionar las siguientes configuraciones de estilización:
  • Ancho del panel : el ancho general del panel del submenú, establecido en px;
  • Fondo del panel : active esta opción para acceder a la opción de color de fondo del panel. Si desea utilizar el fondo degradado, active esta opción también y elija el segundo color de fondo para solicitar el panel;
  • Dirección del degradado de fondo del panel : aquí puede elegir la dirección del degradado para definir cómo se deben combinar los dos colores (de izquierda a derecha, de arriba a abajo, etc.);
  • Imagen de fondo del panel : aquí debe elegir una imagen para usar como fondo en el panel del submenú. Después de configurar una imagen, siéntase libre de configurar su adjunto, posición, repetición y tamaño;
  • Borde del panel : habilite esta opción para ver las configuraciones disponibles para el borde. En caso de que haya decidido utilizar el borde para el panel del submenú, aquí podrá configurar el estilo del borde (sólido, punteado, discontinuo, etc.), su ancho y la configuración de color.
  • Sombra del cuadro de panel : habilite esta opción para acceder a la configuración de la sombra y aplicar la sombra alrededor del panel del submenú.

En este bloque, también puede acceder a los valores de relleno, radio de borde y margen del panel para personalizar la apariencia del panel del submenú según sus necesidades.

Paso 2 : active la descripción del elemento del submenú y personalice su tipografía.

Paso 3 : elija los colores de los elementos, texto, fondo, etc. Puede configurar los colores en 3 modos: Predeterminado, Hover y Activo.

Personalización de los estilos de submenú de JetMenu dentro de Elementor page builder

Si está utilizando el complemento Elementor Pro o JetThemeCore , puede agregar el menú recién creado a la plantilla de encabezado con la ayuda de la biblioteca de JetThemeCore o Elementor Pro.

Paso 1 : abre la plantilla para editar y encuentra el widget Mega Menu entre los elementos en el panel izquierdo.

Arrástrelo a una nueva sección y luego seleccione el menú que desea mostrar.

Paso 2 : puedes administrar la configuración de estilo del widget desde el bloque de estilo disponible para el widget JetMenu. Estas serían las mismas configuraciones de estilo que estaban disponibles en los estilos del submenú del bloque JetMenu en el Panel de WordPress.

Paso 3 – Entonces, aquí vamos! ¡Su menú desplegable está finalmente listo! Guarde todos los cambios y vaya a la página para ver el nuevo menú.

¡Gran trabajo! Ahora ya sabe cómo crear un menú desplegable con estilo fácilmente.

¡Comienza a crear contenido para tu sitio con hermosas máscaras para Elementor!

Si está buscando las plantillas prediseñadas para el tema Kava o cualquier otro tema de su elección, es el momento adecuado para obtener la suscripción de CrocoBlock.

Compartenos en tus redes sociales

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on whatsapp
Share on email
Share on print

Leave a Reply

Your email address will not be published. Required fields are marked *

Sign up for our Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit