¿Quiere agregar un menú de panel deslizante a su sitio de WordPress?
Agregar un menú receptivo facilita a los usuarios navegar por su sitio web cuando usan dispositivos móviles. Cuando tocan el ícono de su menú, un menú de panel se desliza en la pantalla con 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 navegar por su sitio web de WordPress. Muchos de sus visitantes utilizará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 verá su menú de navegación en pantallas más pequeñas.
Afortunadamente, muchos temas de WordPress tienen estilos integrados que muestran automáticamente menús compatibles con dispositivos móviles cuando se ven 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ú de pantalla completa con capacidad de respuesta 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.
Agregar un menú de panel deslizante en temas de WordPress
Lo primero que debe hacer es instalar y activar el Menú receptivo enchufar. Para obtener más información, consulte nuestra guía paso a paso para instalar un complemento de WordPress.
Hay una versión premium de Responsive Menu con temas adicionales y características adicionales como lógica condicional, pero para este tutorial usaremos el complemento gratuito.
Después de la activación, navegue a la Menú responsive » 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 desea mostrar en el panel.
Por el bien de este tutorial, hemos elegido el menú ‘Navegación’. Si necesita crear un nuevo menú, puede aprenderlo siguiendo 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 información haciendo clic en el enlace «Más información».
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, haga clic en el botón «Crear menú» en la parte inferior de la página. Esto lo llevará a una página donde puede personalizar su menú.
Verá una vista previa de su sitio web en el lado derecho 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.
Tenga en cuenta que el texto aparece encima del menú. Este es el texto del título del menú y una línea de texto que el complemento llama «contenido adicional».
Puede editar u ocultar el texto haciendo clic en ‘Menú móvil’ y luego en ‘Contenedor’ en el menú del lado izquierdo 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 deshabilitar esta configuración o escribir contenido alternativo. En la captura de pantalla a continuación, puede ver que la palanca está desactivada, por lo que las palabras «Agregue más contenido aquí…» ahora están ocultas.
Una vez que esté satisfecho con la configuración del menú, haga clic en el botón «Actualizar» en la parte inferior de la página para guardar la configuración.
El complemento Responsive Menu viene con muchas otras opciones que le permiten cambiar el comportamiento y la apariencia de su menú de panel deslizante. Puede explorar estas opciones en la página de configuración del complemento y ajustarlas 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ú, estará marcada con una banda de color.
Esperamos que este tutorial lo haya ayudado a aprender cómo agregar un menú de panel deslizante en 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 complementos imprescindibles para hacer crecer su sitio.
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.