La mayoría de los menús móviles de WordPress parecen estar bien hasta que los compruebas en el móvil. Los enlaces aparecen apiñados, el icono de hamburguesa no se abre o se muestra un menú de escritorio de 10 elementos en una pantalla pequeña.
En esta guía, te mostraré cómo solucionarlo. Aprenderás a activar el icono de hamburguesa, a controlar lo que se muestra en el móvil y a configurar un menú independiente para pantallas pequeñas. También abordo los problemas más comunes relacionados con los menús para móviles.
Cómo editar el menú móvil en WordPress
¿Necesitas cambiar los enlaces que aparecen en tu menú? Descubre cómo editar tu menú de WordPress. ¿Quieres cambiar el estilo o los colores de tu menú? Descubre cómo personalizar tu menú de WordPress.
El primer método de esta guía utiliza SeedProd para ofrecer un control visual completo (se requiere SeedProd Pro). El segundo utiliza el plugin gratuito Responsive Menu. Haz clic a continuación para ir directamente al método que prefieras:
- Personaliza los menús para móviles con el creador de sitios web SeedProd
- Alternativa: Editar menús para móviles con un plugin gratuito de WordPress
- Cómo mostrar un menú diferente en el móvil
- Solución de problemas comunes relacionados con los menús móviles
- Preguntas frecuentes sobre la edición de menús para móviles en WordPress
Personaliza los menús para móviles con el creador de sitios web SeedProd
Yo utilizo SeedProd en mi propia página web, y los controles de visibilidad para dispositivos móviles son una de las funciones en las que más confío. Para empezar, te mostraré cómo utilizar SeedProd para personalizar y editar los menús móviles de forma visual, sin necesidad de código.
Viene con cientos de plantillas prediseñadas, una interfaz de arrastrar y soltar, e innumerables elementos de diseño para personalizar cualquier página de WordPress sin esfuerzo. Tanto si tu menú está en la cabecera, en el pie de página o en la barra lateral de WordPress, puedes editarlo fácilmente con el constructor de SeedProd.
Además, las potentes opciones de visibilidad de este plugin le permiten ocultar elementos de diseño específicos en pantallas móviles o de escritorio. Como resultado, puede adaptar sus menús de navegación a diferentes tamaños de pantalla.
Paso 1. Instalar y activar SeedProd Instale y active SeedProd
Para empezar, tendrás que descargar el plugin desde el sitio web de SeedProd. Aunque SeedProd tiene una versión gratuita, utilizaremos SeedProd Pro por sus funciones de creación de temas para WordPress.
Nota: Se requiere SeedProd Pro para utilizar el Theme Builder. Al activar el tema SeedProd, este sustituirá a tu tema activo actual. Puedes volver al tema anterior en cualquier momento desde el panel de control 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íjase a SeedProd " Configuración, donde puede introducir la clave de licencia de su plugin. Encontrará esta información en la sección Descargas del panel de control de su cuenta SeedProd.
Pegue su clave en el campo en blanco y haga clic en el botón Verificar clave para almacenar su licencia.
Segundo paso Elija una plantilla prefabricada
A continuación, tendrás que elegir un diseño ya hecho para utilizarlo como punto de partida. Puedes crear un nuevo tema de WordPress desde cero con el Theme Builder o crear páginas individuales con el constructor de páginas de destino.
Para esta guía, utilizaremos el Theme Builder, pero si prefieres hacer una landing page, puedes seguir esta guía sobre cómo crear una landing page en WordPress.
Para elegir un diseño prefabricado para su tema de WordPress, vaya a SeedProd " Theme Builder desde su panel de control de WordPress y haga clic en el botón Theme Template Kits.
Esto abrirá la biblioteca de SeedProd de plantillas de sitios web prefabricados que puede instalar con 1 clic.
Simplemente desplázate por los diseños hasta que encuentres una plantilla que te guste y haz clic en el icono de la marca de verificación para importarla.
Una vez que hayas importado el kit de tu sitio web, verás todas las partes de la plantilla de tu tema en una lista como ésta:
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.
A continuación te mostraremos cómo hacerlo. Es súper fácil y no requerirá escribir ningún código HTML, Jquery o CSS personalizado.
Paso 3. Personalizar la plantilla de cabecera Personalizar la plantilla de cabecera
Dado que el menú de WordPress que queremos editar se encuentra en el encabezado, desplázate por las secciones de la plantilla hasta que encuentres la plantilla del encabezado. A continuación, pasa el cursor 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 cabecera a la derecha y los bloques de WordPress a la izquierda. Puedes arrastrar cualquier bloque a la vista previa para añadir nuevos elementos a tu página fácilmente.
Si haces clic en los elementos de la cabecera, podrás ver su configuración en la barra lateral izquierda. Por ejemplo, si seleccionas el logotipo, se abrirán opciones para cambiar la imagen del logotipo y su tamaño, alineación y enlace.
Del mismo modo, al hacer clic en el bloque Menú de navegación se mostrarán diferentes opciones de menú.
Por ejemplo, el bloque te permite elegir entre un 'Menú Simple' o un 'Menú WordPress'.
La opción Simple le permite añadir nuevos elementos de menú dentro de la interfaz del constructor de páginas. Puedes añadir enlaces a cualquier página, entrada, categoría, etiqueta o página web externa.
Dado que se trata de un enfoque sencillo de la creación de menús, no puede añadir menús desplegables, elegir menús personalizados ya creados ni asignar un menú móvil personalizado.
Sin embargo, puedes personalizar la alineación del menú, el tamaño de la fuente, el espaciado y el separador. Además, en la pestaña Avanzado, puedes elegir entre menús horizontales o verticales y personalizar la tipografía, los colores de fondo, los bordes, las clases CSS y mucho más.
La opción Menú de WordPress tiene un enfoque diferente. Puede elegir ubicaciones de menú existentes en el menú desplegable y activar el menú de navegación móvil para tamaños de pantalla pequeños.
Cuando actives esta configuración y cambies 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 del menú por defecto de WordPress para editar el diseño de su 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 tus submenús.
Paso 4. Edite la configuración de visibilidad de la cabecera
Hasta ahora, ya sabes cómo editar tu menú principal y activar un menú hamburguesa para pantallas móviles. Pero, ¿y si hay elementos en tu cabecera que no quieres que se muestren 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 lo que se muestra en diferentes tamaños de pantalla.
Supongamos que quieres ocultar la llamada a la acción (CTA) de tu cabecera en los dispositivos móviles porque perjudica la experiencia del usuario. En ese caso, puedes ir a la pestaña Configuración avanzada de ese bloque y activar la opción "Ocultar en móviles" en el menú Visibilidad de dispositivos.
Cuando previsualices tu cabecera en la vista móvil, verás que está en gris, 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 el aspecto de todo. A continuación, haz clic en el botón Guardar para guardar los cambios.
Paso 5. Continúe personalizando su tema de WordPress
Una vez que tu menú móvil funcione, utiliza el generador de SeedProd para personalizar el resto de tu tema. Puedes editar el pie de página, la página de inicio y cualquier otra parte de la plantilla desde el mismo panel de control.
Paso 6. Publique sus cambios Publique sus cambios
Cuando esté listo para hacer sus cambios en vivo en su sitio de WordPress, la cabeza hacia atrás para el constructor de tema SeedProd tablero de instrumentos y buscar la palanca llamada "Habilitar SeedProd Tema". Simplemente cambie este conmutador a la posición "Sí" para activar su tema SeedProd.
Ahora puede visitar su sitio web y ver su menú móvil en acción.
Alternativa: Editar menús para móviles con un plugin gratuito de WordPress
Otra forma de editar los menús de tu móvil es utilizando un plugin de menús de WordPress. Por ejemplo, con el plugin que vamos a utilizar a continuación, puedes crear un menú tipo «hamburguesa» que se despliega en las pantallas de los móviles.
En primer lugar, tendrá que descargar, instalar y activar el plugin Responsive Menu WordPress.
Una vez activado el plugin, verás una nueva etiqueta llamada 'Responsive Menu' en tu barra de administración de WordPress. Si haces clic en ella, accederás a la pantalla de menús para añadir un nuevo menú adaptable.
Así que adelante, haz clic en el botón Crear nuevo menú. Verás una ventana emergente con diferentes temas de menú para elegir, incluyendo por defecto, Electric Blue, Full-Width, y más.
Elige un tema que te guste y haz clic en el botón Siguiente.
Ahora puede introducir un nombre para su menú, elegir un menú de WordPress existente para mostrarlo 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 la anchura mínima y máxima de la pantalla.
El plugin de menú responsivo 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 necesites.
No olvides pulsar el botón "Actualizar" para guardar los ajustes.
A partir de ahí, puede visitar su sitio web para ver el menú adaptable en acción.
Cómo mostrar un menú diferente en el móvil
Los teléfonos móviles representan actualmente 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 breve y sencillo en los dispositivos móviles, mientras mantienes el menú completo en los ordenadores de sobremesa.
Esto me resulta muy útil cuando el menú del escritorio tiene demasiados elementos para poder manejarlo en una pantalla pequeña.
Opción 1: Utiliza la ubicación del menú móvil de tu tema.
Algunos temas permiten configurar una ubicación de menú específica solo para dispositivos móviles.
Ve a Apariencia » Menús, crea un segundo menú simplificado y asígnalo a la ubicación para dispositivos móviles en Ajustes del menú » Ubicación de visualización. Consulta cómo editar tu menú de WordPress para ver el tutorial paso a paso completo.
Opción 2: Utiliza la función de visibilidad de dispositivos de SeedProd.
En el SeedProd Theme Builder, abre el encabezado y añade dos bloques de menú de navegación.
Configura uno para que se muestre solo en el ordenador y otro para que se muestre solo en el móvil. Cada bloque puede mostrar un menú de WordPress diferente, lo que te permite controlar cada dispositivo de forma independiente.
Para configurarlo, haz clic en el bloque «Menú de navegación», ve a la pestaña «Avanzado » y utiliza la opción «Visibilidad del dispositivo ». Ya lo expliqué en el paso 4 anterior. La configuración te llevará unos dos minutos una vez creado el segundo menú.
Opción 3: Utiliza el plugin Responsive Menu. El plugin gratuito Responsive Menu (del que se habla en el método alternativo anterior) crea un menú exclusivo para dispositivos móviles que solo aparece en pantallas pequeñas. Tu menú actual para ordenadores de sobremesa no sufre ningún cambio.
Solución de problemas comunes relacionados con los menús móviles
Me llegan muchas preguntas sobre menús para móviles que no funcionan correctamente. A continuación, te explico cuáles son los problemas más habituales y cómo solucionarlos.
El icono de la hamburguesa no responde en iOS. La causa suele ser un plugin de almacenamiento en caché. Borra la caché en W3 Total Cache, WP Rocket o cualquier otro plugin que utilices y, a continuación, vuelve a probarlo en tu teléfono.
El submenú móvil no se abre. Esto suele deberse casi siempre a un conflicto de JavaScript con tu tema. Prueba a cambiar temporalmente a un tema predeterminado de WordPress. Si el submenú funciona, el problema está en los archivos JS de tu tema.
Los cambios en el menú no se ven después de guardarlos. Tu plugin de caché está mostrando la versión antigua de la página. Borra la caché y actualiza la página en tu navegador (Ctrl+Mayús+R en Windows, Cmd+Mayús+R en Mac).
El menú deja de funcionar correctamente tras una actualización del tema. Las actualizaciones del tema a veces restablecen las asignaciones de ubicación de los menús. Ve a «Apariencia» » «Menús», abre el panel «Configuración del menú » y vuelve a asignar el menú a la ubicación correcta en la pantalla.
Preguntas frecuentes sobre la edición de menús para móviles en WordPress
Espero que esta guía te haya ayudado a aprender a editar menús móviles en WordPress. Aquí tienes otros tutoriales que también te pueden resultar útiles, entre ellos 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 codificar
Gracias por leernos. Nos encantaría conocer tu opinión, así que no dudes en unirte a la conversación en YouTube, X y Facebook para obtener más consejos y contenidos útiles para hacer crecer tu negocio.
