viernes, marzo 29, 2024
No menu items!
InicioBlogsCómo crear un menú de WordPress adaptable y listo para dispositivos móviles

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

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

Más de la mitad del tráfico total del sitio 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.

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

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

¿Por qué crear un menú de WordPress responsivo 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 las computadoras de escritorio no significa automáticamente que se verá bien en las pantallas de dispositivos móviles y tabletas.

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

Esto dificultará el logro de objetivos clave como hacer crecer su lista de correo electrónico, obtener ventas y hacer crecer su negocio.

Dicho esto, veamos cómo crear un menú responsivo listo para dispositivos móviles que se verá genial en teléfonos inteligentes y tabletas. Simplemente use los enlaces rápidos a continuación para ir directamente al método que desea utilizar.

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

De esta forma el menú está siempre a mano pero no ocupa espacio en la pantalla por defecto.

Un menú del panel lateral desplazable en WordPress

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

Si el menú se expande constantemente, un usuario móvil podría activar accidentalmente sus accesos directos usando la pantalla táctil de su dispositivo. Esto hace que los paneles desplazables sean una buena opción para un menú adaptable a dispositivos móviles.

La forma más sencilla de agregar un panel deslizante listo para dispositivos móviles es usar Menú responsivo.

Nota: Existe una versión premium del menú responsivo con temas adicionales y características adicionales como lógica condicional. Sin embargo, en esta guía usaremos el complemento gratuito ya que tiene todo lo que necesitas para crear un menú listo para dispositivos móviles.

Primero, debe instalar y activar el complemento Menú Responsivo. Para obtener más detalles, consulte nuestro tutorial sobre cómo instalar un complemento de WordPress.

Después de la activación, puede utilizar el complemento para personalizar cualquier menú de WordPress que haya creado previamente. Si necesita crear un nuevo menú, consulte 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ú flotante incorporado, necesitarás conocer la clase CSS de ese menú para poder ocultarlo.

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

Una vez hecho esto, vaya a Menú Responsivo » Menú en la barra lateral de administración de WordPress y haga clic en el botón “Crear nuevo menú”.

Crear un menú responsivo listo para dispositivos móviles

Ahora verás algunos temas móviles responsivos diferentes que puedes usar para tu menú.

Usamos el “Tema predeterminado” en nuestras imágenes, pero puedes usar cualquier tema que desees. Una vez que haya tomado su decisión, haga clic en “Siguiente”.

🔥 Leer:  Cómo habilitar VoLTE y VoWiFi en OnePlus 7, 7 Pro y 7T Pro
Elija una plantilla para el menú de navegación

Ahora puede escribir un nombre para el menú. Esto es sólo como referencia, así que puedes usar lo que quieras.

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

Agregar un menú responsivo a un blog o sitio web de WordPress

Como ya se mencionó, si su tema ya tiene un menú flotante incorporado, deberá agregar su clase CSS al campo “Ocultar menú de tema”.

Si actualiza al complemento premium, obtendrá algunas configuraciones adicionales. Por ejemplo, los usuarios Pro pueden ocultar el menú en páginas o dispositivos específicos.

Cuando esté satisfecho con la configuración de su menú, haga clic en “Crear menú”.

Cómo crear un menú listo para dispositivos móviles para su sitio web o blog

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

Para ver cómo se ve su sitio en dispositivos móviles, haga clic en el ícono de dispositivo móvil o tableta en la parte inferior izquierda de la pantalla.

Obtenga una vista previa de un menú responsivo en un teléfono inteligente o tableta

Para personalizar la apariencia y el comportamiento del menú en dispositivos móviles, seleccione “Menú móvil”.

Luego, haga clic en “Contenedor”.

Diseño de un menú de navegación de WordPress adaptable a dispositivos móviles

Aquí encontrará muchas configuraciones diferentes.

A medida que realiza cambios, la vista previa en vivo a menudo se actualiza automáticamente. Teniendo esto en cuenta, es una buena idea expandir el menú para poder controlar la apariencia del menú flotante. Para hacer esto, simplemente haga clic en el botón de alternar menú.

Cómo obtener una vista previa de un menú flotante en el escritorio

De forma predeterminada, el complemento agrega un título y el texto “Agregar más contenido…”.

Puedes reemplazarlo con tu propio mensaje o incluso eliminar el texto por completo. Para cambiar el título, haga clic para expandir la sección “Título”.

Agregar un título personalizado a un menú de navegación

Ahora puedes escribir tu mensaje en el campo “Texto del título”.

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

Personalizar el título en un menú de navegación de WordPress

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

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

Personaliza el aspecto de un menú usando un complemento gratuito de WordPress

Si no desea mostrar el texto del título, haga clic para desactivar el interruptor junto a “Título”.

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

Eliminar el título de un menú de navegación de WordPress

Para reemplazar “Agregar más contenido aquí…” texto con sus mensajes, haga clic para expandir el área “Contenido adicional”.

Ahora puede escribir su texto, cambiar el color del texto, cambiar la alineación del texto y más usando la configuración en el menú de la izquierda.

Agregue sus mensajes a un menú de navegación listo para dispositivos móviles

Para eliminar completamente el texto, simplemente haga clic para desactivar la palanca.

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

Crear un menú único para un teléfono inteligente o tableta

De forma predeterminada, el menú responsivo mostrará todos los elementos del menú como una lista única. 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 una cantidad menor de espacio sin que el menú se vea abarrotado.

Para probar diferentes diseños de columnas, haga clic para expandir la sección “Menú”.

Ampliando la configuración del menú de navegación de WordPress

Ahora puede abrir el menú desplegable “Columnas del contenedor de menú” y elegir la cantidad de columnas que desea usar.

En este punto, es posible que vea el texto “Actualización requerida”. Si ve este mensaje, haga clic para actualizar la vista previa en vivo con la nueva configuración de columna.

Crear un diseño de menú de varias columnas

De forma predeterminada, el complemento también agrega una barra de búsqueda al menú de WordPress. Esto puede ayudar a los visitantes a encontrar contenido interesante pero también ocupar un valioso espacio en la pantalla.

🔥 Leer:  ¿Cómo inicio sesión en Nordvpn?

Si lo prefieres, puedes eliminar la barra de búsqueda para usuarios de dispositivos móviles desactivando el botón junto a “Buscar”.

Eliminar una barra de búsqueda del menú móvil de WordPress

Hay muchas otras configuraciones que puedes configurar, por lo que es posible que desees dedicar algo de tiempo a investigar 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”.

Active el menú adaptable a dispositivos móviles en su sitio web

Ahora simplemente visita tu 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.

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

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

La forma más sencilla de crear un menú de pantalla completa es utilizar Menú de pantalla completa. Este complemento le permite crear un menú de pantalla completa solo para dispositivos móviles o mostrar el mismo menú en teléfonos inteligentes, tabletas y computadoras de escritorio, para que todos los visitantes tengan la misma experiencia.

Lo primero que debe hacer es instalar y activar el complemento Menú de pantalla completa. Puede consultar nuestra guía paso a paso sobre cómo instalar un complemento de WordPress para obtener más detalles.

Después de la activación, visite el Opciones de menú en pantalla completa desde el menú de WordPress y marque la siguiente casilla: “Habilitar menú animado en pantalla completa”.

Crear un menú de pantalla completa para teléfonos inteligentes y tabletas

También recomendamos marcar la casilla “Mostrar 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ú flotante hasta que lo active.

De forma predeterminada, el complemento mostrará el menú en pantalla completa en todos los dispositivos. Si desea ver el menú en pantalla completa solo en teléfonos inteligentes y tabletas, marque la casilla junto a “Solo dispositivos móviles”.

Ver un menú en pantalla completa en un dispositivo móvil

Una vez hecho esto, estará listo para optimizar la apariencia del menú haciendo clic en la pestaña “Diseño/Apariencia”.

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

Agregar colores personalizados a un menú compatible con dispositivos móviles

Al realizar estos cambios, tenga en cuenta que el “Menú de fondo de inicio” es el icono de alternancia del menú. Mientras tanto, “Menú en segundo plano abierto” es el color del menú flotante expandido a pantalla completa.

Una vez que haya elegido los colores de su menú, desplácese hacia abajo hasta la sección “Apariencia del menú”. Aquí puede cambiar el color de fuente, la familia y el tamaño de fuente del menú.

