Diseña una elegante barra de navegación web adaptativa con Elementor Pro

Crear una elegante barra de navegación web adaptativa con Elementor Pro es fácil siempre que tengas una visión clara y entiendas las propiedades básicas de Flexbox.

¿Por qué es importante una barra de navegación responsiva?

La navegación de un sitio web con capacidad de respuesta es vital para mejorar la experiencia general del usuario, ya que proporciona vías intuitivas para que los visitantes exploren eficientemente el contenido de un sitio web.
Un sistema de navegación bien estructurado no sólo guía suavemente a los usuarios por las páginas web, sino que también garantiza la accesibilidad en todos los dispositivos, incluidos los móviles.

¿Qué hace que la navegación de un sitio web sea receptiva?

Una navegación web responsive significa que funciona bien en todos los dispositivos.
A continuación te explicamos cómo utilizar un constructor de páginas como Elementor puede ayudar a que la navegación de un sitio web sea adaptativa:

1. Diseño sencillo y minimalista: Mantener la navegación sencilla ayuda a los usuarios a encontrar lo que necesitan sin confusión.
   Con menos elementos, tu sitio web tiene un aspecto más limpio y funciona más rápido.
2. Uso de contenedores Flexbox con porcentajes: Elementor te permite utilizar contenedores Flexbox, que ajustan el tamaño de tus elementos de navegación en función del tamaño de la pantalla.
   Al utilizar porcentajes para las anchuras, todo se escala hacia arriba o hacia abajo suavemente a medida que cambia el tamaño de la pantalla.
3. Utilizar iconos para móviles: En pantallas más pequeñas como las de los teléfonos, utilizar iconos en lugar de texto puede ahorrar espacio y hacer que la navegación tenga un aspecto ordenado.
   Los iconos son más fáciles de reconocer y de pulsar en los dispositivos más pequeños.
4. Menú principal emergente en el móvil: En lugar de apretar todos los elementos del menú en un espacio pequeño, puedes delegar los elementos de tu menú principal en una ventana emergente para dispositivos móviles.
   Esto hace que la navegación sea más limpia y mejora la experiencia del usuario, ya que éste puede abrir y cerrar fácilmente el menú según lo necesite.

¿Cuáles son los distintos tipos de navegación web?

La navegación por un sitio web puede adoptar varias formas para adaptarse a las diversas preferencias de los usuarios y a la estética del diseño.
Los tipos más comunes son:

Navegación superior

La barra de navegación más común en toda la web

La navegación superior es el patrón de navegación web más utilizado, que coloca los elementos del menú en la parte superior de la página, ofreciendo a los usuarios un acceso fácil a las secciones principales del sitio.

Navegación lateral

Una barra de navegación alternativa que puede utilizarse en páginas específicas

La navegación lateral es un diseño alternativo de navegación web que coloca los elementos del menú a lo largo del lateral de la página, ofreciendo una estructura de menú vertical para que los usuarios exploren diferentes secciones de contenido.

Menú Hamburguesa

Se utiliza sobre todo para la navegación móvil

El menú hamburguesa es un popular icono de navegación de sitios web que suele ocultar las opciones de menú tras un icono, proporcionando una interfaz despejada para los usuarios de dispositivos móviles.

Navegación a pie de página

Está siempre presente en todas las páginas

La navegación a pie de página es un elemento de navegación suplementario situado en la parte inferior de las páginas web, que ofrece a los usuarios acceso a enlaces secundarios, información de contacto y políticas del sitio.

Crear la navegación superior

Esto supone que has creado todas (o la mayoría) de tus páginas en WordPress.

Si no, dirígete a este artículo:

Crear un sitio de marca desde cero ⇒

Ahora bien, es importante establecerlo: El menú de WordPress y nuestra Cabecera son dos cosas diferentes

La Cabecera es el contenedor (o envoltorio) que contendrá todos nuestros elementos de navegación, como el menú de WordPress y otras llamadas a la acción (CTA) importantes.

