Cómo crear un menú de WordPress adaptable listo para móviles

Más de la mitad de todo el tráfico de sitios web proviene de dispositivos móviles. Si su menú de navegación no funciona bien en teléfonos inteligentes y tabletas, una gran parte de su audiencia puede tener dificultades para orientarse en su sitio.

Con años de experiencia en la creación de sitios de WordPress, entendemos la importancia de hacer que su sitio sea adaptable a dispositivos móviles. En WPBeginner, siempre hemos priorizado esto, asegurando que nuestros sitios sean fáciles de navegar en cualquier dispositivo.

De hecho, hemos diseñado un menú adaptable a dispositivos móviles que encaja perfectamente en pantallas más pequeñas sin sentirse abarrotado, mejorando la experiencia del usuario en teléfonos inteligentes y tabletas.

En esta guía, le mostraremos cómo crear fácilmente un menú de WordPress adaptable y listo para dispositivos móviles.

¿Por qué crear un menú de WordPress adaptable y listo para dispositivos móviles?

Un menú de navegación bien diseñado ayudará a los visitantes a orientarse en su sitio web. Sin embargo, el hecho de que su menú se vea bien en computadoras de escritorio no significa automáticamente que se verá bien en pantallas móviles y tabletas también.

Los usuarios móviles representan alrededor del 58% de todo el tráfico de Internet. Dicho esto, si su menú no se ve bien o no funciona correctamente en dispositivos móviles, corre el riesgo de perder la mitad de su audiencia debido a una mala experiencia de usuario.

Esto hará que sea difícil lograr objetivos clave como hacer crecer su lista de correo electrónico, obtener ventas y hacer crecer su negocio.

Dicho esto, veamos cómo puedes crear un menú adaptable listo para móviles que se verá genial en smartphones y tablets. Simplemente usa los enlaces rápidos a continuación para saltar directamente al método que deseas usar.

• Método 1: Crear un menú de panel deslizante adaptable listo para móviles
• Método 2: Crear un menú de pantalla completa adaptable listo para móviles
• Extra: Cómo agregar un menú adaptable para móviles a páginas de destino

Método 1: Crear un menú de panel deslizante adaptable listo para móviles

Un panel deslizante adaptable es un menú de navegación que se desliza en la pantalla cuando un visitante toca o hace clic en un interruptor.

De esta manera, el menú siempre está al alcance de la mano pero no ocupa espacio en pantalla por defecto.

Esto es particularmente importante ya que los smartphones y tablets tienen pantallas mucho más pequeñas en comparación con las computadoras de escritorio.

Si el menú está constantemente expandido, un usuario móvil puede activar sus enlaces por accidente usando la pantalla táctil de su dispositivo. Esto hace que los paneles deslizantes sean una buena opción para un menú adaptable para móviles.

La forma más fácil de agregar un panel deslizante listo para móviles es usando Responsive Menu.

Primero, necesitas instalar y activar el plugin Responsive Menu. Para más detalles, consulta nuestro tutorial sobre cómo instalar un plugin de WordPress.

Después de la activación, puedes usar el plugin para personalizar cualquier menú de WordPress que hayas creado previamente. Si necesitas crear un menú nuevo, consulta nuestra guía para principiantes sobre cómo agregar un menú de navegación en WordPress.

Por otro lado, si tu tema de WordPress ya tiene un menú móvil integrado, necesitarás conocer la clase CSS de ese menú para poder ocultarlo.

Si omites este paso, los usuarios móviles verán dos menús superpuestos en tu sitio web. Para obtener instrucciones paso a paso, consulta nuestra guía sobre cómo ocultar un menú móvil en WordPress.

Hecho esto, ve a la página Menú Responsivo » Menús en la barra lateral de administración de WordPress y haz clic en el botón ‘Crear nuevo menú’.

Ahora verás algunos temas diferentes de respuesta móvil que puedes usar para tu menú.

Estamos usando el ‘Tema predeterminado’ en nuestras imágenes, pero puedes usar cualquier tema que desees. Después de tomar tu decisión, haz clic en ‘Siguiente’.

Ahora puedes escribir un nombre para el menú. Esto es solo para tu referencia, así que puedes usar lo que quieras.

Hecho esto, haz clic en ‘Vincular menú de WordPress’ y elige el menú que deseas usar.

Como ya se mencionó, si tu tema ya tiene un menú móvil integrado, deberás agregar su clase CSS al campo ‘Ocultar menú del tema’.

Si actualizas a la versión premium del plugin, obtendrás algunas configuraciones adicionales. Por ejemplo, los usuarios Pro pueden ocultar el menú en páginas o dispositivos específicos.

Cuando estés satisfecho con la configuración del menú, haz clic en ‘Crear menú’.

Ahora verás una vista previa de tu sitio web de WordPress en el lado derecho de la pantalla y algunas configuraciones en el lado izquierdo.

Para ver cómo se ve tu sitio en dispositivos móviles, haz clic en el icono del móvil o de la tableta en la parte inferior izquierda de la pantalla.

Para personalizar cómo se ve y funciona el menú en dispositivos móviles, selecciona ‘Menú móvil’.

