Una guía completa sobre el uso del editor Elementor para mejorar el menú de navegación de los sitios web independientes de comercio exterior

Cuando trabajamos en un sitio independiente de comercio exterior, a menudo necesitamos añadir más funciones de menú, lo que permite que las distintas páginas del sitio estén más estrechamente interconectadas. Aunque solemos pensar en el menú de navegación principal en la parte superior, algunas personas utilizan texto de anclaje dentro de la página para los saltos de página. Sin embargo, este enfoque puede no ser tan rico visual o funcionalmente como un menú de navegación.

Con el fin de ofrecer opciones de diseño más flexibles, el editor Elementor introduce una función muy útil: "Menú Nav". Esta herramienta nos permite personalizar el menú de subnavegación según nuestras necesidades de diseño.

1. Añada el elemento funcional "Nav Menu" en el editor Elementor a la sección de edición de contenidos.

Para añadir la función "Nav Menu" al editor de Elementor, puede seguir estos sencillos pasos:

1. Encuentre el elemento "Nav Menu" en la librería de elementos de Elementor.
2. Utilice el botón izquierdo del ratón para hacer clic en el elemento y manténgalo pulsado.
3. Arrastre el ratón hasta el área de edición de contenidos de la página. Cuando vea que la línea del borde del área de edición cambia de una línea de puntos gris a una línea de puntos azul, suelte el botón izquierdo del ratón.
4. De este modo, el elemento "Menú Nav" se ha añadido correctamente a la zona de edición de contenidos.

2. Establezca la función principal del elemento de función "Menú Nav" en el editor de Elementor.

Hay algunas opciones de configuración clave que hay que entender a la hora de configurar submenús en el editor de Elementor:

1. Menú::
   • Aquí usted elige la fuente de contenido para su submenú. En primer lugar, cree y nombre sus submenús en WordPress en Apariencia > Menús. Una vez que haya terminado, estos menús aparecerán en las opciones de menú desplegable de Elementor.
2. Disposición::
   • Puede elegir cómo se presenta el submenú: Horizontal, Vertical o Desplegable.
3. Alinee::
   • Establece la alineación del submenú, incluyendo izquierda, centro, derecha o ambas.
4. Puntero::
   • Se refiere a los efectos que se producen cuando el ratón pasa por encima de los elementos del menú, como Subrayado, Sobrerayado, Línea doble, Enmarcado, Fondo y Texto. Elija un efecto que se adapte a su estilo.
5. Animación::
   • Efectos dinámicos al pasar el ratón por encima. Estos efectos dinámicos no pueden mostrarse en capturas de pantalla, tiene que probarlos y experimentarlos usted mismo.
6. Indicador de submenú::
   • Este ajuste se utiliza para indicar la presencia de un submenú, pero el cambio exacto puede ser menos obvio.
7. Punto de interrupción::
   • Establece el punto de interrupción de la visualización en distintos dispositivos, como tabletas o teléfonos móviles. Cuando la anchura de la pantalla es inferior a este valor, los submenús horizontales de una sola línea se convierten en visualizaciones de varias líneas.
8. Ancho total::
   • Determina si los submenús se muestran a todo el ancho de línea después de un punto de interrupción. Normalmente, no se recomienda el ancho de línea completo.
9. Alinee::
   • Vuelva a ajustar la alineación, a la izquierda (Aside) o al centro (Center).
10. Botón Toggle::
    • Establezca cómo se muestra el submenú, como ninguno (None) o menú Hamburguesa (Hamburger). Cuando se selecciona el menú Hamburguesa, aparece un icono y el submenú se despliega al pulsarlo.
11. Alinear::
    • Fije la posición del icono del botón basculante: izquierda, centro o derecha.

3. Estilice el elemento funcional "Nav Menu" en el editor Elementor.

1. "Configuración del proyecto "desplegable

Al aplicar estilo a un menú desplegable (Dropdown) en el editor de Elementor, tendrá que lidiar con varios estados diferentes y algunas configuraciones de estilo específicas. Vamos a simplificar y explicar estas configuraciones en términos sencillos:

Tres ajustes de estado para el menú principal:

1. Normal (NORMAL): El estado de visualización por defecto del menú cuando no se interactúa con él.
2. Estado Hover (HOVER): El estado de la pantalla cuando el ratón se desplaza sobre el elemento del menú.
3. Estado de actividad (ACTIVO): El estado de visualización del elemento de menú cuando se pulsa sobre él.

En estos tres estados, puede ajustar las siguientes opciones:

• Color del texto: Cambia el color del texto de todos los elementos del menú desplegable, incluido el icono del menú contraído.
• Color de fondo (Fondo): Establece el color de fondo de los elementos del menú. En el estado "Activo", también puede especificar el color de fondo del menú cuando se hace clic en él.
• Tipografía: Ajuste la fuente, el tamaño y otras propiedades tipográficas del texto del menú.

El estilo del menú desplegable:

• Acolchado horizontal: Establece el espacio del elemento de menú desde el lado izquierdo.
• Acolchado vertical: Establece el espacio entre los límites superior e inferior del elemento de menú en la línea en la que se encuentra.
• Espacio entre: Establece la distancia entre los elementos de menú de cada fila.
• Radio del borde: Establece la redondez de las esquinas del elemento de menú, cuanto mayor sea el valor más redondeadas serán las esquinas.

Configuraciones adicionales para menús desplegables:

• Tipo de borde: Establece el estilo del borde exterior para todo el menú desplegable.
• Caja SombraFunción: Añada un efecto de sombra tridimensional al menú desplegable para que destaque.
• Divisor: Añada separadores entre los distintos elementos del menú.
• Distancia: Ajusta la distancia entre los elementos del menú.

2. "Configuración del proyecto "Toggle Button

Configurar el botón de alternancia (Toggle Button) para un menú desplegable en el editor de Elementor implica unos sencillos ajustes visuales. Este botón suele ser un icono de menú de hamburguesa (tres líneas horizontales), y puede ajustar su apariencia para que se adapte mejor al diseño de su sitio. Estas son las opciones de configuración específicas:

1. Color::
   • Este ajuste cambia el color del icono del menú hamburguesa (tres líneas horizontales).
2. Color de fondo::
   • Este es el color de fondo del icono del Menú Hamburguesa. Elegir un color puede hacer que el icono destaque más o que armonice con el estilo general del sitio.
3. Talla::
   • Cambie el tamaño del icono del menú hamburguesa para que coordine con el diseño de su web y otros elementos de la interfaz de usuario.
4. Anchura del borde::
   • Fija el grosor del borde exterior del icono. Esto puede ayudar a que el icono sea más visible o se mezcle más sutilmente con el fondo.
5. Radio del borde::
   • Ajusta cuánto se redondean las esquinas de los bordes de los iconos. Cuanto mayor sea el valor, más redondeadas estarán las esquinas. Por ejemplo, un ajuste de 50 hará que el icono esté completamente redondeado, dando la apariencia de un botón redondo.

Conclusión:

Mejore y optimice los menús de navegación de su sitio web independiente de comercio exterior utilizando el editor Elementor. Explicamos cómo añadir y configurar la función "Menú Nav", incluyendo la configuración de la fuente, el diseño y la alineación de los submenús, así como la personalización de los estilos al pasar el ratón por encima y al activarlos. Además, también hablamos de cómo configurar los distintos efectos visuales del menú desplegable, como el color de fondo, el borde y los efectos de animación, así como de cómo ajustar el tamaño, el color y la forma de los botones de alternancia, para garantizar que el menú de navegación no sólo sea totalmente funcional, sino también visualmente coherente con el diseño y el estilo generales del sitio web.