Lo más importante ahora es la planificación.
Qué vamos a incluir en nuestro menú de WordPress y, lo que es más importante, qué NO vamos a incluir…
Por ejemplo, es posible que queramos incluir CTA importantes como Asociarse, Contactar, Suscribirse o Comprar ahora como botones en lugar de texto sin formato (como se ve en la imagen anterior).
Mucho de esto depende del tipo de sitio web que estés construyendo pero, en la mayoría de los casos, así es como debería ser:
¿Cuál es la página más importante para ti?
Esta es tu CTA importante (Compra ahora/Suscríbete/Contacta conmigo/Contrátame, etc.)
A continuación, tus páginas esenciales.
Podrían ser la sección de tu blog, la página «Sobre mí», el punto de venta único (USP), la página de inicio, el portafolio, etc.
Estas son las páginas esenciales que debes incluir en tu menú de navegación (menú de WordPress).
Luego, tienes las «otras» páginas.
Legales, blog, Noticias, FAQ, Soporte, Políticas, etc.

Crear menús en WordPress

Ahora que ya sabes qué incluirás en tu menú WordPress (elemento de navegación) y qué no, vamos a crear tu primer menú.

Paso 1.
Cuando hayas creado tus páginas, dirígete a «Apariencia» -> «Menús» y ponle a tu primer menú el nombre de «Menú de cabecera principal».
En la Configuración del Menú, puedes marcar la casilla «Cabecera», ya que este menú irá en nuestra cabecera.
Ahora, «Crear menú».

Paso 2.
Añadir tus páginas al menú.
En la parte izquierda aparecerán todas las páginas que hayas creado.
Si no puedes ver las páginas que buscas, selecciona la pestaña «Ver todo» (te mostrará todas tus páginas).
Empieza marcando las páginas que quieras añadir y haz clic en «Añadir al menú».
Después, «Guardar menú».

Empieza añadiendo las páginas que quieres que aparezcan en tu menú de navegación de texto plano.
Añadiremos mi página de Inicio, Por qué yo, Quién soy y Contacta conmigo.

Nota: No voy a añadir mi CTA más importante, ya que lo añadiré más adelante como un botón.

Diseñar la barra de navegación de cabecera de escritorio con Elementor Pro

Ahora que tenemos nuestros menús de navegación principales, podemos incluirlos dentro de nuestros diseños de cabecera y pie de página.
Paso 1 Dirígete a tu «Constructor de temas» de Elementor, situado en el menú del panel de control de WordPress, y ve a «Plantillas» -> «Constructor de temas».
Ahora deberías estar dentro del Constructor de Temas de Elementor .

El constructor de temas de Elementor es donde creas todas las páginas esenciales, como todas las páginas individuales (página de producto, página de entrada de blog, página 404 de archivos de blog y cualquier otra página que compilaría el tema general de tu sitio web).
Aquí, esencialmente estás diseñando tu propio tema personalizado.

Ahora, haz clic en el icono más donde veas la «Cabecera».

Esto te llevará a donde tienes que estar para editar la cabecera de tu página web.
Este es el aspecto que debería tener tu página:

No necesitaremos ninguna de las plantillas proporcionadas, ya que vamos a crear una cabecera personalizada.
Ciérrala.

Importante: Antes de continuar, asegúrate de que has activado la función «Contenedores FlexBox» en la configuración de Elementor.
Debería estar activada por defecto.

¿Activo?
Genial, ahora podemos seguir diseñando nuestra barra de navegación de cabecera.
Deberías estar en una página en blanco parecida a la imagen de abajo.
O, si ya has empezado con tu página de Inicio, verás el contenido de tu página de Inicio.

Establecer el contenedor padre (envoltorio)

En primer lugar, vamos a dar un nombre a nuestra cabecera.
Para ello, ve al icono de configuración (abajo a la izquierda) -> «Título» -> dale un nombre (por ejemplo, Cabecera).

Ahora añade tu primer widget Contenedor -> selecciona «FlexBox» -> «Selecciona cualquier estructura» .
Esto servirá como envoltorio principal para contener todo lo que haya dentro.

Asegurémonos de que esta envoltura principal permanece en «En caja» para el ancho del contenido, y establezcamos el «Ancho» en el valor que elijamos.
Yo lo estableceré en 1200px, ya que así es como está dispuesta la estructura principal de mi sitio web.

