Cómo agregar un menú de panel deslizante en temas de WordPress

How to Add a Slide Panel Menu in WordPress Themes

¿Quiere agregar un menú de panel deslizante a su sitio de WordPress?

Agregar un menú receptivo facilita que los usuarios naveguen por su sitio cuando usan dispositivos móviles. Cuando tocan el icono de tu menú, un menú de panel se deslizará en la pantalla con una bonita 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 revisar 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 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ú animado con un panel deslizante.

Con eso en mente, veamos 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 debes hacer es instalarlo y activarlo. Menú adaptativo enchufar. Consulte nuestra guía paso a paso para instalar un complemento de WordPress para obtener más detalles.

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.

Una vez activado, vaya a Menú adaptativo » Menús en el lado. Una vez que llegue allí, debe hacer clic en el botón "Crear nuevo menú" en la parte superior de la pantalla.

Crear un nuevo menú receptivo

Luego verá cuatro temas que puede usar para su nuevo menú personalizable. 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".

Elige un diseño para tu menú responsivo

Esto lo llevará a la página de configuración del menú. Aquí puede ingresar un nombre para su menú personalizado y luego elegir qué menú de WordPress mostrar en el panel.

Para 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.

Asigne un nombre al menú y asócielo con el menú de WordPress que desea usar

También puede ocultar el menú normal que viene con su tema de WordPress para que sus usuarios solo vean el nuevo menú deslizante. Para ello, ingrese el código CSS en el cuadro Ocultar menú de tema.

El código que debe ingresar aquí varía de un tema a otro y puede encontrar más detalles haciendo clic en el enlace Más información.

Los usuarios de la versión Pro tienen algunas configuraciones adicionales. Por ejemplo, los usuarios de Pro pueden elegir los dispositivos y las páginas en las que quieren que aparezca 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ú.

En el lado derecho de la pantalla, verá una vista previa de su sitio, y en la parte inferior hay botones para cambiar entre las vistas de teléfono, tableta y escritorio. También encontrarás opciones de personalización en el lado izquierdo.

Ahora puede personalizar su menú receptivo

Observe 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 en el menú del lado izquierdo de la página y luego haciendo clic en Contenedor.

Personaliza u oculta el texto que se muestra en la parte superior de tu menú

Puede ingresar lo que desee en el campo "Texto del título", p. B. "Menú Principal" o "Navegación". Si no desea mostrar un título, simplemente deslice el interruptor "Título" a la posición de apagado.

A continuación, debe desplazarse hacia abajo hasta la configuración "Contenido adicional". Puede deshabilitar esta configuración o ingresar 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.

Personaliza u oculta contenido adicional para tu menú

Si 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 su configuración.

El complemento Responsive Menu incluye muchas otras opciones que puede usar para cambiar el comportamiento y la apariencia de su menú de panel deslizante. Puede ver estas opciones en la página de configuración del complemento y cambiarlas 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 marcará con una barra de color.

Animación del menú del panel deslizante de WordPress

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 consultar nuestra lista de complementos imprescindibles para hacer crecer su sitio.

Si te ha gustado este artículo, suscríbete al nuestro. canal de Youtube para tutoriales en vídeo de WordPress. También puedes encontrarnos en Closermarketing.es y Facebook.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir