¿Necesita agregar un menú receptivo de pantalla completa en WordPress?
Cuando sus usuarios hagan clic o toquen un ícono de hamburguesa, se mostrará una superposición de pantalla completa del menú de su sitio web con una hermosa animación.
En este artículo, le mostraremos cómo agregar un menú receptivo de pantalla completa en WordPress sin escribir ningún código.
¿Por qué agregar un menú receptivo de pantalla completa en WordPress?
Los menús bien diseñados ayudan a sus visitantes a orientarse en su sitio web de WordPress. Pero puede ser difícil tocar un menú estándar mientras usa la pantalla pequeña de un teléfono inteligente.
Los usuarios móviles ya han superado a los usuarios de escritorio en muchos sitios web. Es por eso que le recomendamos que obtenga una vista previa de la versión móvil de su sitio de WordPress para ver cómo se ve su sitio web en dispositivos móviles.
Un menú sensible a pantalla completa se ajustará automáticamente a diferentes tamaños de pantalla. Dado que todo el espacio disponible se utiliza para el menú, es más fácil navegar en teléfonos inteligentes y tabletas.
Echemos un vistazo a cómo agregar un menú receptivo de pantalla completa en WordPress.
Cómo agregar un menú receptivo de pantalla completa en WordPress
Lo primero que debe hacer es instalar y activar el Menú de pantalla completa: compatible con dispositivos móviles y receptivo enchufar. Puede consultar nuestra guía paso a paso sobre cómo instalar un complemento de WordPress para obtener más detalles.
Tras la activación, debe dirigirse a la Opciones de menú de pantalla completa página en su menú de administración de WordPress para configurar los ajustes del complemento. Te llevará a la pestaña ‘Configuración’ automáticamente.
Comience marcando la casilla de verificación ‘Activar menú de pantalla completa animado’ para habilitar el menú.
Es una buena idea marcar también la casilla ‘Mostrar el menú solo para usuarios administradores’ al principio. Esto le permitirá ver los cambios a medida que configura el menú, pero los visitantes de su sitio no podrán verlo hasta que haya terminado.
No olvide regresar y desmarcar esa casilla cuando haya terminado.
Otras configuraciones le permiten mostrar el menú solo en dispositivos móviles, cerrar el menú con un clic o desplazarse y ocultar el menú en páginas específicas. Para nuestro ejemplo, dejaremos esta configuración sin marcar, pero siéntase libre de personalizarla como desee para su propio sitio.
Diseño y apariencia del menú de pantalla completa
A continuación, personalizaremos el diseño del menú. Para hacerlo, deberá hacer clic en la pestaña ‘Diseño/Apariencia’ en la parte superior de la página. En esta página, puede elegir los colores, la fuente y la configuración de animación para su menú.
En la parte superior de la página, verá dos configuraciones de color. El primer color es para el icono del menú de hamburguesas. Esto se mostrará en la esquina superior derecha de su sitio web. Cuando sus visitantes hagan clic o lo 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. Puede hacer clic en el color que desea usar o escribir su código hexadecimal.
Después de elegir los colores del menú, debe desplazarse hacia abajo en la página hasta la sección Fuente/Apariencia. Aquí puede elegir el color de fuente, la familia y el tamaño que se utilizará para el texto del menú.
Para este tutorial, nos quedaremos con la configuración predeterminada que usa la fuente de nuestro tema. Recomendamos esta configuración porque coincidirá con el diseño de su sitio web. Además, cargar fuentes adicionales podría afectar el rendimiento y la velocidad de su sitio de WordPress.
También hay configuraciones para mostrar un menú lateral 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 sitio.
Después de eso, deberá desplazarse hacia abajo hasta la sección ‘Configuración de animación’. Hay dos configuraciones principales que puede ajustar.
El primero de ellos es ‘Tipo de animación’. Esto le permite seleccionar la dirección de la animación cuando el menú está activado. Puede elegir de arriba a abajo, de izquierda a derecha y de derecha a izquierda.
La segunda configuración es el efecto que obtiene al pasar 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á desplazarse hacia atrás hasta la parte superior de la página y hacer clic en la pestaña ‘Contenido del menú’. Aquí puede seleccionar el menú de WordPress que se mostrará en su menú de pantalla completa.
Junto a “Seleccionar menú” en la parte superior, deberá elegir un menú de la lista desplegable. 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 que se muestre contenido adicional en la pantalla del menú, puede agregarlo en la siguiente sección, etiquetada como ‘HTML gratuito/códigos cortos’. Simplemente escriba su contenido en el cuadro del editor y agregue los archivos multimedia que desee. Este contenido se mostrará debajo del menú.
También hay una casilla de verificación que incluirá un enlace a la página de su 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 desee agregar íconos sociales. Estos se mostrarán en una fila en la parte inferior de su menú de pantalla completa.
Para agregarlos, simplemente desplácese hacia abajo hasta la sección ‘Iconos sociales’ e ingrese un título para el ícono, como ‘Facebook’. Después de eso, elija el icono apropiado y escriba la URL de su página social.
Puede agregar más íconos haciendo clic en el botón ‘Agregar otro ícono’.
Finalmente, puede agregar una barra de búsqueda nativa de WordPress en la parte superior de su menú receptivo. Deberá desplazarse hasta la parte inferior de la página “Contenido del menú” y marcar la opción “¿Agregar barra de búsqueda?” caja. Si lo desea, también puede escribir algún texto de marcador de posición.
Por último, haga clic en el botón ‘Guardar cambios’ para almacenar su configuración.
Ahora puede visitar su sitio web para ver el menú receptivo de pantalla completa en acción. Le recomendamos que cambie el tamaño de su 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é satisfecho con su menú de pantalla completa, no olvide volver a navegar a Opciones de menú de pantalla completa y desmarque ‘Mostrar el menú solo para usuarios administradores’. Después de hacer clic en el botón “Guardar cambios”, los visitantes de su sitio web podrán acceder al menú.
Esperamos que este artículo lo haya ayudado a aprender cómo agregar un menú receptivo de pantalla completa a su sitio de WordPress. Es posible que también desee aprender a incrustar un video de Facebook o consultar nuestra lista de los mejores complementos de formulario de contacto para WordPress.
Si te ha gustado este artículo, suscríbete a nuestro Canal de Youtube para tutoriales en vídeo de WordPress. También puedes encontrarnos en Gorjeo y Facebook.