Cómo cambiar el estilo de los elementos del menú al desplazar y hacer clic con el complemento JetMenu para Elementor

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 cambiar el estilo de los elementos del menú al desplazar y hacer clic con el complemento JetMenu para Elementor

Cómo crear un mega menú con varias columnas

Síguenos en Facebook

Cómo crear un mega menú con varias columnas

Descubre cómo hacer tu menú elegante y con estilo. El complemento JetMenu tiene docenas de configuraciones para personalizar el menú con el diseño adecuado.

De hecho, puedes crear fácilmente un menú elegante con el complemento JetMenu. JetMenu te permite crear elementos de mega menú llamativos y también proporciona cientos de opciones de estilización para los elementos del menú principal y del submenú.

Con este tutorial, aprenderás cómo ajustar la configuración de estilo de los elementos del menú al pasar el mouse y hacer clic sobre ellos de acuerdo con tus necesidades.

Personalizar el estilo de los elementos del menú al desplazar y hacer clic

Puedes personalizar la apariencia de los elementos del menú principal al pasar el ratón y hacer clic sobre ellos en el Panel de WordPress o en el generador de páginas Elementor. VAsta con ir a JetMenu> Estilos del menú principal , o directamente a través de Elementor page page para personalizar los estilos para el widget Mega Menu o Vertical Mega Menu .

En este tutorial, vamos a cambiar el estilo de los elementos del menú al desplazar en Elementor.

Paso 1 : agregue el widget de Mega Menú a la página que está editando, o a la plantilla de encabezado.

Paso 2 – Abra el bloque Estilo> Elementos del menú principal en la barra lateral a la izquierda.
Aquí puede acceder a las configuraciones Normal , Desplazar y Activo para los elementos del Menú principal .

Simplemente cambie entre los modos y defina las diferentes configuraciones de estilo para cada uno de ellos cuando necesite modificar la apariencia del elemento del menú principal al pasar el mouse o cuando se active.

Por ejemplo, puede cambiar el texto del artículo o el color de la descripción cuando se desplaza sobre él.

Colores y fondos

Paso 3 : también puede configurar el color diferente para el ícono del elemento y configurar el color para la flecha desplegable para que cambie cuando se abra el menú desplegable.

Paso 4 : también puede establecer un color de fondo diferente y usar un tipo de fondo diferente. Por ejemplo, siga utilizando el color sólido en el modo normal y agregue un degradado con la opacidad de la luz al pasar y cuando el elemento se active.

Paso 5 – Otro efecto es subrayar el elemento cuando uno se sitúa sobre él. Para lograr esto, puede agregar un tipo de borde Sólido en el desplazamiento y luego establecer su ancho en 0 px para Arriba , Derecha e Izquierda y establecer el ancho de borde necesario (por ejemplo, 3 px) para el valor Inferior .

Paso 6 – El color del borde también se puede ajustar.

En realidad, puede ser divertido administrar la apariencia del elemento del menú principal al pasar el mouse y cuando se activan. Puede crear diferentes diseños con estilo en cuestión de unos pocos clics.

Personalizar el estilo de los elementos del submenú

Además, los mismos modos Hover y Active están disponibles para los elementos del submenú . Para acceder a ellos, abra el bloque del submenú y busque los ajustes correspondientes.

Una vez que haya terminado de crear los estilos para los modos Hover y Activo de sus elementos de menú, guarde todos los cambios haciendo clic en el botón Actualizar a continuación.

¡Gran trabajo! Ahora su menú se ve magnífico!

¡Aumente sus oportunidades con el paquete completo de JetPlugins!

Con el complemento Jet

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

Sign up for our Newsletter

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