Agregar un menú receptivo facilitará a los usuarios navegar por su sitio web cuando usen dispositivos móviles. Cuando tocan el icono de su menú, un menú del panel se deslizará en la pantalla usando una hermosa animación.
En este artículo, le mostraremos cómo agregar un menú de panel deslizante en temas de WordPress sin escribir ningún código.
¿Por qué agregar un menú de panel deslizante en los temas de WordPress?
Los menús bien diseñados ayudan a sus visitantes a orientarse en su sitio web de WordPress. Muchos de sus visitantes usarán dispositivos móviles, por lo que es importante obtener una vista previa de la versión móvil de su sitio de WordPress para ver cómo se ve su menú de navegación en pantallas más pequeñas.
Afortunadamente, muchos temas de WordPress vienen con estilos integrados que mostrarán automáticamente menús compatibles con dispositivos móviles cuando se vean en una pantalla pequeña.
Sin embargo, es posible que desee personalizar aún más su navegación móvil y agregar un menú receptivo de pantalla completa o un menú de panel deslizante animado.
Con eso en mente, echemos un vistazo a cómo agregar un menú de panel deslizante en los temas de WordPress.
Cómo agregar un menú de panel deslizante en temas de WordPress
Lo primero que debe hacer es instalar y activar elMenú receptivo plugin. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un WordPress plugin.
Existe una versión premium de Responsive Menu con temas adicionales y características adicionales como lógica condicional, pero para este tutorial, usaremos la versión gratuita plugin.
Tras la activación, navegue a la Menú responsivo » Menús página. Una vez allí, debe hacer clic en el botón ‘Crear nuevo menú’ en la parte superior de la pantalla.
Luego verá cuatro temas que puede usar para su nuevo menú receptivo. Hay temas adicionales disponibles para su compra.
Para este tutorial, usaremos el tema seleccionado automáticamente. A continuación, puede hacer clic en el botón ‘Siguiente’.
Esto lo llevará a la página de configuración del menú. Aquí puede ingresar un nombre para su menú receptivo y luego seleccionar qué menú de WordPress le gustaría que se muestre en el panel.
Por el bien de este tutorial, elegimos el menú ‘Navegación’. Si necesita crear un nuevo menú, puede aprender cómo seguir nuestra guía sobre cómo agregar un menú de navegación en WordPress.
También puede ocultar el menú normal que viene con su tema de WordPress para que sus usuarios solo vean el nuevo menú del panel deslizante. Para ello, ingrese el código CSS en el campo ‘Ocultar menú de tema’.
El código que debe ingresar aquí varía de un tema a otro, y puede obtener más detalles haciendo clic en el enlace ‘Saber más’.
Los usuarios con la versión Pro tienen algunas configuraciones adicionales. Por ejemplo, los usuarios Pro pueden seleccionar los dispositivos y las páginas donde se debe mostrar el menú.
Una vez que esté satisfecho con la configuración, debe hacer clic en el botón ‘Crear menú’ en la parte inferior de la página. Esto lo llevará a una página donde puede terminar de personalizar su menú.
Verá una vista previa de su sitio web a la derecha de la pantalla, y hay botones en la parte inferior para cambiar entre la vista de teléfono, tableta y escritorio. También encontrarás opciones de personalización a la izquierda.
Observe que hay algo de texto que se muestra encima del menú. Este es el texto del título del menú y una línea de texto que el plugin llama ‘contenido adicional’.
Puede editar u ocultar el texto haciendo clic en ‘Menú móvil’ y luego en ‘Contenedor’ en el menú a la izquierda de la página.
Puede escribir lo que quiera en el campo ‘Texto del título’, como ‘Menú principal’ o ‘Navegación’. Si no desea mostrar un título, simplemente deslice el interruptor ‘Título’ a la posición de apagado.
Después de eso, debe desplazarse hacia abajo hasta la configuración ‘Contenido adicional’. Puede desactivar esta configuración o escribir contenido alternativo. En la captura de pantalla a continuación, notará que el interruptor se ha desactivado, por lo que las palabras «Agregar más contenido aquí…» ahora están ocultas.
Una vez que esté satisfecho con la configuración del menú, asegúrese de hacer clic en el botón ‘Actualizar’ en la parte inferior de la página para almacenar su configuración.
El menú receptivo plugin viene con muchas otras opciones que le permiten cambiar el comportamiento y la apariencia del menú del panel deslizante. Puede explorar estas opciones en el pluginde configuración y ajústelos según sea necesario.
Ahora puede visitar su sitio web para ver el menú en acción. Así es como se ve en nuestro sitio web de demostración. Tenga en cuenta que si la página actual está en el menú, se resalta con una banda de color.
Esperamos que este tutorial le haya ayudado a aprender cómo agregar un menú de panel deslizante en los temas de WordPress. Es posible que también desee aprender cómo realizar un seguimiento de los visitantes de su sitio de WordPress, o consulte nuestra lista de elementos imprescindibles. plugins para hacer crecer tu sitio.
, WordPress. Twitter y Facebook.
Cómo agregar un menú de panel deslizante en temas de WordPress .
visto en: wpbeginner