Cambiar la apariencia de un menú de navegación flotante

Tenga en cuenta que cargar fuentes adicionales puede afectar el rendimiento y la velocidad de su sitio de WordPress. Esta no siempre es una buena opción para los dispositivos móviles, que normalmente tienen menos potencia de procesamiento que las computadoras de escritorio. 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 lento.

Una vez hecho esto, desplácese hacia abajo hasta “Configuración de animación”.

Para comenzar, puede elegir cómo se expandirá el menú cuando un visitante haga clic en el ícono de alternancia. Simplemente abra el menú desplegable “Tipo de animación” y elija una opción de la lista, como De arriba a abajo o de izquierda a derecha.

Agregar efectos de animación a un sitio web móvil

Una vez que esté satisfecho con la configuración de su menú, es hora de agregar contenido haciendo clic en la pestaña “Contenido del menú”.

🔥 Leer:  Cómo realizar un seguimiento de las actualizaciones del algoritmo de Google en WordPress

Aquí, continúa y abre el menú desplegable “Seleccionar menú” y elige el menú que deseas mostrar en pantalla completa.

Crear un menú de WordPress adaptable a dispositivos móviles

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

Si desea mostrar contenido adicional en el menú, puede agregarlo en el cuadro “HTML/códigos cortos gratuitos”. 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.

Agregar códigos cortos y HTMTL a la navegación de su sitio web

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

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

Un ejemplo de menú móvil a pantalla completa

Para agregar estos íconos, simplemente haga clic para expandir el cuadro “Icono social 1”.

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

Agregar íconos sociales a su blog o sitio web

A continuación, haga clic en la flecha junto al “Ícono social” y elija el ícono que desea mostrar a los visitantes móviles.

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

Agregar Facebook, Twitter y otras plataformas sociales a su sitio web o blog

Para agregar más íconos, simplemente haga clic en el botón “Agregar otro ícono”.

Por último, 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 marque la casilla junto a “Agregar barra de búsqueda”.

Cómo agregar una barra de búsqueda a su sitio web móvil

De forma predeterminada, el complemento mostrará el mensaje “Buscando algo…”. Sin embargo, puedes reemplazarlo con un mensaje personalizado escribiéndolo en el campo “Marcador de posición de entrada de búsqueda”.

Por ejemplo, si tiene una tienda WooCommerce, es posible que desee utilizar texto como “Empezar a comprar” o “Buscar productos”.

Cuando esté satisfecho con la configuración de su menú, haga clic en el botón “Guardar cambios”.

Active un menú adaptable a dispositivos móviles en su sitio web

Ahora simplemente visite su sitio web usando un dispositivo móvil para ver el menú en pantalla completa en acción.

También puedes obtener una vista previa de la versión móvil de tu sitio web utilizando el personalizador de temas de WordPress.

Bonificación: cómo agregar un menú adaptable a dispositivos móviles a sus páginas de destino

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

Teniendo esto en cuenta, le recomendamos que cree la página utilizando SemillaProd. Es el mejor creador de páginas de WordPress e incluye más de 300 plantillas diseñadas profesionalmente.

Elija una plantilla de SeedProd

Una vez que haya creado un diseño con SeedProd, puede agregar un menú adaptable a dispositivos móviles a su página usando el bloque de menú de navegación listo para usar de SeedProd. Este bloque le permite crear menús separados tanto para dispositivos de menú como para escritorios.

De esta manera, puedes utilizar un diseño diferente e incluso mostrar diferentes enlaces según el dispositivo del usuario.

Para obtener más información, consulte 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 su proyecto, simplemente haga clic en la pestaña “Avanzado”.

Creación de navegación móvil responsiva usando SeedProd

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

A continuación, haga clic en el interruptor “Ocultar en el escritorio” para activarlo. Este menú ahora solo aparecerá en dispositivos móviles.

Crear un menú adaptable para dispositivos móviles usando SeedProd

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

Esperamos que este artículo le haya ayudado a aprender cómo crear un menú de WordPress adaptable y listo para dispositivos móviles. Quizás también quieras consultar nuestra guía para principiantes sobre cómo aumentar el tráfico de tu blog o ver nuestra selección de expertos de las mejores soluciones de análisis para usuarios de WordPress.

Recomendamos

Populares