1. En la pestaña «Diseño», establece una «Altura mínima» de 80px.
2. En la pestaña «Estilo», ajusta el color de fondo a transparente.
3. En la pestaña «Avanzado» y aplica un margen negativo de 80px y un z-indey de algo alto como 999 (esto importará más adelante).
4. (OPCIONAL)
   Establece tu cabecera como pegajosa si quieres que permanezca en la parte superior de la ventana siempre que te desplaces hacia abajo.
   Hazlo en la pestaña «Avanzado» -> Efectos de movimiento -> pon «Pegajoso» en «Arriba».
5. En los «Efectos de movimiento», también puedes añadir una bonita «Animación de entrada» a tu cabecera.
   Yo suelo seleccionar el «Fundido hacia abajo».

Añadir los contenedores hijos (interiores)

Ahora añade otro contenedor dentro de este contenedor.

Para ello, haz clic en el pequeño icono más en el centro del propio conatiner y, a continuación, haz clic en el widget «Contenedor».

Esto añadirá automáticamente un nuevo contenedor hijo en su interior.

Esta vez, asegúrate de que la «Anchura del contenedor» está ajustada a «Anchura completa» y 100% – queremos que este contenedor ocupe toda la anchura del contenedor padre (envoltorio).
Asegúrate de que la dirección está ajustada a «Fila horizontal» -> «Alinear elementos» centro -> «Espacio» 0 y 0
(OPCIONAL) En la pestaña «Estilo»: Ve a Borde -> establece el «Radio del Borde» en 30px – esto hará que tu Barra de Navegación de Cabecera tenga los lados redondeados.
(IMPORTANTE) Pestaña «Avanzado»: Pon todo el relleno a 0 -> En las «Clases CSS» añade el valor «card-blur» – esto es lo que hará que tenga un aspecto elegante más adelante cuando añadamos el código CSS personalizado.

Ahora, sólo tenemos que añadir nuestro Logo, menú y CTAs dentro de nuestra barra de navegación de Cabecera.
Para ello, necesitamos añadir un contenedor para cada uno, en este caso, tres contenedores (logo, menú, CTAs).
Ahora que estamos empezando con contenedores dentro de contenedores, resulta muy útil utilizar el menú de navegación de Elementor Pro en el lado derecho.

Selecciona el contenedor interior (también llamado contenedor hijo).

En caso de que estés perdido y no encuentres el widget Conainer, tienes que hacer clic en el icono del widget situado en la parte superior izquierda.
A la derecha del logo de «Elementor».

A continuación, una vez que hayas seleccionado el contenedor correcto utilizando el navegador, haz clic en el widget contenedor para añadir un contenedor adicional en su interior.

Vamos a configurar algunos ajustes esenciales para este único contenedor antes de duplicarlo.

1. Ajusta la «Anchura del contenido» a la anchura completa
2. Duplica este contenedor dos veces seleccionándolo -> clic derecho -> duplicar (o CMD/CTR D)

Deberíamos tener tres contenedores colocados uno al lado del otro, así:

Añadir el menú, el logotipo y los botones CTA

Ahora que tienes tres contenedores, puedes decidir dónde quieres colocar el logotipo, el menú y el botón CTA.
Digamos que optamos por el logotipo en el centro y el menú de navegación y los CTA en los laterales.
Con esto en mente, primero ajustamos la Justificación y la Alineación de nuestros tres contenedores interiores.

1. Ajusta el Contenedor nº 1 al 40% de anchura, la«Dirección» a fila – horizontal y los «Espacios» a 0 en ambos.
   Además, ajusta el relleno a 0 en la pestaña «Avanzado».
2. Pon el contenedor nº 2 a 20% de ancho, Justificar y Alinear en el centro y los «Espacios» a 0 en ambos.
   Pon el relleno a 0 en la pestaña «Avanzado».
3. Ajusta el contenedor nº 3 al 40% de anchura, la«Dirección» a fila – revés y los «Espacios» a 0 en ambos.
   Ajusta el relleno a 0 en la pestaña «Avanzado».

Nota: los porcentajes suman 100%, lo que significa que estamos ocupando toda la anchura del contenedor padre.

Ahora, vamos a añadir nuestro logotipo al contenedor del centro.

Selecciona el contenedor central, ve a los widgets y haz clic en tu «Logotipo del sitio».
Asegúrate de ajustar el «Estilo» del logotipo y establece un valor para la anchura de 70px.

Asegúrate de no superar los 80px, ya que eso sobrepasaría la altura que establecimos inicialmente para el propio contenedor padre más arriba.
Si lo haces, asegúrate de volver atrás y ajustar la altura del contenedor padre.

