Si algo he aprendido después de diseñar decenas de sitios (tiendas online, academias, webs corporativas y landings) es que el menú móvil no es un “detalle”. Es literalmente el punto de entrada a tu web para la mayoría de tus usuarios. Y cuando el menú en móvil es incómodo, lento o confuso, el usuario rebota… aunque tu diseño sea precioso.

Por eso grabé este tutorial: para enseñarte cómo crear un menú móvil responsivo estilo app usando un plugin gratuito del repositorio de WordPress que funciona con Divi 5, con Divi 4 y con cualquier tema (sí, incluso si no usas Divi). El plugin se llama WP Mobile Button Menu (lo encuentras como wp-mobile-button-menu).

Por qué un menú inferior tipo app puede mejorar tu web (y tus conversiones)

El patrón de navegación inferior (bottom navigation) es el que usamos todos los días en aplicaciones: botones grandes, accesibles con el pulgar, con iconos claros y acciones directas como “Inicio”, “Tienda”, “Carrito”, “Cuenta”.

En sitios WordPress, especialmente e-commerce o academias, este patrón suele funcionar muy bien porque:

• Reduce la fricción de navegación en móvil.
• Hace más fácil llegar al carrito, tienda o cuenta en 1 toque.
• Mejora la usabilidad (sobre todo en pantallas grandes).
• Se siente moderno y “app-like”.
• Puede reemplazar menús pesados o mega menús que en móvil se vuelven un caos.

Consejo rápido: si tu web vende algo (servicios, cursos o productos), yo siempre priorizo que el menú móvil tenga acciones más que “secciones bonitas”. En móvil lo importante es que el usuario llegue rápido a lo que le interesa.

El plugin que usamos es: WP Mobile Button Menu

Este plugin está en el repositorio oficial de WordPress y tiene:

Versión gratuita (más que suficiente para un menú sencillo)

Con la versión free puedes:

• Crear un menú inferior en móvil con iconos y texto.
• Configurar estilos base (colores, bordes, radios, sombra, padding).
• Definir el breakpoint (a partir de qué ancho se activa).
• Ajustar el z-index para que se superponga correctamente.
• Elegir cantidad de botones del menú y alineación.

Versión PRO (si tienes menús grandes o e-commerce más avanzado)

La versión pro agrega cosas interesantes como:

• Soporte de submenús (menús hijos).
• Más personalización de submenús.
• Search box (caja de búsqueda integrada).
• Previsualización en tiempo real.
• Integración con carrito WooCommerce (muy útil si quieres comportamientos más avanzados).

En el tutorial yo menciono que, al momento de grabación, el plugin estaba en descuento y el pricing anual se veía bastante accesible, especialmente si lo piensas para tiendas online.

Paso a paso: instalar y activar el plugin en WordPress

Aquí va el flujo exacto como lo hago yo:

1) Instalar el plugin

1. Ve a Plugins > Añadir nuevo
2. Busca: wp-mobile-button-menu
3. Instálalo y actívalo

Cuando lo activas, vas a ver una nueva sección de configuración. En el tutorial aparece como WNavBarSettings (o una pestaña similar dentro del admin).

Consejo rápido: abre tu sitio en móvil desde el inicio (o usa el inspector del navegador) para ir revisando cambios mientras configuras. Es la forma más rápida de ajustar sin adivinar.

Configuración general: breakpoint, ancho, z-index y estilo base

Dentro de las opciones generales del plugin hay 3 ajustes que yo considero obligatorios:

Breakpoint: cuándo aparece el menú móvil

El breakpoint suele venir en 768px, que normalmente significa: todo lo que sea menor a 768px (móvil y algunos tablets) activa el menú.

• Si quieres que también se active en tablet, puedes subirlo a 960px o 1024px.
• Pero cuidado: algunos laptops viejos o ventanas pequeñas podrían activar el menú si subes demasiado ese valor.

Mi recomendación: deja 768px para la mayoría de webs. Es el punto más estándar.

Max width: ancho máximo del menú

En el tutorial aparece un ancho máximo de 300px. Este valor depende del “skin” o template que elijas y de cómo el plugin interprete el contenedor. Yo suelo ajustarlo después de definir el diseño final.

Z-index: que el menú quede por encima de todo

Este es clave. Yo casi siempre lo pongo en 9999.

¿Por qué? Porque si tu web tiene banners, sliders, cabeceras sticky, modales o cualquier elemento con z-index alto, el menú puede quedar debajo y “desaparecer” parcialmente.

Regla simple: el z-index del menú debe ser mayor que cualquier otro z-index importante en tu sitio.

Elegir un tema prehecho (Premade Themes) para avanzar más rápido

Una parte que me gusta mucho del plugin es que trae temas prehechos (premade themes). Esto te permite empezar con un estilo base (oscuro, claro, etc.) sin diseñar desde cero.

En mi caso, para el sitio del tutorial (que es una tienda), un tema claro tenía más sentido que uno oscuro. Así que elegí el tema claro e importé el template.

Si al importarlo no ves reflejado el estilo inmediatamente, no entres en pánico: a veces el cambio real se nota al recargar, o tienes que ajustar manualmente colores base en “Menu Styles”.

Consejo rápido: usa el tema prehecho como base, pero luego personaliza colores e iconos para que coincida con tu branding. Un menú móvil se ve “premium” cuando parece diseñado para tu web, no cuando parece plugin genérico.

Ajustar el menú real: se hace desde Apariencia > Menús

Este punto es importantísimo y mucha gente se lo salta.

Aunque configures estilos en el panel del plugin, los elementos del menú (qué botones aparecen) se ajustan desde:

Apariencia > Menús

Ahí vas a ver un nuevo menú creado por el plugin, algo como Skin1Menu (o un nombre similar). En ese menú vas a definir:

