Cómo crear un menú de WordPress adaptable a dispositivos móviles

Más de la mitad del tráfico de un sitio web procede de dispositivos móviles. Si su menú de navegación no funciona bien en smartphones y tabletas, gran parte de su público puede tener dificultades para orientarse en su sitio.

Con años de experiencia construyendo sitios WordPress, entendemos la importancia de hacer tu sitio adaptable a dispositivos móviles. En WPBeginner, siempre hemos dado prioridad a esto, asegurándonos de que nuestros sitios sean fáciles de navegar en cualquier dispositivo.

De hecho, hemos diseñado un menú adaptable a dispositivos móviles que se adapta perfectamente a las pantallas más pequeñas sin resultar recargado, lo que mejora 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 a dispositivos móviles.

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

Un menú de navegación bien diseñado ayudará a los visitantes a orientarse en su sitio web. Sin embargo, que el menú sea atractivo en ordenadores de sobremesa no significa automáticamente que también lo sea en pantallas de móviles y tabletas.

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, se arriesga a perder la mitad de su audiencia debido a una mala experiencia de usuario.

Esto dificultará la consecución de objetivos clave como hacer crecer su lista de correo electrónico, conseguir ofertas y hacer crecer su negocio.

Dicho esto, vamos a ver cómo crear un menú adaptable a dispositivos móviles que se vea perfectamente en teléfonos inteligentes y tabletas. Utiliza los siguientes enlaces rápidos para acceder directamente al método que desees utilizar.

Método 1: Crear un menú de panel deslizable adaptable a dispositivos móviles

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

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

Esto es especialmente importante porque los teléfonos inteligentes y las tabletas tienen pantallas mucho más pequeñas que los ordenadores de sobremesa.

Si el menú se expande constantemente, un usuario móvil puede activar sus enlaces por accidente utilizando la pantalla táctil de su dispositivo. Por eso, los paneles deslizantes son una buena opción para un menú adaptable a dispositivos móviles.

La forma más sencilla de añadir un panel deslizable adaptable a dispositivos móviles es utilizar Responsive Menu.

En primer lugar, debes instalar y activar el plugin Responsive Menu. Para más detalles, consulte nuestro tutorial sobre cómo instalar un plugin de WordPress.

Una vez activado, puede utilizar el plugin para personalizar cualquier menú de WordPress que haya creado anteriormente. Si necesitas crear un nuevo menú, consulta nuestra guía para principiantes sobre cómo añadir un menú de navegación en WordPress.

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

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

Una vez hecho esto, vaya a la página Menú adaptable ” Menús en la barra lateral del administrador de WordPress y haga clic en el botón “Crear nuevo menú”.

Ahora verás algunos temas adaptables a dispositivos móviles que puedes utilizar para tu menú.

Estamos utilizando el ‘Tema por defecto’ en nuestras imágenes, pero usted puede utilizar cualquier tema que desee. Después de tomar su decisión, haga clic en ‘Siguiente’.

Ahora puede escribir un nombre para el menú. Esto es sólo para su referencia para que pueda utilizar cualquier cosa que desee.

Una vez hecho esto, haga clic en “Enlazar menú de WordPress” y elija el menú que desee utilizar.

Como ya se ha mencionado, si tu tema ya tiene un menú móvil integrado, tendrás que añadir su clase CSS al campo “Ocultar menú del tema”.

Si actualiza al plugin premium, obtendrá algunos ajustes adicionales. Por ejemplo, los usuarios Pro pueden ocultar el menú en determinadas páginas o dispositivos.

Cuando esté satisfecho con cómo se ha establecido el menú, haga clic en “Crear menú”.

Ahora verá una vista previa de su sitio web WordPress a la derecha de la pantalla y algunos ajustes a la izquierda.

Para ver cómo se ve su sitio en el móvil, haga clic en el icono del móvil o de la tableta situado en la parte inferior izquierda de la pantalla.

Para personalizar el aspecto y el funcionamiento del menú en dispositivos móviles, seleccione “Menú móvil”.

A continuación, haz clic en “Contenedor”.

Aquí encontrarás muchos ajustes diferentes.