Ahora, el menú de navegación.

Ve a los widgets -> Menú de WordPress -> Colócalo en el contenedor de la izquierda.
Ahora, selecciona uno de los menús que hemos creado antes (Menú de cabecera principal, por supuesto).

Para el contenedor de la derecha, añadiremos un botón: será el CTA.
El botón más importante de todos.

Importante: Este botón depende del tipo de sitio web que estés construyendo.
Podría ser un botón a la página de la tienda, un botón a la página de precios, un botón a la página de Contacto o cualquier otra página que consideres importante.

Selecciona el contenedor de la derecha -> ve a los widgets -> haz clic en el widget «Botón».
Dale el estilo que quieras al botón en la pestaña «Estilo».
Asegúrate de que los colores coinciden con los de tu brnad.

Deberías tener algo parecido a esto (con una diferencia en los colores):
Navegación y CTA a los lados, y logotipo en el centro.

Estiliza el menú y el botón CTA

Antes de pasar al siguiente, quizá quieras dar estilo al menú y al botón CTA.
Estilizar el menú es fácil.
Sólo hay que modificar unas pocas cosas.
Haz clic en el widget del menú (directamente o a través de la pestaña del navegador de Elementor).
Modifica lo siguiente para conseguir un aspecto minimalista del menú de navegación:

1. «Alineación» ajustada a «izquierda».
2. «Puntero» ajustado a «ninguno»
3. Ve a la pestaña «Estilo
4. «Tipografía» ajustada a «texto pequeño» o dejarla por defecto
5. En su estado «Normal», ajústalo a tu color de texto por defecto
6. Estado «Hover», ajustado al color primario de tu marca
7. Como estado «Activo», configúralo con el color de tu marca.
8. «Relleno horizontal» debe fijarse entre 6px y 12px
9. El «relleno vertical» debe ser de unos 5px
10. «Espacio entre», puedes fijarlo en 0px

El resto, no lo necesitamos, ya que crearemos un menú completamente diferente para tabletas y dispositivos móviles.
Para el botón CTA:

1. Asegúrate de ponerle el nombre que consideres apropiado en el área «Texto
2. Establece el «Enlace» superior a la página que quieres enviar a tu visitante haciendo clic en el área de enlaces, empieza a escribir un título de página y selecciona la página.
3. En la pestaña Estilo, establece los colores del texto y del fondo para los estados «Normal» y «Sobreimpresionado».
4. Añade algún borde-radio (si quieres esquinas redondeadas) o ponlo a 0 (si quieres un botón cuadrado).
5. Puede que quieras ajustar el «Relleno» para que el botón quede bien en todos los dispositivos.
   Te recomiendo que establezcas el relleno en 8px (arriba y abajo) y 12px (derecha e izquierda).

Hazlo elegante con CSS

Esta es la parte fácil.
Para hacerlo más elegante, me gusta utilizar un efecto de desenfoque CSS.
Aquí tienes el código para un efecto de desenfoque sencillo.
Copia y pega este código en tu panel de código personalizado en Elementor Pro.
Esto añadirá el popular efecto de desenfoque detrás de tu Header navbar.

.card-blur {
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
}

Importante: Al pegar el código, asegúrate de añadir <estilo > (antes) y </estilo > (después).
Ver imagen.

Ve al panel de control de WordPress -> Elementor -> Código personalizado -> Añadir nuevo -> Dale un nombre -> Establece que la ubicación sea </body> – Fin -> Pégalo en -> Publicar -> Establece que las condiciones sean «Todo el sitio» -> Guardar y Cerrar.

Si quieres algo más personalizado.
Echa un vistazo a esta herramienta gratuita generadora de CSS Glassmorphism.

Cómo hacer que la barra de navegación de tu sitio web sea responsiva

Para asegurarnos de que la barra de navegación del sitio web es responsiva para todos los dispositivos, tenemos que hacer tres cosas.

En primer lugar, establece tu vista en «Tableta».

Cualquier ajuste o estilo que apliques en la vista de tableta, se aplicará automáticamente en la móvil.

A continuación, selecciona el contenedor que contiene el menú (contenedor nº 1) y añade un nuevo widget «Animación Lottie» en su interior.

