La mayoría de los menús móviles de WordPress se ven bien hasta que los compruebas en tu teléfono. Los enlaces están muy juntos, el icono de hamburguesa no se abre o estás mostrando un menú de escritorio de 10 elementos en una pantalla pequeña.
En esta guía, te mostraré cómo solucionarlo. Aprenderás a habilitar el icono de hamburguesa, controlar qué se muestra en el móvil y configurar un menú separado para pantallas pequeñas. También cubro los problemas más comunes de los menús móviles.
Cómo editar el menú móvil en WordPress
¿Necesitas cambiar los enlaces que aparecen en tu menú? Consulta cómo editar tu menú de WordPress. ¿Quieres cambiar el estilo o los colores de tu menú? Consulta cómo personalizar tu menú de WordPress.
El primer método de esta guía utiliza SeedProd para un control visual completo (se requiere SeedProd Pro). El segundo utiliza el plugin gratuito Responsive Menu. Haz clic a continuación para saltar a tu método:
Personaliza menús móviles con el constructor de sitios web SeedProd
Yo uso SeedProd en mi propio sitio, y los controles de visibilidad móvil son una de las características en las que más confío. Para empezar, te mostraré cómo usar SeedProd para personalizar y editar menús móviles visualmente, sin código.
Viene con cientos de plantillas prefabricadas, una interfaz de arrastrar y soltar, y innumerables elementos de diseño para que personalizar cualquier página de WordPress sea muy fácil. Ya sea que tu menú esté en tu encabezado, pie de página o barra lateral de WordPress, puedes editarlo fácilmente con el constructor de SeedProd.
Además, las potentes opciones de visibilidad de este plugin te permiten ocultar elementos de diseño específicos en pantallas móviles o de escritorio. Como resultado, puedes adaptar tus menús de navegación a diferentes tamaños de pantalla.
Paso 1. Instalar y Activar SeedProd
Para empezar, necesitarás descargar el plugin del sitio web de SeedProd. Aunque SeedProd tiene una versión gratuita, usaremos SeedProd Pro por sus funciones de creación de temas de WordPress.
Nota: Se requiere SeedProd Pro para el Theme Builder. Cuando activas el tema SeedProd, reemplaza tu tema activo actual. Puedes volver a cambiar en cualquier momento desde el panel del Theme Builder.
Si necesitas ayuda, puedes consultar esta guía sobre cómo instalar un plugin de WordPress.
Después de la activación, dirígete a SeedProd » Ajustes, donde puedes introducir tu clave de licencia del plugin. Encontrarás esta información en la sección Descargas de tu panel de cuenta de SeedProd.
Pega tu clave en el campo en blanco y haz clic en el botón Verificar clave para guardar tu licencia.
Paso 2. Elegir una Plantilla Prediseñada
A continuación, deberás elegir un diseño prefabricado para usar como punto de partida. Puedes crear un tema de WordPress completamente nuevo desde cero con el Theme Builder o crear páginas individuales con el constructor de páginas de destino.
Para esta guía, usaremos el Theme Builder, pero si prefieres crear una página de destino, puedes seguir esta guía sobre cómo crear una página de destino en WordPress.
Para elegir un diseño predefinido para tu tema de WordPress, navega a SeedProd » Theme Builder desde tu panel de WordPress y haz clic en el botón Theme Template Kits.
Esto abrirá la biblioteca de plantillas de sitios web predefinidas de SeedProd que puedes instalar con 1 clic.
Simplemente desplázate por los diseños hasta que encuentres una plantilla que te guste, luego haz clic en el icono de marca de verificación para importarla.
Una vez que importes tu kit de sitio web, verás todas las partes de la plantilla de tu tema en una lista como esta:
Estas son las plantillas individuales que componen tu tema completo, y puedes personalizar cada una de ellas con el constructor de páginas de arrastrar y soltar de SeedProd.
¡Te mostraremos cómo hacerlo a continuación! Es súper fácil y no requerirá escribir ningún código HTML, Jquery o CSS personalizado.
Paso 3. Personalizar la Plantilla de Encabezado
Dado que el menú de WordPress que queremos editar está en el encabezado, desplázate por las partes de tu plantilla hasta encontrar la plantilla de encabezado. Luego, pasa el ratón por encima y haz clic en el enlace ‘Editar Diseño’.
Cuando se abra, verás un diseño con una vista previa en vivo de tu encabezado a la derecha y bloques de WordPress a la izquierda. Puedes arrastrar cualquier bloque a la vista previa para agregar fácilmente nuevos elementos a tu página.
Al hacer clic en los elementos de tu encabezado, puedes ver su configuración en la barra lateral izquierda. Por ejemplo, al seleccionar el logo se abrirán opciones para cambiar la imagen del logo y su tamaño, alineación y enlace.
De manera similar, al hacer clic en el bloque Nav Menu se mostrarán diferentes configuraciones de menú.
Por ejemplo, el bloque te permite elegir entre un menú 'Simple' o 'WordPress'.
La opción Simple te permite agregar nuevos elementos de menú dentro de la interfaz del constructor de páginas. Puedes agregar enlaces a cualquier página, publicación, categoría, etiqueta o página web externa.
Debido a que este es un enfoque simple para la creación de menús, no puedes agregar menús desplegables, elegir menús personalizados que ya hayas creado o asignar un menú móvil personalizado.
Sin embargo, puedes personalizar la alineación del menú, el tamaño de fuente, el espaciado y el divisor. Además, en la pestaña Avanzado, puedes elegir entre menús horizontales y verticales y personalizar la tipografía, los colores de fondo, los bordes, las clases CSS y más.
La opción WordPress Menu tiene un enfoque diferente. Puedes elegir ubicaciones de menú existentes en el menú desplegable y activar el control deslizante del menú de navegación móvil para tamaños de pantalla pequeños.
Cuando activas esta configuración y cambias a la vista móvil, verás que tu menú móvil tiene un icono de hamburguesa en lugar de enlaces de menú estándar, lo que es mucho mejor para la experiencia del usuario móvil.
También tiene un enlace a la página de menú predeterminada de WordPress para editar el diseño de tu menú. Al igual que el menú Simple, la pestaña Avanzado tiene opciones de personalización y animación, y a diferencia del menú simple, puedes personalizar las opciones de estilo de tu submenú.
Paso 4. Editar la Configuración de Visibilidad de tu Encabezado
Hasta ahora, sabes cómo editar tu menú principal y activar un menú hamburguesa para pantallas móviles. Pero, ¿qué pasa si hay elementos en tu encabezado que no quieres mostrar en pantallas más pequeñas?
La buena noticia es que puedes editar la configuración de visibilidad de cada elemento de la página y elegir qué se muestra en diferentes tamaños de pantalla.
Digamos que quieres ocultar la llamada a la acción (CTA) de tu encabezado en dispositivos móviles porque perjudica la experiencia del usuario. En ese caso, puedes ir a la pestaña de configuración Avanzada de ese bloque y activar el interruptor 'Ocultar en móvil' en el menú Visibilidad del dispositivo.
Cuando previsualices tu encabezado en vista móvil, verás que está atenuado, lo que significa que el botón no será visible para los visitantes móviles.
Continúa personalizando las opciones de tu menú móvil hasta que estés satisfecho con cómo se ve todo. Luego, haz clic en el botón Guardar para guardar tus cambios.
Paso 5. Continúa personalizando tu tema de WordPress
Una vez que tu menú móvil esté funcionando, usa el constructor de SeedProd para personalizar el resto de tu tema. Puedes editar tu pie de página, página de inicio y cualquier otra parte de la plantilla desde el mismo panel.
Paso 6. Publica tus cambios
Cuando estés listo para que tus cambios se publiquen en tu sitio de WordPress, regresa al panel del constructor de temas de SeedProd y busca el interruptor llamado 'Habilitar tema de SeedProd'. Simplemente cambia este interruptor a la posición 'Sí' para activar tu tema de SeedProd.
Ahora puedes visitar tu sitio web y ver tu menú móvil en acción.
Alternativa: Edita menús móviles con un plugin gratuito de WordPress
Otra forma de editar tus menús móviles es usando un plugin de menú de WordPress. Por ejemplo, con el plugin que usaremos a continuación, puedes crear un menú hamburguesa que se desliza en las pantallas móviles.
Primero, deberás descargar, instalar y activar el plugin de WordPress Responsive Menu.
Una vez activado el plugin, verás una nueva etiqueta llamada 'Responsive Menu' en tu barra de administración de WordPress. Al hacer clic en ella, accederás a la pantalla del menú para agregar un nuevo menú responsive.
Así que haz clic en el botón Crear nuevo menú. Verás una ventana emergente con diferentes temas de menú para elegir, incluyendo predeterminado, Azul Eléctrico, Pantalla Completa y más.
Elige un tema que te guste y luego haz clic en el botón Siguiente.
Ahora puedes introducir un nombre para tu menú, elegir un menú de WordPress existente para mostrar y hacer clic en el botón Crear menú.
Ahora, verás una interfaz visual donde puedes editar las opciones de tu menú responsive. Puedes mostrar y ocultar diferentes elementos y cambiar el ancho mínimo y máximo de pantalla responsive móvil.
El plugin de menú responsive tiene muchas otras opciones de menú móvil para cambiar el comportamiento y la apariencia de tu menú. Puedes explorarlas en esta página y ajustarlas según sea necesario.
No olvides hacer clic en el botón 'Actualizar' para guardar tu configuración.
Desde allí, puedes visitar tu sitio web para ver el menú responsive en acción.
Cómo mostrar un menú diferente en el móvil
Los teléfonos móviles representan ahora casi el 60% del tráfico web mundial, pero la mayoría de los sitios de WordPress muestran el mismo menú en todos los dispositivos. Puedes mostrar un menú más corto y sencillo en el móvil, manteniendo el menú completo en el escritorio.
Esto me resulta muy útil cuando un menú de escritorio tiene demasiados elementos para funcionar en una pantalla pequeña.
Opción 1: Usa la ubicación del menú móvil de tu tema.
Algunos temas admiten una ubicación de menú separada solo para el móvil.
Ve a Apariencia » Menús, crea un segundo menú simplificado y asígnalo a la ubicación móvil en Ajustes del menú » Ubicación de visualización. Consulta cómo editar tu menú de WordPress para ver el tutorial completo paso a paso.
Opción 2: Usa la visibilidad por dispositivo de SeedProd.
En el Theme Builder de SeedProd, abre tu encabezado y añade dos bloques de Menú de Navegación.
Configura uno para que se muestre solo en el escritorio y otro para que se muestre solo en el móvil. Cada bloque puede mostrar un menú de WordPress diferente, lo que te da un control independiente por dispositivo.
Para configurarlo, haz clic en el bloque Menú de Navegación, ve a la pestaña Avanzado y usa el ajuste Visibilidad del dispositivo. Lo cubrí en el Paso 4 anterior. Se tarda unos dos minutos en configurar una vez creado tu segundo menú.
Opción 3: Usa el plugin Responsive Menu. El plugin gratuito Responsive Menu (cubierto en el método alternativo anterior) crea un menú solo para móviles que solo aparece en pantallas pequeñas. Tu menú de escritorio existente no se modifica.
Solución de problemas comunes de menús móviles
Recibo muchas preguntas sobre menús móviles que no funcionan correctamente. Aquí están los problemas más comunes y cómo solucionarlos.
El icono de hamburguesa no responde en iOS. Un plugin de caché suele ser la causa. Borra la caché en W3 Total Cache, WP Rocket o el plugin que uses, y luego vuelve a probar en tu teléfono.
El submenú móvil no se abre. Esto es casi siempre un conflicto de JavaScript con tu tema. Intenta cambiar temporalmente a un tema predeterminado de WordPress. Si el submenú funciona, el problema está en los archivos JS de tu tema.
Los cambios del menú no se muestran después de guardar. Tu plugin de caché está sirviendo la versión antigua de la página. Limpia la caché y haz una actualización forzada en tu navegador (Ctrl+Shift+R en Windows, Cmd+Shift+R en Mac).
El menú se rompe después de una actualización del tema. Las actualizaciones del tema a veces restablecen las asignaciones de ubicación del menú. Ve a Apariencia » Menús, abre el panel Ajustes del menú y reasigna tu menú a la ubicación de visualización correcta.
Preguntas frecuentes sobre la edición de menús móviles en WordPress
Espero que esta guía te haya ayudado a aprender cómo editar menús móviles en WordPress. Aquí tienes otros tutoriales que también te pueden resultar útiles, incluyendo los siguientes:
- Cómo añadir un mensaje de alerta personalizado a WordPress
- Los mejores plugins de WordPress: Las 25 herramientas imprescindibles
- Cómo crear un sitio de autor en WordPress sin código
¡Gracias por leer! Nos encantaría conocer tu opinión, así que únete a la conversación en YouTube, X y Facebook para obtener más consejos y contenido útil para hacer crecer tu negocio.