A medida que realices cambios, la vista previa se actualizará automáticamente. Teniendo esto en cuenta, es una buena idea ampliar el menú para poder supervisar el aspecto que tendrá tu menú móvil. Para ello, basta con hacer clic en el botón conmutador del menú.

Por defecto, el plugin añade un título y el texto “Añadir más contenido…”.

Puede sustituirlo por su propio mensaje o incluso quitarlo por completo. Para editar el título, haga clic para ampliar la sección “Título”.

Ahora puede escribir su propio mensaje en el campo “Texto del título”.

También puede enlazar el título o añadir iconos e imágenes.

Para personalizar el aspecto del título, haga clic en la pestaña “Estilos”.

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

Si no desea mostrar ningún texto de título, haga clic para desactivar el conmutador situado junto a “Título”.

Si el título no es esencial, quitarlo creará más espacio para los enlaces y otros contenidos del menú de navegación móvil.

Para sustituir el texto “Añadir más contenido aquí….” por su propio mensaje, haga clic para ampliar el área “Contenido adicional”.

Ahora puede escribir su propio texto, cambiar el color del texto, cambiar la alineación del texto y mucho más utilizando los ajustes del menú de la izquierda.

Para borrar el texto por completo, basta con hacer clic para desactivar el conmutador.

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

Por defecto, Responsive Menu mostrará todos sus elementos de menú como un único anuncio / catálogo / ficha. Sin embargo, es posible que prefiera mostrar estos enlaces en varias columnas.

Esto puede funcionar bien si las etiquetas de su menú son más cortas, ya que le permite mostrar más elementos en menos espacio sin que el menú parezca recargado.

Para probar distintas disposiciones de columnas, haga clic para ampliar la sección “Menú”.

Ahora puede abrir el menú desplegable “Columnas del contenedor del menú” y elegir el número de columnas que desea utilizar.

En este punto, es posible que aparezca el texto “Actualización obligatoria”. Si ve este mensaje, haga clic para actualizar la vista previa con los nuevos ajustes de columna.

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

Si lo prefieres, puedes quitar la barra de búsqueda para los usuarios de móviles desactivando el conmutador situado junto a “Buscar”.

Hay muchos otros ajustes que puede configurar, por lo que es posible que desee pasar algún tiempo mirando a través de las otras opciones. Sin embargo, esto es suficiente para crear un menú bien diseñado listo para móviles.

Cuando esté satisfecho con cómo se ha establecido el menú de navegación, haga clic en “Actualizar”.

Ahora, sólo tiene que visitar su blog de WordPress desde 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ú adaptable a pantalla completa preparado para móviles

Otra opción es añadir un menú adaptable a pantalla completa. Se trata de un menú que se ajusta automáticamente a los distintos tamaños de pantalla, de modo que el menú de navegación siempre se verá bien independientemente del dispositivo que utilice el visitante.

Como el menú ocupa todo el espacio disponible, es más fácil navegar por él en smartphones y tabletas, por pequeña que sea la pantalla.

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

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

Una vez activado, visite la página Opciones de menú de pantalla completa en el menú de WordPress y marque / compruebe la siguiente casilla: ‘Activar Menú de Pantalla Completa Animado’.

También recomendamos marcar la casilla “Mostrar el menú solo para usuarios administradores”. Esto le permite ver los cambios a medida que configura el menú, pero los visitantes no verán el menú móvil hasta que lo active.

Por defecto, el plugin mostrará el menú a pantalla completa en todos los dispositivos. Si desea mostrar el menú a pantalla completa solo en smartphones y tabletas, marque la casilla siguiente a “Solo móvil”.

Después, puede ajustar la apariencia del menú al hacer clic en la pestaña “Diseño / Apariencia”.

Aquí puedes elegir los colores, la fuente y los ajustes de animación del menú a pantalla completa.

Cuando hagas estos cambios, ten en cuenta que “Menú de fondo inicial” es el icono conmutador del menú. Por su parte, “Menú de fondo abierto” es el color del menú móvil ampliado a pantalla completa.

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

