Ángel Julián

Ángel Julián

Diseño y desarrollo de sitios, especialmente de comercio electrónico con WordPress y WooCommerce

Este més de septiembre, después de añadir los widgets para Facebook, nos sorprenden con un nuevo widget,  –quizás el más esperado– para la creación de menús, Lo cual a partir de ahora se nos facilita mucho la creación de temas basados en Elementor y nos permite prescindir de tener que recurrir a plugins adicionales.

En la actualidad esta caracteristica sólo estaba disponible a través del plugín NavMenu Addon For Elementor, además de algúnos temas que lo proporcionan como extra como es el caso de  OceanWP, así pues a partir de hoy hay una razón más para adquirir la versión pro si queremos hacer un uso más profesional o intensivo de Elementor.

Diseños horizontales, verticales y desplegables

Su uso no puede resultar más sencillo, elija un menú de los creados anteriormente en WordPress, y ya puede comenzar a personalizar el diseño del menú. Su 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.
  • Desplegable – Otra disposición vertical donde el submenú cae como un acordeón.

Elementor menú horizontal

Elementor menú vertical

Elementor menú desplegable

Punteros y Animaciones

Al seleccionar un puntero y una animación para el menú, puede crear más de 50 efectos diferentes para los elementos de menú activos y activos. Basta mirar los siguientes ejemplos para que te hagas una idea de ello:

Animaciones para el tipo de puntero subrayado (Underline)

Existen 5 tipo de animaciones: Fade, Slide, Grow, Drop in y Drop out.

Animaciones para el tipo de puntero enmarcado (Framed)

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

Animaciones para el tipo de puntero  Linea superior (Overline)

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

Animaciones para el puntero de doble línea (Double Line)

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

Animaciones para el  fondo

El fondo del puntero tiene la mayoría de las animaciones. Crean un estilo de botón en activo. La imagen inferior muestra las 5 animaciones principales, pero hay 11 animaciones disponibles para este puntero: Fade, Grow, Shrink, Sweep (izquierda, derecha, arriba, abajo) y Shutter (vertica, vertical hacia fuera, horizontal, horizontal hacia fuera).

Animaciones de texto

El puntero de texto sólo tiene un efecto de animación de texto, ideal para el menú minimalista. Incluye: crecer, encoger, hundir, flotar, inclinar y girar.

Personalización de menús sin precedentes

Despues de varios meses de arduo trabajo se han añadido un conjunto de personalizaciones que permiten crear un número de posibilidades impresionante, espaciado, colores, fuentes. Cada parámetro de diseño se ha traducido a la interfaz de usuario visual.

Espaciado y alineación del menú

Cualquier diseñador web sabe que el espaciado de configuración es uno de los trabajos más comunes cuando al diseñar el menú. Ahora se hace con unos pocos controles deslizantes muy prácticos.

Algunos de nuestros controles de espaciado de 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ú
  • Alineación derecha, izquierda, central y justificada

Color, Fondo y Tipografía

Al personalizar el color y la tipografía de los elementos del menú, puede crear una amplia gama de posibilidades. Desde menús transparentes a semitransparentes, de ancho total, minimalista, ligero, oscuro … El límite lo pones tú.

Además, obtendrás las mismas opciones de diseño para el submenú.

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

El icono par los elementos desplegables puede configurarse para ser un rectángulo clásico, vértice, ángulo, ninguno o más.

Puedes configurar todos los aspectos de diseño del submenú delmenú desplegable, incluyendo texto y colores de fondo, tipografía, relleno horizontal y vertical, borde, sombra de cuadro, divisor y distancia.

Menú responsivos para dispositivos móviles

Elementor ofrece una solución completa para menús en dispositivos móviles. El menú  se controla mediante un conjunto ajustes separados, que te permiten personalizar fácilmente cada menú con el dispositivo adecuado.

Las características del menú para dispositivos móviles que Elementor incluye son:

  • Puntos de corte para móviles y tabletas. Utilizando la configuración de punto de corte, puede decidir si el menú para móvil se mostrará en la tablet y móvil (1023px o inferior) o sólo para móviles (767px e inferior).
  • Anchura del menu. Al establecer cómo ancho total, puede tener la pantalla de menú móvil con un ancho limitado cuando se cierra (cuando sólo se muestra el icono de la hamburguesa), pero se extendió a todo el ancho cuando se abre.
  • Hamburguesa o menú móvil de texto (Menús verticales y de acordeón). Puede elegir mostrar un icono de hamburguesa plegable o un menú vertical totalmente visible.

  • Alineado / alineación al centro. Elije si el menú móvil está alineado al lado o al centro.
  • Alineación de la hamburguesa. El icono de hamburguesa cerrada se puede alinear a la izquierda, centro o derecha.
  • Diseño del botón de conmutación. Estilo de su botón de conmutación por color, color de fondo, el tamaño, el ancho de la frontera, el radio de la frontera y los estados normales y hover.
  • Diseño de los elementos desplegables. Establece el color, la tipografía, el espaciado, el divisor y la sombra de la caja del menú desplegable para los estados normal y de volteo.
  • Navegación responsive. El menú se verá bien en cualquier dispositivo, con el ajuste adecuado de acuerdo con el ancho del dispositivo.
Este es el primer paso , aunque importante para los planes de incorporación de la capacidad de Elementor para crear y diseñar un sitio web completo, incluyendo la cabecera y pie de página. Seguiremos informando de cuantas novedades se vayan sucediendo.
Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pinterest
Pinterest
Share on telegram
Telegram
Share on whatsapp
WhatsApp
Share on email
Email

Esta entrada tiene 5 comentarios

  1. Avatar

    Hola como estas, estoy realizando una web con elementor pro y este widget me reconoce un solo menú, siendo que tengo dos que quiero usar. Incluso borre el primero para usar solo el segundo, pero aunque en las opciones me da la posibilidad de elegirlo, en la pantalla se sigue mostrando el primero ¿Que puedo hacer? Saludos

    1. Ángel Julián Mena

      Buenos días Francisco, esto que comentas es la primera noticia que tengo al respecto. Podrias indicar la URL para que veamos a ver si tepuedo ayudar y una lista de plugins que estas utilizando por si hay algo que entre en conflicto?

  2. Avatar

    Hola Angel, te consulto si conoces la posibilidad de cambiar el color de fondo de menú y pestañas en la versión para móviles, ya que el fondo queda igual en todas las pestañas y cuando se abren las sub-pestañas se confunden , y no dan una buena experiencia de navegación , solo logrando cambiar el color ya sería más interesante .

    gracias y saludos

    1. Ángel Julián Mena

      Buenos dias, perodón por no responder antes, estaba un poco asfixiado de trabajo 🙂 Lo unico que se me ocurre es que por medio de css y mediaquerys puedas hacer cambios en la versión móvil, es posible verlo en algún lugar?

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Cerrar menú