Últimas noticias de SeedProd

Tutoriales, consejos y recursos de WordPress para hacer crecer tu negocio

Cómo editar el menú móvil en WordPress

Cómo editar menús móviles en WordPress (Guía para principiantes) 

Escrito por: imagen de autor Stacey Corrin
imagen de autor Stacey Corrin
Stacey lleva más de 10 años escribiendo sobre WordPress y marketing digital, y mucho más tiempo sobre otros temas. Además, le fascinan el diseño web, la experiencia de usuario y el SEO.
     Revisado por: John Turner
imagen del revisor John Turner
John Turner es el cofundador de SeedProd. Cuenta con más de 20 años de experiencia empresarial y de desarrollo y sus plugins se han descargado más de 25 millones de veces.

¿Quieres aprender a editar un menú móvil en WordPress?

Los menús móviles son enlaces de navegación que facilitan a los usuarios móviles la navegación y la interacción con tu sitio web. Si usas WordPress, editar tu menú móvil es relativamente fácil y puede mejorar mucho la experiencia del usuario, los tiempos de carga del sitio web y la navegación móvil.

En este artículo, le explicaremos cómo editar su menú móvil en WordPress para que pueda crear una experiencia fácil de usar para los visitantes móviles.

¿Por qué editar su menú móvil en WordPress?

Editar y personalizar el menú móvil de WordPress es importante por las siguientes razones:

  • Mejora de la experiencia del usuario: Los usuarios de móviles tienen necesidades y hábitos diferentes a los de los ordenadores de sobremesa. Si personalizas tu menú para móviles, podrás crear una experiencia fácil de usar que se adapte a sus necesidades específicas.
  • Tiempos de carga más rápidos: Un menú optimizado para dispositivos móviles puede ayudar a reducir los tiempos de carga de la página, lo que es importante para los usuarios con conexiones a Internet más lentas.
  • Mejor navegación: Un menú móvil bien diseñado puede facilitar a los usuarios encontrar lo que necesitan en su sitio web, lo que conduce a un mejor compromiso y las tasas de conversión.
  • Indexación móvil primero: Google utiliza un sistema de indexación mobile-first, lo que significa que los sitios web se clasifican en función de su versión móvil. Un menú móvil bien diseñado puede ayudar a mejorar la clasificación de su sitio web en los motores de búsqueda.

En general, la edición de su menú móvil de WordPress es esencial para optimizarlo para los visitantes móviles, mejorar la experiencia del usuario y aumentar el compromiso, las tasas de conversión y SEO.

Cómo editar el menú móvil en WordPress

En esta guía, compartiremos 2 maneras diferentes de editar un menú móvil en su sitio web WordPress.

El primer método le permite personalizar completamente sus menús y mostrar u ocultar determinados elementos en pantallas de escritorio o móviles. Sin embargo, el método alternativo es una solución gratuita con menos opciones de personalización.

Haga clic en cualquiera de los enlaces siguientes para elegir el método que desee utilizar:

Empecemos.

Personalizar menús móviles con SeedProd Page Builder

Para empezar, utilizaremos un plugin constructor de páginas para personalizar y editar los menús móviles visualmente, sin código. Para ello, utilizaremos SeedProd, el mejor constructor de sitios web y páginas de aterrizaje de WordPress.

Creador de sitios web SeedProd WordPress

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.

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.

introduzca su clave de licencia

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.

Kits de plantillas temáticas SeedProd

Esto abrirá la biblioteca de SeedProd de plantillas de sitios web prefabricados que puede instalar con 1 clic.

Kits de plantillas SeedProd

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.

Elija una plantilla prefabricada

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:

Partes de la plantilla de WordPress

Estas son las plantillas individuales que componen tu tema completo, y puedes personalizar cada una de ellas con el constructor de páginas 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

Como el menú de WordPress que queremos editar está en la cabecera, desplázate por las partes de tu plantilla hasta que encuentres la plantilla de cabecera. A continuación, sitúate sobre ella y haz clic en el enlace "Editar diseño".

Editar parte de la plantilla de cabecera

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.

Creador de páginas arrastrar-y-soltar SeedProd

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.

Configuración del bloque de imágenes SeedProd

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'.

menú de navegación simple 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.

Configuración del bloque de menú de WordPress

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.

Menú móvil de WordPress

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.

Opciones de personalización del submenú de WordPress.

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.

Ocultar el botón CTA en el móvil

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.

Ocultar elemento de menú en el móvil

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

Después de editar tu menú, puedes personalizar el resto de tu sitio WordPress usando el constructor de páginas de SeedProd. Por ejemplo, puedes editar tu página de inicio de WordPress, crear una barra lateral personalizada de WordPress y personalizar la plantilla de página de tu blog.

Incluso puedes editar el pie de página de WordPress y añadir un widget de menú vertical como este:

Menú de navegación vertical pie de página de WordPress

Si tiene un sitio web de comercio electrónico, también puede personalizar sus páginas de productos con los bloques WooCommerce de SeedProd.

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.

activar el tema seedprod

Ahora puede visitar su sitio web y ver su menú móvil en acción.

cómo editar el menú móvil en WordPress

Alternativa: Editar menús para móviles con un plugin gratuito de WordPress

Otra forma de editar tus menús para móviles es utilizando un plugin de menús para WordPress. Por ejemplo, con el plugin que usaremos a continuación, puedes hacer un menú hamburguesa que se deslice hacia fuera en pantallas 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. Al hacer clic en ella, accederás a la pantalla de menús para añadir un nuevo menú adaptable.

Crear 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.

Temas de menú para móviles

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 mostrar y hacer clic en el botón Crear menú.

Ajustes del 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.

Configuración del contenedor del menú móvil

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 hacer clic en 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.

menú hamburguesa deslizante

¡Eso es!

Esperamos que esta guía te haya ayudado a aprender a editar menús móviles en WordPress. Aquí tienes otros tutoriales que también pueden resultarte útiles, como los siguientes:

Gracias por leernos. Nos encantaría conocer tu opinión, así que no dudes en dejarnos un comentario con tus preguntas y comentarios.

También puede seguirnos en YouTube, X (antes Twitter) y Facebook para obtener más contenidos útiles para hacer crecer su negocio.

avatar de autor
Stacey Corrin Escritor
Stacey lleva más de 10 años escribiendo sobre WordPress y marketing digital, y mucho más tiempo sobre otros temas. Además, le fascinan el diseño web, la experiencia de usuario y el SEO.

Divulgación: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, es posible que ganemos una comisión. Sólo recomendamos productos que creemos que aportarán valor a nuestros lectores.