Luego, haz clic en ‘Contenedor’.

Aquí encontrarás muchas configuraciones diferentes.

A medida que realices cambios, la vista previa en vivo a menudo se actualizará automáticamente. Teniendo esto en cuenta, es una buena idea expandir el menú para que puedas monitorear cómo se verá tu menú móvil. Para hacer esto, simplemente haz clic en el botón de alternancia del menú.

Por defecto, el plugin agrega un título y algo de texto ‘Agregar más contenido…’

Puedes reemplazar esto con tu propio mensaje o incluso eliminar el texto por completo. Para editar el título, haz clic para expandir la sección ‘Título’.

Ahora puedes escribir tu propio mensaje en el campo 'Texto del título'.

También puedes agregar un enlace al título o agregar fuentes de iconos e imágenes.

Para personalizar la apariencia del título, haz clic en la pestaña 'Estilos'.

Aquí, puedes cambiar el color de fondo, el color del texto, el tamaño de la fuente y más.

Si no deseas mostrar ningún texto de título, haz clic para desactivar el interruptor junto a 'Título'.

Si el título no es esencial, eliminarlo creará más espacio para los enlaces y otro contenido en tu menú de navegación móvil.

Para reemplazar el texto 'Agrega más contenido aquí...' con tu propio mensaje, haz clic para expandir el área 'Contenido adicional'.

Ahora puedes escribir tu propio texto, cambiar el color del texto, cambiar la alineación del texto y más utilizando la configuración en el menú de la izquierda.

Para eliminar el texto por completo, simplemente haz clic para desactivar el interruptor.

Una vez más, esto puede crear más espacio para el resto del contenido del menú. Esto es particularmente útil en teléfonos inteligentes y tabletas, que suelen tener pantallas más pequeñas.

Por defecto, Responsive Menu mostrará todos los elementos de tu menú como una sola lista. Sin embargo, es posible que prefieras mostrar estos enlaces en varias columnas.

Esto puede funcionar bien si las etiquetas de tu menú son más cortas, ya que te permite mostrar más elementos en un espacio más pequeño sin que el menú se vea abarrotado.

Para probar diferentes diseños de columnas, haz clic para expandir la sección ‘Menú’.

Ahora puedes abrir el menú desplegable ‘Columnas del contenedor de menú’ y elegir el número de columnas que deseas usar.

En este punto, es posible que vea algún texto de 'Actualización requerida'. Si ve este mensaje, haga clic en él para actualizar la vista previa en vivo con la configuración de su nueva columna.

Por defecto, el plugin también agrega una barra de búsqueda a su menú de WordPress. Esto puede ayudar a los visitantes a encontrar contenido interesante, pero también puede ocupar un valioso espacio en pantalla.

Si lo prefiere, puede eliminar la barra de búsqueda para usuarios móviles desactivando el interruptor junto a 'Buscar'.

Hay muchas otras configuraciones que puede configurar, por lo que es posible que desee pasar algún tiempo revisando las otras opciones. Sin embargo, esto es suficiente para crear un menú bien diseñado y listo para dispositivos móviles.

Cuando esté satisfecho con la configuración del menú de navegación, haga clic en 'Actualizar'.

Ahora, simplemente visite su blog de WordPress usando un dispositivo móvil para ver el nuevo menú en acción. También puede ver la versión móvil de su sitio de WordPress desde su escritorio.

Método 2: Crear un menú de pantalla completa adaptable listo para móviles

Otra opción es agregar un menú responsivo de pantalla completa. Este es un menú que se ajusta automáticamente a diferentes tamaños de pantalla, por lo que el menú de navegación siempre se verá bien sin importar el dispositivo que esté usando el visitante.

Dado que el menú ocupa todo el espacio disponible, es más fácil de navegar en teléfonos inteligentes y tabletas, sin importar cuán pequeña sea la pantalla.

La forma más fácil de crear un menú de pantalla completa es usando FullScreen Menu. Este plugin te permite crear un menú de pantalla completa solo para dispositivos móviles, o puedes mostrar el mismo menú en smartphones, tablets y computadoras de escritorio, para que todos los visitantes tengan la misma experiencia.

Lo primero que necesitas hacer es instalar y activar el plugin FullScreen Menu. Puedes consultar nuestra guía paso a paso sobre cómo instalar un plugin de WordPress para más detalles.

Tras la activación, visita la página Fullscreen Menu Options desde el menú de WordPress y marca la siguiente casilla: ‘Activate Animated Fullscreen Menu.’

También recomendamos marcar la casilla ‘Show the menu only for Admin users’. Esto te permite ver los cambios mientras configuras el menú, pero los visitantes no verán el menú móvil hasta que lo publiques.

Por defecto, el plugin mostrará el menú de pantalla completa en todos los dispositivos. Si deseas mostrar el menú de pantalla completa solo en smartphones y tablets, marca la casilla junto a ‘Mobile only.’

Después de eso, puedes ajustar la apariencia del menú haciendo clic en la pestaña ‘Design / Appearance’.

Aquí, puedes elegir los colores, la fuente y la configuración de animación para el menú de pantalla completa.