Ahora deberías tener el menú hamburguesa (de antes) y el nuevo widget de animación Lottie dentro del mismo contenedor.
Así

Lo último antes de añadir nuestra animación Lottie es ocultar el menú hamburguesa tanto de la vista de tableta como de la de móvil.

Así que, utilizando el navegador de la derecha, selecciona el Menú de WordPress, dirígete a la pestaña «Avanzado», desplázate hacia abajo hasta donde dice «Responsive», y selecciona tanto «Ocultar en Retrato de Tableta» como «Ocultar en Retrato de Móvil».

Ahora, busquemos un icono Lottie chulo que nos sirva de icono de menú para tabletas y móviles.
Mi lugar favorito para buscar animaciones Lottie es Lordicon.com.
Así que dirígete a su sitio web y selecciona un icono de menú que se adapte a tu caso de uso.
Buscando en su categoría «Interfaz de usuario», encontré esta genial animación del globo terráqueo que voy a utilizar.

Cambia los colores al color de tu marca, pulsa la opción «Lottie» y descarga como «Minify».

Ahora ya puedes añadir esta animación Lottie al widget Lottie de la barra de navegación de tu sitio web.

Vuelve a tu barra de navegación, selecciona el widget Lottie y carga la animación Lottie recién descargada en tu widget.
Listo:

Ahora, establece la configuración correcta y da estilo al icono de tu widget Lottie para que se ajuste correctamente a la barra de navegación.

Dirígete a la pestaña «Contenido» -> «Configuración», y ajusta el «Activador» a «Al hacer clic» – esto tendrá sentido más adelante.
Ahora, en la pestaña «Estilo», ajusta la anchura al 100% -> ajusta la «Anchura máxima» a 70px.
Por último, en nuestra pestaña «Avanzado»: ve a «Responsive -> «Ocultar en escritorio».

No queremos que esta animación de Lottie aparezca en nuestro escritorio porque para eso ya tenemos nuestro menú de navegación de WordPress.

Ahora deberías tener algo así:

No te preocupes por el menú hamburguesa anterior, no se mostrará en el sitio en vivo.

Por ahora hemos terminado con la barra de navegación, así que ya podemos pulsar «Publicar» (o «Actualizar») en la parte inferior izquierda ->asegúrate de que la configuración de visualización está en «Incluir»: «Todo el Sire» -> «Guardar y cerrar».

Crear la navegación del menú para tabletas y móviles

Ahora, la parte importante.
Como hemos dicho antes, la navegación del sitio web para tablet y móvil aparecerá como una ventana emergente.
Así que vamos a crear nuestro menú emergente para tablet y móvil.

En primer lugar, tienes que volver al panel de control de WordPress pulsando CMD/CTR – E -> escribe «Panel de control» -> haz clic en Panel de control.

Ahora crea tu primera ventana emergente.

Para crear Popups con Elementor Pro, tienes que dirigirte a «Plantillas» -> «Popups» -> y «Añadir nuevo Popup».

Llámalo Menú Móvil y pulsa «Crear Plantilla».

Una vez más, cierra la pestaña inicial para utilizar las plantillas prediseñadas y ya deberías estar listo para personalizar tu ventana emergente.

En primer lugar, asegúrate de que estás trabajando en la vista de tableta, ya que esta ventana emergente sólo se mostrará en tabletas y dispositivos móviles.

Recuerda: Cualquier cambio o modificación que hagas en la vista de tableta, se aplicará automáticamente en cascada (también se aplicará) a la vista móvil.

Ahora, vamos a empezar configurando algunos ajustes esenciales para la propia ventana emergente.

Dirígete a la configuración global de las ventanas emergentes , en la parte inferior izquierda (junto al botón «Publicar»).

Aquí tenemos la configuración global de las ventanas emergentes.

Primero, en la pestaña «Ajustes» la anchura de la ventana emergente a «VW» y fija el valor a 90.
«Altura» debe ser «Ajustar a la pantalla» y «Posición del contenido» Centrar.

Esto garantiza que ocupe al menos el 90% de la anchura de la ventana gráfica y el 100% de la altura de la pantalla.

Luego, configura la «Horizontal» a «Izquierda», la vertical tal cual.
La Animación de Entrada y Salida depende de ti, pero, yo las puse Fundido a la Izquierda y Fundido a la Derecha.
Asegúrate de que la duración es inferior a 1 segundo para que aparezca rápidamente.

