Widget de menú de Elementor

Por Ben Pines

Ben Pines es CMO de Elementor. Ha estado en la industria del marketing en línea por más de 10 años, especializándose en marketing de contenido. WordPress ha sido la plataforma elegida por Ben desde el momento en que solo se usaba para bloguear.

También hemos Publicado

Tutorial de Esta Semana

Widget de menú de Elementor

Menu Widget

Síguenos en Facebook

Menu Widget

Presentamos la característica más esperada del año: ¡el widget de menú! Siga leyendo para descubrir cómo diseñar menús magníficos en cualquier tema y para cada dispositivo.

Diseñar y personalizar menús es un gran problema, ​​ahora presentamos una nueva forma de hacerlo fácil y divertido.

Este widget es extremadamente flexible. De hecho, no se puede encontrar ningún otro tema o complemento de WordPress con tanta flexibilidad de diseño de menú.

Te permite crear un número infinito de diseños de menú con píxeles perfectos, todos personalizables hasta el último píxel -es la manera en que Elementor lo hace, ya sabes.

Hay mucho más que quiero hacerles saber acerca de esta nueva y emocionante característica, pero estoy ansioso por mostrarle todas las posibilidades que conlleva, así que aquí va.

Una vez que elija el menú de los menús de WordPress creados con anterioridad, puedse comenzar a personalizar el diseño del menú. Tu primera opción es elegir entre 3 diseños básicos:

Horizontal : el menú se extenderá horizontalmente de izquierda a derecha o viceversa.

Vertical : para que el menú sea vertical y vaya de arriba a abajo.

Menú desplegable : otro diseño vertical donde el submenú se despliega como un acordeón

Punteros y animaciones

Al seleccionar un puntero y una animación para el menú, puedes crear más de 50 efectos diferentes para sus elementos de menú activo y activable.

Mira estas bellezas:

Animaciones subrayadas

El puntero de subrayado presenta 5 animaciones: Fade, Slide, Grow, Drop in y Drop out.

Animaciones enmarcadas

El puntero enmarcado incluye 5 animaciones: Fade, Grow, Shrink, Draw y Corners.

Animaciones en linea

Overline incluye el mismo conjunto de 5 animaciones que el Subrayado: Fade, Slide, Grow, Drop in y Drop out.

Animaciones de doble línea

Aquí nuevamente, para el puntero de doble línea, encontramos 5 animaciones: Fade, Slide, Grow, Drop in y Drop out.

Animaciones de fondo

El puntero de fondo tiene la mayoría de las animaciones. Crea un estilo de botón al pasar el ratón sobre este. El siguiente Gif muestra las 5 animaciones principales, pero hay 11 animaciones disponibles para este puntero: Desvanecimiento, Crecer, Reducir, Deslizar a la izquierda / derecha / arriba / abajo y Obturador en vertical / vertical / horizontal / horizontal.

Animaciones de texto

El puntero de texto solo tiene un efecto de animación de texto, ideal para el menú minimalista. Incluye: crecer, encogerse, hundirse, flotar, sesgar y girar.

Personalización de menú sin precedentes

Este widget llevó meses de trabajo duro para completar. El esfuerzo valió la pena, lo podrás ver cuando profundices en la opción de personalización que ofrece el widget.

Espaciado, colores, fuentes. Cada parámetro de diseño se ha traducido a la IU visual que conoces y amas en Elementor.

Separación y alineación del menú

Cualquier diseñador web sabe que establecer el espaciado es uno de los mayores problemas cuando se trata del diseño del menú.

En pocas palabras, mover los elementos del menú utilizados para implicar un código minucioso, y ahora se realiza con unos pocos controles útiles que se pueden arrastrar.

Algunos de nuestros controles de espaciado del menú incluyen:

  • Acolchado horizontal para cada elemento del menú y submenú.
  • Acolchado vertical para cada elemento del menú y submenú.
  • Espacio entre los elementos del menú.
  • Derecha, izquierda, centro y alineación justificada.

Color, fondo y tipografía

Al personalizar el color y la tipografía de los elementos del menú, puedes crear una amplia gama de menús. Desde menús transparentes a semitransparentes, de ancho completo, minimalistas, claros, oscuros … El cielo es el límite con respecto a los tipos de diseños de barra de menús que puede alcanzar.

Además, también obtienes las mismas amplias opciones de diseño para el submenú.

Submenu

El submenú desplegable ha recibido el mismo cuidado que el menú.

El icono desplegable se puede configurar para que sea un rectángulo clásico, chevron, ángulo, ninguno o más.

Puede configurar todos los aspectos del diseño del menú desplegable del submenú, incluidos los colores de fondo y de texto, la tipografía, el relleno horizontal y vertical, el borde, la sombra de la caja, el divisor y la distancia.

Menú móvil sensible

El menú de Elementor ofrece una solución completa para los menús móviles en WordPress. El menú móvil se controla mediante un conjunto separado de configuraciones, lo que te brinda la posibilidad de personalizar fácilmente cada menú en el dispositivo correcto.

Las características del menú móvil de Elementor incluyen:

Puntos de interrupción móviles y tabletas. Con la configuración del punto de interrupción, puedes decidir si el menú móvil se mostrará para tabletas y dispositivos móviles (1023px y menores) o solo para dispositivos móviles (767px y menores).

Ancho completo en móvil. Al configurar el menú móvil en ancho completo, puede hacer que el menú móvil se muestre en un ancho limitado cuando está cerrado (cuando solo se muestra el ícono de la hamburguesa), pero extendido hasta el ancho completo cuando se abre.

