Cómo agregar un menú adaptable de pantalla completa en WordPress

Los menús son esenciales para ayudar a los visitantes a navegar por tu sitio web de WordPress y encontrar más de tus publicaciones y páginas. Los menús responsivos de pantalla completa pueden ser particularmente útiles al diseñar tu sitio web para usuarios móviles.

Cuando tus usuarios hagan clic o toquen un ícono de hamburguesa, se mostrará una superposición de pantalla completa del menú de tu sitio web con una hermosa animación.

Hemos experimentado con algunos tipos de menús diferentes en nuestros propios sitios web para ver qué obtiene los mejores resultados. Y en este artículo, te mostraremos cómo agregar un menú responsivo de pantalla completa en WordPress sin escribir ningún código.

¿Por qué agregar un menú responsivo de pantalla completa en WordPress?

Los menús bien diseñados ayudan a tus visitantes a orientarse en tu sitio web de WordPress o tienda WooCommerce. Pero puede ser difícil tocar un menú estándar en el encabezado mientras se usa la pantalla pequeña de un smartphone.

Ya hay más visitantes móviles que de escritorio para muchos sitios web. Es por eso que te recomendamos que previsualices la versión móvil de tu sitio de WordPress para ver cómo se ve tu sitio web en dispositivos móviles.

Un menú móvil responsivo de pantalla completa se ajustará automáticamente a diferentes tamaños de pantalla. Dado que se utiliza todo el espacio disponible para el menú, es más fácil navegar en smartphones y tablets.

Echemos un vistazo a cómo agregar un menú responsivo de pantalla completa en WordPress.

Cómo agregar un menú adaptable de pantalla completa en WordPress

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 principiantes para más detalles.

Tras la activación, deberías dirigirte a la página Opciones de Fullscreen Menu en el menú de administración de tu WordPress para configurar los ajustes del plugin. Te llevará a la pestaña 'Configuración' automáticamente.

Empieza marcando la casilla 'Activar Menú Animado de Pantalla Completa' para habilitar el menú.

Es una buena idea marcar también la casilla 'Mostrar el menú solo para usuarios administradores' al principio. Esto te permitirá ver los cambios mientras configuras el menú, pero los visitantes de tu sitio no podrán verlo hasta que hayas terminado.

No olvides volver y desmarcar esa casilla cuando hayas terminado.

Otros ajustes te permiten mostrar el menú solo en dispositivos móviles, cerrar el menú al hacer clic o al desplazarse, y ocultar el menú en páginas específicas. Para nuestro ejemplo, dejaremos estos ajustes sin marcar, pero siéntete libre de personalizarlos como desees para tu propio sitio.

Diseño y Apariencia de Fullscreen Menu

A continuación, personalizaremos el diseño del menú. Afortunadamente, el plugin del menú te permite hacer esto sin necesidad de CSS personalizado.

Para personalizar el menú, deberás hacer clic en la pestaña ‘Diseño/Apariencia’ en la parte superior de la página. En esta página, puedes elegir los colores, la fuente y la configuración de animación de tu menú.

En la parte superior de la página, notarás dos configuraciones de color. El primer color es para el ícono del menú tipo hamburguesa. Este se mostrará en la esquina superior derecha de tu sitio web. Cuando tus visitantes hagan clic o toquen, el menú de pantalla completa se mostrará u ocultará.

La segunda configuración de color es para el fondo del menú.

Al hacer clic en cada cuadro, aparecerá una paleta de colores. Puedes hacer clic en el color que desees usar o escribir su código hexadecimal.

Después de elegir los colores del menú, debes desplazarte hacia abajo en la página hasta la sección Fuente/Apariencia. Aquí, puedes elegir el color, la familia y el tamaño de fuente que se utilizarán para el texto del menú.

Para este tutorial, nos quedaremos con la configuración predeterminada, que utiliza la fuente de nuestro tema. Recomendamos esta configuración porque coincidirá con el diseño de tu sitio web. Además, cargar fuentes adicionales podría afectar el rendimiento y la velocidad de tu sitio de WordPress.

También hay configuraciones para mostrar un menú lateral en páginas específicas y desplazar el menú principal si no es lo suficientemente alto. Para este tutorial, dejaremos esas configuraciones sin marcar, pero siéntete libre de experimentar con ellas en tu propio blog o sitio web de WordPress.

Después de eso, desplázate hacia abajo hasta la sección 'Configuración de animación'. Aquí, puedes ajustar dos configuraciones principales.

La primera de estas es 'Tipo de animación'. Esto te permite seleccionar la dirección de la animación cuando se activa el menú. Puedes elegir de arriba a abajo, de izquierda a derecha y de derecha a izquierda.

La segunda configuración es el efecto que obtienes al colocar el mouse sobre una entrada del menú. Las opciones son línea de relleno, color de fondo y color de fondo con un borde redondeado.

Contenido del menú de pantalla completa

Finalmente, deberás desplazarte de nuevo a la parte superior de la página y hacer clic en la pestaña 'Contenido del menú'. Aquí, puedes seleccionar el menú de WordPress que se mostrará en tu menú de pantalla completa.

Junto a ‘Seleccionar Menú’ en la parte superior, deberás elegir un menú de la lista desplegable. 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 que se muestre contenido adicional en la pantalla del menú, puedes agregarlo en la siguiente sección, etiquetada como ‘HTML / Códigos cortos gratuitos’. Simplemente escribe tu contenido en el cuadro del editor y agrega los archivos multimedia que desees. Este contenido se mostrará debajo del menú.

También hay una casilla de verificación que incluirá un enlace a tu página de política de privacidad. Sin embargo, muchos propietarios de sitios web prefieren agregar esto en el pie de página en lugar del menú principal.

A continuación, es posible que desees agregar iconos sociales como elementos del menú. Estos se mostrarán en una fila en la parte inferior de tu menú de pantalla completa.

Para agregarlos, simplemente desplázate hacia abajo hasta la sección ‘Iconos sociales’ e ingresa un título para el icono, como ‘Facebook’. Después de eso, elige el icono apropiado y escribe la URL de tu página social.

Puedes agregar más iconos haciendo clic en el botón ‘Agregar Otro Icono’.

Finalmente, puedes agregar una barra de búsqueda nativa de WordPress en la parte superior de tu menú adaptable. Deberás desplazarte hasta el final de la página ‘Contenido del menú’ y marcar la casilla ‘¿Agregar Barra de Búsqueda?’. Si lo deseas, también puedes escribir algún texto de marcador de posición.

Por último, haz clic en el botón ‘Guardar Cambios’ para almacenar tu configuración.

Ahora puedes visitar tu sitio web para ver el menú responsivo de pantalla completa en acción. Te recomendamos que redimensiones tu navegador para ver cómo se comporta el menú en diferentes tamaños de pantalla.

Así es como se ve en nuestro sitio web de demostración.

Una vez que estés satisfecho con tu menú de pantalla completa, no olvides regresar a Opciones del menú de pantalla completa y desmarcar ‘Mostrar el menú solo para usuarios administradores’. Después de hacer clic en el botón ‘Guardar Cambios’, los visitantes de tu sitio web podrán acceder al menú.

Esperamos que este artículo te haya ayudado a aprender cómo agregar un menú responsive de pantalla completa a tu sitio de WordPress. También podrías querer aprender cómo agregar un menú mega en tu sitio web de WordPress o cómo agregar un menú de panel deslizante en temas de WordPress.

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.