Para la pestaña «Estilo».

Cambia el color a lo que quieras (blanco en mi caso).

Pestaña Avanzado:

Lo único que tienes que cambiar es la opción «Desactivar desplazamiento de página» -> que está en «Sí».

Ahora ya puedes añadir contenido al menú emergente.

Haz clic en el icono más y añade un widget contenedor (Flexbox -> Dirección – columna).
Este será nuestro envoltorio principal (que lo mantiene todo unido).

Ahora deberías tener un contenedor en el centro de la ventana emergente.

Vamos a configurar algunos ajustes importantes para este contenedor envoltorio.

1. En la pestaña «Diseño», ajusta la «Anchura del contenido» a 100%, la «Dirección» a columna – vertical, el cnetro «Justificar» y la «Alineación de elementos» al inicio.
   «Espacios» a 0 y 0.
2. pestaña «Estilo», puedes dejarla como está.
3. pestaña «Avanzado», añade una gran cantidad de relleno a todos los lados, como 60px.

Añadir un menú de WordPress a la ventana emergente

Ahora que tenemos nuestro contenedor envolvente principal, podemos añadir un menú WordPress y establecerlo como nuestro menú de navegación principal para esta ventana emergente.

Igual que antes, añade el widget de menú de WordPress al contenedor envolvente principal.
Selecciona el menú (Menú principal de cabecera en este caso).

A partir de ahora, verás nuestro menú WordPress configurado como un menú hamburguesa.
Esto se debe a que actualmente estamos en la vista de tableta.

Nota: Por defecto, el menú de WordPress tiene un valor de punto de interrupción para Retrato de tableta (< 1024px).
Esto significa que si la anchura de la ventana está por debajo de este valor, el menú de WordPress se configurará automáticamente como un menú hamburguesa.

Cambiemos esto configurando nuestros ajustes de «Contenido»…

1. Dirígete a «Punto de ruptura» -> configúralo como «ninguno».
2. Configura el «Diseño» -> Vertical.
3. «Alineación» -> Inicio
4. «Puntero» -> ninguno.

Ahora, el «Estilo»…

1. «Tipografía» -> establece la «Familia» de fuentes en la fuente de tu marca -> «Tamaño» en 4em -> «Peso» en SemiBold (opcional) -> «Altura de línea» en 1,5em (o lo que consideres oportuno).
2. Ajusta el color «Normal» al color de tu fuente -> «Hover» al color de tu marca -> «Activo» también al color de tu marca.
3. «Relleno horizontal» a 0 -> «Relleno vertical» a 15px -> «Espacio entre» a 0.

Deberías tener algo así:

Ahora, el importantísimo botón CTA.

Vamos a añadir este botón justo debajo de nuestro menú de WordPress.

1. Selecciona el contenedor envoltorio utilizando el Navegador de elementos de la derecha.
2. Ve a la sección de widgets y añade un botón simplemente haciendo clic sobre él.
3. Estiliza el botón utilizando los colores de tu marca.

Ahora deberías tener el botón CTA principal justo debajo de tu menú de WordPress.
Ahora vamos a hacer algunos cambios menores para dispositivos móviles.
Dirígete a la vista móvil…

Para asegurarnos de que este menú emergente es responsivo tanto para tablet como para móvil, tenemos que ajustar el tamaño de la fuente para móvil.
Una vez en la vista móvil, vuelve al menú de WordPress -> pestaña «Estilo».

«Tipografía» -> Cambia el tamaño de la fuente a algo más apropiado como 2,3em.

Si encaja y todo se ve bien, deberías haber terminado con el menú emergente.

Nota: No tienes por qué detenerte ahí.
Puedes añadir más elementos de navegación y widgets a este menú emergente y personalizarlo a tu gusto.

Para terminar con este menú emergente, necesitamos «Publicar» -> Condiciones establecidas en Incluir: Todo el sitio -> Disparadores sin cambios -> «Reglas avanzadas» configuradas en Mostrar en dispositivos «Sí» y asegúrate de quitar «Escritorio» -> «Guardar y cerrar».

Ahora, sólo tenemos que conectarlo a la barra de navegación que hemos creado antes.

Conectar nuestro menú emergente y la barra de navegación del sitio web

