Menús, widgets y navegación
Diseña una navegación coherente para escritorio y móvil, con menús y widgets que guíen al usuario sin saturar ni duplicar rutas.
La navegación define si el usuario encuentra valor rápido o abandona el sitio: menús y widgets deben responder a objetivos reales, no a preferencias del editor.
Trabaja con rutas concretas como <code>Apariencia > Menús</code>, <code>Apariencia > Widgets</code> y, en temas de bloques, <code>Apariencia > Editor</code> para controlar navegación global.
Un menú profesional prioriza tareas clave del usuario (comprar, contactar, comparar, leer) y evita duplicidades que compiten entre sí.
Los widgets deben tener función medible: apoyar descubrimiento de contenido, conversión o confianza. Si un widget no cumple objetivo, estorba.
- Diseñar menús no es “ordenar enlaces”: es traducir objetivos de negocio y necesidades del usuario en rutas claras.
- Empieza por mapear intenciones: qué quiere hacer el usuario principal en los primeros 30 segundos. Esa lista define la jerarquía de tu menú.
- Después construye estructura primaria (cabecera), secundaria (footer) y contextual (widgets o bloques laterales) con responsabilidades distintas.
- Revisa consistencia entre desktop y móvil: un menú perfecto en escritorio puede romperse en pantallas pequeñas si no hay priorización real.
- Ruta principal: <code>Apariencia > Menús</code>
Fundamentos de arquitectura de navegación
Diseñar menús no es “ordenar enlaces”: es traducir objetivos de negocio y necesidades del usuario en rutas claras.
Empieza por mapear intenciones: qué quiere hacer el usuario principal en los primeros 30 segundos. Esa lista define la jerarquía de tu menú.
Después construye estructura primaria (cabecera), secundaria (footer) y contextual (widgets o bloques laterales) con responsabilidades distintas.
Revisa consistencia entre desktop y móvil: un menú perfecto en escritorio puede romperse en pantallas pequeñas si no hay priorización real.
- Ruta principal: <code>Apariencia > Menús</code>
- Ruta de apoyo: <code>Apariencia > Widgets</code>
- En themes de bloques: <code>Apariencia > Editor</code>
- Primera regla: no duplicar rutas con distinto nombre
Claves teóricas para navegación útil
Estas decisiones mejoran usabilidad, reducen fricción y facilitan mantenimiento a largo plazo.
Flujo práctico de implementación
Este proceso te permite pasar de un menú “bonito” a una navegación que realmente guía al usuario.
<strong>Paso 1</strong>: diseña mapa de navegación (5–7 rutas principales máximo) y asigna prioridad por objetivo de negocio.
<strong>Paso 2</strong>: implementa en <code>Apariencia > Menús</code> o en <code>Apariencia > Editor</code> si usas FSE, manteniendo nombres claros y predecibles.
<strong>Paso 3</strong>: configura widgets en <code>Apariencia > Widgets</code> con función concreta (descubrimiento, confianza o conversión) y elimina ruido visual.
- Diseñar jerarquía principal
- Asignar ubicaciones (header/footer/contextual)
- Validar experiencia móvil
- Auditar interacción y simplificar
Checklist de calidad de navegación
No avances hasta comprobar que el usuario encuentra lo importante en pocos clics y sin ambigüedades.
Testea tareas reales: localizar contacto, llegar a una categoría clave, volver al inicio y descubrir contenido relacionado.
Comprueba que no hay rutas duplicadas con etiquetas distintas, ni menús extensos que obliguen a pensar demasiado para acciones básicas.
Registra resultados y decisiones: una arquitectura estable requiere trazabilidad para evitar cambios caprichosos en siguientes iteraciones.
- Menú principal claro y escaneable
- Widgets con utilidad demostrable
- Coherencia desktop/móvil
- Cambios documentados con criterio