• Qué páginas aparecen (Inicio, Tienda, Carrito, Mi cuenta, Checkout, etc.)
• El orden de los ítems
• Si muestra texto
• Si muestra icono
• Qué icono usar en estado normal y activo
• Incluso puedes usar iconos del plugin o subir una imagen (PNG/SVG) si quieres.

En el tutorial yo limpio el menú de ejemplo y creo uno más lógico para tienda:

• Home
• Shop (Tienda)
• Cart (Carrito)
• Account (Mi cuenta)
• Checkout (opcional)

Configuración de iconos: cómo hacer que se vea moderno de verdad

El plugin incluye una librería de iconos (en el tutorial se siente como Font Awesome antiguo o una librería propia). No siempre vas a encontrar el icono perfecto con el nombre exacto, así que hay que buscar con paciencia.

Yo normalmente hago esto:

1. Elijo un icono claro para el estado normal (por ejemplo, “cart”)
2. Elijo el mismo (o una variación) para el estado activo
3. Defino colores distintos para normal vs activo

Ejemplo real (como lo hago en el tutorial):

• Iconos normales en un color sobrio (verde/gris oscuro)
• Icono activo en el color principal del branding (en el sitio era un naranja)

Esto ayuda muchísimo a que el usuario entienda dónde está parado.

Estilos recomendados: menú flotante, blur y sombra (mi configuración favorita)

Una vez que el menú está funcionando, el salto de calidad está en los estilos. Y aquí te doy mi configuración favorita para que se vea moderno:

Fondo y transparencia (efecto “frosted glass”)

• Fondo del menú: blanco con un poquito de transparencia
• Blur suave (si tu diseño lo permite)

Esto crea un efecto tipo iOS que se ve muy bien.

Bordes y border radius

• Border radius: 10px (o más, según tu estilo)
  Esto ayuda a que el menú se sienta “app-like” y flotante.

Sombra sutil (para fondos blancos)

Si tu sitio tiene secciones blancas, un menú blanco puede “desaparecer”. La sombra lo resuelve.

Yo uso una sombra suave, con blur alto y opacidad baja. La idea no es que se note como “caja pesada”, sino que se separe del fondo.

Consejo rápido: si tu menú se ve raro, revisa si el padding y margin están aplicados en “General” o en “Menu Styles”. En el tutorial yo hago ese ajuste porque algunos valores no se aplicaban donde yo esperaba, y moví margin/radius al lugar correcto para que el conjunto funcionara.

Cuántos botones poner (y cuáles elegir)

En un menú inferior yo recomiendo:

• 4 botones: ideal para sitios simples
• 5 botones: ideal para e-commerce
• 6 botones: solo si realmente lo necesitas (si no, se empieza a ver saturado)

Para tiendas online, mi set recomendado es:

• Inicio
• Tienda
• Carrito
• Cuenta
• Checkout (opcional) o Buscar (si tu web tiene catálogo grande)

Para academias o membresías:

• Inicio
• Cursos
• Comunidad
• Mi cuenta
• Soporte (opcional)

Consejo rápido: si tu menú móvil tiene “Checkout”, úsalo con intención. En algunos casos prefiero dejarlo fuera para que el usuario no salte pasos. En otros (tiendas con recompra frecuente), es útil.

Compatibilidad con Divi 5 y por qué esto encaja perfecto con el ecosistema

Algo que me gusta de este enfoque es que no depende del tema. Es decir:

• Si estás en Divi 5, funciona.
• Si estás en Divi 4, funciona.
• Si estás en otro tema, funciona igual.

Y eso es oro, porque el menú móvil suele ser un punto débil en muchos proyectos, especialmente cuando quieres algo más avanzado que el típico “hamburguesa + lista”.

En el tutorial yo muestro este plugin sobre un sitio hecho 100% con Divi 5, y se nota lo bien que combina: Divi 5 es rápido, el sitio está optimizado, y el menú inferior termina de redondear una experiencia móvil moderna.

Recomendaciones finales para que tu menú móvil se sienta premium

Antes de cerrar, te dejo mis recomendaciones finales (las que aplico en proyectos reales):

• Diseña el menú móvil pensando en el pulgar: botones grandes y acciones claras.
• Usa máximo 5 ítems salvo que tengas una razón real para más.
• Alinea los colores del menú con tu branding (normal vs activo).
• Mantén los textos cortos (una palabra si es posible).
• Si tu web es e-commerce, prioriza Tienda, Carrito y Cuenta.
• Si tu web es academia, prioriza Cursos y Cuenta (y Comunidad si aplica).
• Si tu sitio tiene fondo blanco, usa sombra sutil para separar el menú.
• No te cases con el template prehecho: úsalo como base, pero ajústalo.

Cursos y contenidos recomendados en UXDivi

Si quieres llevar esto al siguiente nivel (sobre todo si estás construyendo tiendas o sitios completos con Divi 5), te recomiendo estos contenidos que ya tenemos en uxdivi.com/cursos:

• Bootcamp Técnico: Construir una tienda online (en el tutorial menciono que este sitio lo trabajamos ahí y está hecho 100% con Divi 5).
• Divi 5 en fase de desarrollo (para aprender las nuevas bases, rendimiento y buenas prácticas mientras Divi evoluciona).
• Contenidos de Flexbox, Loop Builder y CSS Grid (porque si tu móvil está bien resuelto, el resto del diseño responsive se vuelve muchísimo más fácil de optimizar).

Si estás creando proyectos para clientes, dominar la experiencia móvil te va a dar una ventaja enorme, porque la mayoría sigue diseñando “desktop-first” y luego sufre en móvil. Yo prefiero hacerlo al revés: dejar móvil impecable y que el sitio se sienta como una app.