Ahora, sólo es cuestión de activar el menú emergente que acabamos de hacer a la animación de Lottie que tenemos dentro de la navbar de cabecera.
Para ello, volvamos al panel de control de WordPress pulsando CMD/CTR E -> escribe «Panel de control» .
Vuelve al constructor de temas Elementor Pro.

«Plantillas» -> «Creador de temas».

Selecciona la cabecera de antes y haz clic en «Editar».
Conectaremos el menú emergente a nuestra animación Lottie.
Esto es lo que activará el menú emergente al hacer clic.

Entonces, selecciona el widget Lottie -> establece el valor «Enlace» en «URL personalizada».

1. Selecciona el botón de etiqueta dinámica -> ve a la categoría «Acción» -> selecciona «Ventana emergente»
2. Haz clic en el icono del rench -> busca el «Menú Móvil» -> selecciónalo.

Ahora, cada vez que se haga clic en el icono Lottie, se activará la ventana emergente Menú móvil.

Prueba y perfecciona tu navegación

Probar y perfeccionar la navegación de un sitio web es un proceso continuo que implica recoger opiniones de los usuarios, analizar el rendimiento de la navegación y optimizar iterativamente el sistema de navegación basándose en las interacciones de los usuarios.

• Recoger las opiniones de los usuarios mediante encuestas, mapas de calor y grabaciones de sesiones proporciona información valiosa sobre las preferencias de los usuarios, sus pautas de comportamiento y las áreas que necesitan mejoras en la navegación.

Por ejemplo, el efecto de desenfoque y el menú emergente parecen funcionar bien.
Sin embargo, veo algunos problemas con el icono de Lottie.
Es un poco demasiado grande para mi gusto.

Así que, volvamos al «Constructor de temas» -> «Encabezado» -> «Editar»

Asegúrate de hacer clic en el widget Lottie en el navegador de Elementor y reduce el tamaño a algo más pequeño, como 60px.

Hazlo tanto para la vista de Tableta como para la de Móvil.

Sigue probando y analizando la barra de navegación de tu sitio web y haz los cambios necesarios antes de ponerla en marcha.

Preguntas frecuentes

¿Cómo puedo crear una navegación web fácil de usar?

Hay varios elementos clave para crear una navegación web fácil de usar.
Entre ellos, mantener la navegación sencilla y organizada, utilizar etiquetas claras y concisas, e incluir opciones de búsqueda y filtrado para facilitar la navegación.

¿Por qué es importante tener una navegación web fácil de usar?

Una navegación por el sitio web fácil de usar es crucial para proporcionar una experiencia positiva al usuario.
Permite a los visitantes encontrar fácilmente lo que buscan, reduce la frustración y la confusión y, en última instancia, aumenta las tasas de conversión y la satisfacción del cliente.

¿Cuáles son los errores más comunes que hay que evitar al crear una navegación web fácil de usar?

Algunos errores comunes que debes evitar son tener demasiadas opciones de navegación, utilizar etiquetas poco claras o vagas y no optimizarla para los usuarios móviles.
También es importante probar y actualizar periódicamente tu navegación para asegurarte de que sigue siendo fácil de usar.

¿Cómo puedo mejorar la navegación actual de mi sitio web?

Puedes mejorar la navegación de tu sitio web realizando pruebas con los usuarios, utilizando análisis para ver cómo navegan los visitantes por tu sitio y poniendo en práctica los comentarios de tu audiencia.
Además, revisar y actualizar periódicamente tu navegación puede ayudar a mejorar su usabilidad.

¿Cuáles son algunas de las mejores prácticas para crear una navegación web fácil de usar?

Algunas de las mejores prácticas son mantener la coherencia de la navegación en todas las páginas, utilizar una jerarquía lógica con categorías principales y subcategorías, e incluir un botón de llamada a la acción claro y destacado.
También es importante tener en cuenta las necesidades y preferencias de tu público objetivo.

¿Cómo puedo asegurarme de que la navegación de mi sitio web es accesible para todos los usuarios?

Para garantizar la accesibilidad, utiliza etiquetas alt para las imágenes, proporciona opciones de navegación mediante el teclado y evita utilizar fuentes pequeñas o de bajo contraste.
También es importante seguir las directrices de accesibilidad web y probar regularmente tu navegación con tecnologías de apoyo.