Menú móvil de hamburguesa o texto (menús verticales y de acordeón). Puedes elegir mostrar un icono de hamburguesa plegable o un menú vertical completamente visible.

Alineación / alineación central. Elige si el menú móvil estará alineado al lado o al centro.

Alineación de palanca. El icono de hamburguesa cerrado se puede alinear hacia la izquierda, el centro o la derecha.

Diseña el botón de alternar. Diseña el botón de alternar según el color, el color de fondo, el tamaño, el ancho del borde, el radio del borde y los estados normales y flotantes.

Diseñar los elementos desplegables. Configure el color, la tipografía, el espaciado, el divisor y la sombra de la caja del menú desplegable para los estados normales y de desplazamiento.

Navegación receptiva. Su menú se verá bien en cualquier dispositivo, con el ajuste adecuado de acuerdo con el ancho del dispositivo.

El menú es el primer paso

Vemos el menú como uno de los elementos más importantes de cada sitio web, navegando a los visitantes a través de la variedad de páginas y contenido del sitio.

El widget del menú es aún más importante, y ahora uedes incorporarlo a todo el sitio web, incluido el encabezado y el pie de página.

Ahora, puedes usar el widget del menú para personalizar tus páginas, tu página de inicio o cualquier otro menú de la página. Si eres un programador de corazón, también puedes usar la función de incrustación para implementar la barra de menú en el encabezado de su sitio, sin importar qué tema esté usando.

También puede usar uno de los complementos del menú adhesivo o pegajoso para hacer que el widget del Menú de navegación esté pegado o fijo al encabezado / barra lateral.

Configurando el Menú

Contenido

Diseño

  1. Menú : selecciona un menú que hayas configurado previamente en Apariencia > Menús
  2. Diseño : elige un diseño horizontal, vertical o desplegable
  3. Alinear : establece la alineación del elemento del menú, ya sea Izquierda, Centro, Derecha o Justificada
  4. Puntero : selecciona un puntero, Ninguno, Subrayado, Línea doble, Enmarcado, Fondo o Texto
  5. Animación : elige la animación del puntero, ya sea Fade, Slide, Grow, Drop In, Drop Out o None
  6. Indicador de submenú : elige el icono que indica que un elemento tiene elementos de submenú, ya sea Ninguno, Clásico, Chevron, Ángulo o Más

Desplegable móvil

  1. Punto de interrupción : selecciona en qué punto se inicia el menú desplegable móvil, ya sea en Móvil o Tableta
  2. Ancho completo : selecciona si el desplegable móvil abarca el ancho completo del dispositivo, ya sea Sí o No
  3. Alinear : elige si los elementos del menú móvil se muestran a la izquierda o en el centro, seleccionando Aside o Centro
  4. Botón de alternar: muestra el icono de la hamburguesa como el botón de alternar o no
  5. Alineación de alternancia: muestra el botón de alternar en la parte izquierda, central o derecha de la pantalla

Estilo

Menú principal

Tipografía : establezca las opciones de tipografía para el texto del elemento del menú.

Los siguientes elementos se pueden configurar de forma independiente para los tres estados: Normal, Hover y Activo.

  1. Color del texto : elija el color del texto del elemento del menú
  2. Color del puntero : (solo disponible para los estados activo y activo) Elija el color del puntero
  3. Ancho del puntero : establece el ancho del puntero
  4. Relleno horizontal : establezca el relleno horizontal alrededor del texto de los elementos del menú
  5. Relleno vertical : establezca el relleno vertical alrededor del texto de los elementos del menú
  6. Espacio entre : establece el espacio entre cada elemento del menú

Desplegable

En el escritorio, esto afectará el submenú. En el móvil esto afectará a todo el menú.

Los siguientes elementos se pueden configurar de forma independiente para los tres estados: Normal, Hover y Activo.

  1. Color del texto : elija el color del texto del elemento del menú
  2. Color de fondo : elija el color de fondo de los elementos del menú
  3. Tipografía : establezca las opciones de tipografía para los elementos del menú
  4. Tipo de borde: seleccione un tipo de borde alrededor del menú desplegable, seleccionando Ninguno, Sólido, Doble, Punteado, Punteado o Surco
  5. Ancho : establece el ancho del borde
  6. Color : elige el color del borde.
  7. Radio del borde: establezca el radio del borde para controlar la redondez de las esquinas
  8. Sombra de cuadro : crea una sombra de cuadro alrededor del menú desplegable
  9. Relleno horizontal : establezca el relleno horizontal alrededor del texto de los elementos del menú
  10. Relleno vertical : establezca el relleno vertical alrededor del texto de los elementos del menú

Divisor

  1. Tipo de borde: seleccione un tipo de borde para el divisor, seleccionando Ninguno, Sólido, Doble, Punteado, Punteado o Ranurado
  2. Color : si se elige el borde divisor, elija el color del borde divisor
  3. Ancho del borde: si selecciona el borde divisor, establezca el ancho del borde divisor
  4. Distancia : establezca la cantidad de espacio entre el conmutador y el menú desplegable

Botón de activación

Los siguientes elementos se pueden configurar independientemente para los estados normal y de desplazamiento.

  1. Color : elija el color del icono del botón de alternar
  2. Color de fondo : elija el color de fondo del botón de alternar
  3. Tamaño : establece el tamaño del botón de alternar
  4. Ancho del borde: establezca el ancho del borde alrededor del botón de alternar
  5. Radio del borde: establezca el radio del borde del botón de alternar

Nota : El botón de alternar se refiere al icono del menú de hamburguesas.

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