¿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.
![Agregar un menú de panel deslizante en temas de WordPress Agregar un menú de panel deslizante en temas de WordPress](https://i0.wp.com/sdimos.com/wp-content/uploads/2022/09/add-a-slide-panel-menu-in-wordpress-themes-og.png?resize=680%2C385&ssl=1)
¿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.
![Agregar un menú de panel deslizante en temas de WordPress Crear un nuevo menú receptivo](https://i0.wp.com/sdimos.com/wp-content/uploads/2022/09/sidemenucreatenewmenu.png?resize=680%2C211&ssl=1)
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’.
![Agregar un menú de panel deslizante en temas de WordPress Seleccione un tema para su menú receptivo](https://i0.wp.com/sdimos.com/wp-content/uploads/2022/09/slidemenuchoosetheme.png?resize=680%2C408&ssl=1)
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.
![Agregar un menú de panel deslizante en temas de WordPress Asigne un nombre al menú y asócielo con el menú de WordPress que desea usar](https://i0.wp.com/sdimos.com/wp-content/uploads/2022/09/slidemenumenusettings.png?resize=680%2C399&ssl=1)
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.
![Agregar un menú de panel deslizante en temas de WordPress Ahora puede personalizar su menú receptivo](https://i0.wp.com/sdimos.com/wp-content/uploads/2022/09/slidemenucustomize.png?resize=680%2C380&ssl=1)
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.
![Agregar un menú de panel deslizante en temas de WordPress Edita u oculta el texto en la parte superior de tu menú](https://i0.wp.com/sdimos.com/wp-content/uploads/2022/09/slidemenutitletext.png?resize=680%2C381&ssl=1)
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.
![Agregar un menú de panel deslizante en temas de WordPress Personaliza u oculta contenido adicional para tu menú](https://i0.wp.com/sdimos.com/wp-content/uploads/2022/09/slidemenuadditionalcontent.png?resize=680%2C385&ssl=1)
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.
![Agregar un menú de panel deslizante en temas de WordPress Animación de un menú de panel deslizante en WordPress](https://i0.wp.com/sdimos.com/wp-content/uploads/2022/09/slidemenuanimationsmall.gif?resize=680%2C316&ssl=1)
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.