Constructor de Barras de Navegación – Menús que se Ven Bien

Usa el Constructor de Barras de Navegación gratuito abajo: tus datos nunca salen de tu navegador, todo el trabajo ocurre en tu dispositivo y no se sube a ningún servidor.

Qué Debe Hacer una Barra de Navegación

Una barra de navegación tiene un trabajo pequeño y exigente. Debe decir a los visitantes dónde están, mostrarles adónde pueden ir y quitarse de en medio. Cada sitio necesita una, y cada visitante la juzga en segundos: si los enlaces son claros y la barra se ve ordenada, confían en el sitio. Si la barra está abarrotada, se parte o confunde, suponen que el sitio también lo está. La herramienta de arriba construye una barra con tu texto de logotipo, tus enlaces y la etiqueta de tu botón, la muestra en vivo y te da código HTML para pegar en tu sitio.

El constructor ofrece tres diseños. Logotipo a la izquierda con enlaces en el centro es la opción clásica y sirve para la mayoría de los sitios. Todo a la derecha sirve para páginas de aterrizaje donde el logotipo importa menos que la acción. Todo centrado sirve para sitios pequeños y portafolios donde la simetría forma parte del aspecto. Prueba cada diseño con tus enlaces reales antes de elegir, porque un diseño que se ve bien con cuatro enlaces cortos puede romperse con seis enlaces largos.

Cómo Usar el Constructor

Escribe primero el texto del logotipo. Un nombre de marca corto funciona mejor; una frase larga como logotipo llena la barra y no deja sitio para los enlaces. Después escribe tus enlaces, separados por comas. Cuatro o cinco enlaces es el punto ideal para la mayoría de los sitios. Pon las páginas más importantes primero, porque los usuarios exploran desde la izquierda, y las menos importantes al final, donde se pueden quitar en pantallas pequeñas. Después escribe la etiqueta del botón como una acción, como empieza ahora o reserva una llamada, en lugar de un sustantivo.

Después elige el color de la barra y el color del botón. El color de la barra marca el tono: las barras oscuras se ven formales y fuertes, las claras se ven abiertas y amables. El color del botón debe contrastar con la barra, porque el botón es la única acción que quieres que los visitantes hagan. Si el botón se funde con la barra, los visitantes no lo encontrarán. Por último, comprueba la vista previa en una ventana estrecha. Una barra que funciona a ancho completo pero se parte en dos filas desordenadas en un teléfono necesita menos enlaces o etiquetas más cortas.

Elegir Enlaces que Merezcan su Lugar

Cada enlace en una barra cuesta atención. Una barra con diez enlaces dice a los visitantes que todo es igual de importante, lo que significa que nada lo es. Recorta sin piedad: las páginas que pocos visitantes necesitan, como una página de empleo o un kit de prensa, pertenecen al pie de página, no a la barra. Las páginas que todos necesitan, como precios, herramientas o contacto, pertenecen a la barra. Si no sabes si una página pertenece, revisa tus estadísticas: las páginas casi sin tráfico desde la navegación son candidatas al pie.

Etiqueta los enlaces con las palabras que usan los visitantes, no con tu jerga interna. Los usuarios buscan precios, no planes de monetización, y ayuda, no recursos de éxito del cliente. Las etiquetas cortas también ayudan en teléfonos, donde cada carácter cuenta. Prueba tus etiquetas preguntando a un desconocido qué significa cada una; si duda, reescríbela.

Errores Comunes en Barras de Navegación

El error más común es demasiados enlaces, que parten la barra en teléfonos y entierran el botón. El segundo es un botón que parece un enlace, porque usa el mismo color y peso que los enlaces que lo rodean. El tercero es un logotipo demasiado grande, que come el espacio que necesitan los enlaces. El cuarto es una barra que cambia en cada página, que obliga a los visitantes a reaprender la navegación mientras navegan. Mantén la barra idéntica en todas las páginas, el logotipo moderado y el botón inconfundible.

Otro error es esconder el botón detrás de un menú en escritorio. La llamada a la acción debe verse sin pulsar nada, porque cada clic extra pierde visitantes. Los menús son para teléfonos, donde el espacio de verdad escasea, no para escritorio, donde la barra tiene sitio.

Preguntas Frecuentes

¿Cuántos enlaces debe tener una barra? Cuatro o cinco para la mayoría de los sitios, siete como máximo absoluto. Más que eso pertenece a un pie de página o a un desplegable, y los desplegables deben ser un último recurso, no la opción por defecto.

¿Debe la barra quedarse fija al desplazar la página? Una barra fija ayuda en páginas largas, porque los visitantes pueden navegar sin volver arriba. Cuesta espacio vertical en teléfonos, así que pruébala en una pantalla pequeña antes de decidir.

¿Puedo pegar el código generado en cualquier sitio? Sí. Es HTML plano con estilos en línea. Añade tus enlaces reales a las anclas y ajusta los colores a tu marca.

Construye una barra arriba, recórtala hasta que quepa en un teléfono y pega el código en tu sitio.

Herramientas relacionadas

• Navbar Layout Builder (English version)
• Constructor de Secciones Principales
• Ilustrador de Cubos Isométricos