Al hacer estos cambios, ten en cuenta que ‘Initial Background Menu’ es el ícono de alternancia del menú. Mientras tanto, ‘Opened Background Menu’ es el color del menú móvil expandido y de pantalla completa.

Después de elegir los colores del menú, desplázate hasta la sección ‘Menu Appearance’. Aquí puedes cambiar el color de fuente, la familia de fuentes y el tamaño de fuente del menú.

Solo ten en cuenta que cargar fuentes adicionales podría afectar el rendimiento y la velocidad de tu sitio WordPress. Esta no siempre es una buena opción para dispositivos móviles, que suelen tener menos potencia de procesamiento en comparación con las computadoras de escritorio. Algunos visitantes también pueden tener una conexión a internet móvil deficiente, lo que hará que tu sitio cargue aún más lento.

Una vez hecho esto, desplázate hasta ‘Configuración de animación’.

Para empezar, puedes elegir cómo se expandirá el menú cuando un visitante haga clic en el ícono del interruptor. Simplemente abre el menú desplegable ‘Tipo de animación’ y elige una opción de la lista, como De arriba abajo o De izquierda a derecha.

Cuando estés satisfecho con el diseño del menú, haz clic en la pestaña ‘Contenido del menú’ para agregar contenido.

Aquí, procede a abrir el menú desplegable ‘Seleccionar menú’ y elige el menú que deseas mostrar a pantalla completa.

Si aún no has creado un menú de navegación, consulta nuestra guía sobre cómo agregar menús de navegación en WordPress.

Si deseas mostrar contenido adicional en el menú, puedes agregarlo en el cuadro ‘HTML / Shortcodes gratuitos’. Esto funciona como un mini editor de páginas para que puedas escribir texto, cambiar el formato, agregar viñetas y listas numeradas, y más.

También hay una casilla de verificación que agregará un enlace a tu página de política de privacidad. 

A continuación, es posible que desees agregar iconos de redes sociales a tu menú de WordPress. Estos iconos aparecerán en una fila en la parte inferior del menú de pantalla completa.

Para agregar estos iconos, simplemente haz clic para expandir el cuadro ‘Icono social 1’.

Ahora puedes escribir un título para el icono, como ‘Facebook’.

Después de eso, haz clic en la flecha junto a ‘Icono social’ y elige el icono que deseas mostrar a los visitantes móviles.

Finalmente, escribe la dirección que deseas usar en el campo ‘URL social’.

Para agregar más iconos, simplemente haz clic en el botón ‘Agregar otro icono’.

Finalmente, es posible que desees agregar una barra de búsqueda de WordPress para ayudar a los visitantes a encontrar lo que buscan. Para hacer esto, simplemente marca la casilla junto a ‘Agregar barra de búsqueda’.

Por defecto, el plugin mostrará un mensaje de ‘Busca algo…’. Sin embargo, puedes reemplazarlo con tu propio mensaje personalizado escribiendo en el campo ‘Marcador de posición de entrada de búsqueda’.

Por ejemplo, si tienes una tienda de WooCommerce, entonces podrías querer usar textos como ‘Empezar a comprar’ o ‘Buscar productos’.

Cuando estés satisfecho con la configuración del menú, haz clic en el botón ‘Guardar cambios’.

Ahora, simplemente visita tu sitio web usando un dispositivo móvil para ver el menú de pantalla completa en acción.

También puedes previsualizar la versión móvil de tu sitio web usando el personalizador de temas de WordPress.

Extra: Cómo agregar un menú adaptable para móviles a páginas de destino

Si estás creando una página de destino o una página de ventas, entonces querrás que el diseño se vea tan bien en dispositivos móviles como en computadoras de escritorio.

Teniendo esto en cuenta, recomendamos crear la página usando SeedProd. Es el mejor constructor de páginas de WordPress y viene con más de 300 plantillas diseñadas profesionalmente.

Después de crear un diseño usando SeedProd, puedes agregar un menú adaptable a dispositivos móviles a la página usando el bloque de menú de navegación listo para usar de SeedProd. Este bloque te permite crear menús separados tanto para dispositivos móviles como para computadoras de escritorio.

De esta manera, puedes usar un diseño diferente e incluso mostrar enlaces diferentes dependiendo del dispositivo del usuario.

Para obtener más información, consulta nuestra guía sobre cómo agregar menús de navegación personalizados en WordPress.

Después de agregar el bloque de Navegación a tu diseño, simplemente haz clic en la pestaña 'Avanzado'.

Aquí, haz clic para expandir la sección 'Visibilidad del dispositivo'.

Después de eso, haz clic en el interruptor 'Ocultar en escritorio' para activarlo. Ahora, este menú solo aparecerá en dispositivos móviles.

Ahora puedes agregar enlaces y cambiar el diseño del menú usando la configuración en el menú de la izquierda.

Esperamos que este artículo te haya ayudado a aprender cómo crear un menú de WordPress receptivo y listo para dispositivos móviles. También te puede interesar nuestra guía para principiantes sobre cómo agregar un redimensionador de fuentes en WordPress y nuestros consejos de expertos sobre formas de crear un sitio de WordPress compatible con dispositivos móviles.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.