Ten en cuenta que cargar fuentes adicionales puede afectar al rendimiento y la velocidad de tu sitio de WordPress. No siempre es una buena opción para los dispositivos móviles, que suelen tener menos capacidad de procesamiento que los ordenadores de sobremesa. Algunos visitantes también pueden tener una mala conexión a Internet móvil, lo que hará que su sitio se cargue aún más lentamente.

Una vez hecho esto, desplázate hasta “Ajustes de animación”.

Para empezar, puede elegir cómo se expandirá el menú cuando un visitante haga clic en el icono del conmutador. Solo tiene que abrir el menú desplegable “Tipo de animación” y elegir una opción de la lista, como De arriba abajo o De izquierda a derecha.

Cuando esté satisfecho con la estructura / disposición / diseño / plantilla del menú, haga clic en la pestaña “Contenido del menú” para añadir contenido.

A continuación, abra el menú desplegable “Seleccionar menú” y elija el menú que desea mostrar a pantalla completa.

Si aún no ha creado un menú de navegación, marque / compruebe nuestra guía sobre cómo añadir menús de navegación en WordPress.

Si desea mostrar contenido adicional en el menú, puede añadirlo en el cuadro “HTML libre / Shortcodes”. Esto actúa como un mini editor de página para que pueda escribir texto, cambiar el formato, añadir viñetas y listas numeradas, y mucho más.

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

A continuación, puede añadir iconos de medios sociales a su menú de WordPress. Estos iconos aparecerán en una fila en la parte inferior del menú a pantalla completa.

Para añadir estos iconos, basta con hacer clic para ampliar la casilla “Icono social 1”.

Ahora puedes escribir un título para el icono, como “Facebook”.

A continuación, haga clic en la flecha situada junto a “Icono social” y elija el icono que desea mostrar a los visitantes móviles.

Por último, escriba la dirección que desea utilizar en el campo “URL social”.

Para añadir más iconos, basta con hacer clic en el botón “Añadir otro icono”.

Por último, puede añadir una barra de búsqueda de WordPress para ayudar a los visitantes a encontrar lo que buscan. Para ello, simplemente marque la casilla siguiente a “Añadir barra de búsqueda”.

Por defecto, el plugin mostrará el mensaje ‘Buscar algo…’. Sin embargo, puede sustituirlo por su propio mensaje personalizado escribiendo en el campo “Marcador de posición de búsqueda”.

Por ejemplo, si tiene una tienda WooCommerce, puede que desee utilizar texto 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, sólo tiene que visitar su sitio web con un dispositivo móvil para ver el menú a pantalla completa en acción.

También puede obtener una vista previa de la versión móvil de su sitio web utilizando el Personalizador de temas de WordPress.

Bonificación: Cómo añadir un menú adaptable a dispositivos móviles a las páginas de destino

Si está creando una página de destino o de ventas, querrá que el diseño se vea igual de bien en los dispositivos móviles que en los de sobremesa.

Teniendo esto en cuenta, recomendamos crear la página utilizando SeedProd. Es el mejor maquetador de páginas de WordPress y cuenta con más de 300 plantillas de diseño profesional.

Después de crear un diseño utilizando SeedProd, puede añadir un menú adaptable a dispositivos móviles a la página utilizando el bloque Nav Menu de SeedProd ya preparado. Este bloque le permite crear menús separados tanto para dispositivos de menú como para ordenadores de sobremesa.

De este modo, puede utilizar una estructura / disposición / diseño / plantilla diferente e incluso mostrar distintos enlaces en función del dispositivo del usuario.

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

Tras añadir el bloque Nav a su diseño, sólo tiene que hacer clic en la pestaña “Avanzado”.

Aquí, haga clic para ampliar la sección “Visibilidad del dispositivo”.

Después, haz clic en el conmutador “Ocultar en escritorio” para activarlo. Ahora, este menú solo aparecerá en dispositivos móviles.

Ahora puede añadir enlaces y modificar la disposición del menú mediante los ajustes del menú de la izquierda.

Esperamos que este artículo te haya ayudado a aprender cómo crear un menú adaptable para móviles en WordPress. También puedes consultar nuestra guía para principiantes sobre cómo añadir un redistribuidor de fuentes en WordPress y nuestros consejos de expertos sobre cómo crear un sitio de WordPress adaptado a dispositivos móviles.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.