Un menú lateral colapsable es una excelente manera de proporcionar acceso fácil a enlaces y contenido importantes, al tiempo que se mantiene el diseño de su sitio web limpio y organizado.
Esta función permite a los usuarios expandir y colapsar el menú, dándoles control sobre su experiencia de navegación.
Hemos notado que muchos sitios web grandes, tiendas de comercio electrónico y sitios con diseños más complejos lo utilizan para facilitar la navegación.
En este artículo, le mostraremos cómo crear fácilmente un menú lateral colapsable en WordPress.
💡Respuesta Rápida: Cómo agregar un menú de barra lateral colapsable en WordPress
La forma más fácil de agregar un menú de barra lateral colapsable es usando el plugin Bellows Accordion Menu.
Te permite diseñar un menú de varios niveles en tu panel de control y agregarlo a tu barra lateral usando un simple shortcode.
¿Qué es un menú lateral colapsable? (Y cuándo usar uno)
Un menú de barra lateral colapsable (o menú expandible) es una lista de navegación que oculta los subelementos hasta que un visitante hace clic para revelarlos. Organiza los enlaces en una estructura de ‘padre-hijo’, manteniendo el diseño de tu sitio limpio.
A menudo recomendamos usar menús colapsables para sitios web grandes o tiendas de comercio electrónico. Aquí te explicamos por qué son efectivos:
- Organizar Diseños Complejos: Te ayudan a clasificar cientos de categorías o páginas sin abrumar al usuario.
- Ahorrar Espacio en Pantalla: Al ocultar los elementos hijos, mantienes la barra lateral corta y ordenada.
- Mejorar la Experiencia Móvil: Evitan que los usuarios móviles tengan que desplazarse por listas interminables de enlaces.
Por ejemplo, el medio de noticias The Guardian utiliza un menú colapsable para su sitio móvil para gestionar sus numerosas categorías de noticias.
Ahora, veamos cómo puedes crear fácilmente un menú de barra lateral colapsable en tu sitio de WordPress.
Cómo crear un menú lateral colapsable en WordPress
Puedes crear un menú lateral colapsable en WordPress usando el plugin Bellows Accordion Menu.
Proporciona un práctico código corto que te permite colocar tu menú colapsable en cualquier página, publicación o área de widget, incluida tu barra lateral.
Nota: Este plugin está diseñado para usarse con temas clásicos.
Paso 1: Instala y activa el plugin Bellows Accordion
Primero, deberás instalar y activar el plugin Bellows Accordion Menu. Si necesitas ayuda, consulta nuestra guía para principiantes sobre cómo instalar un plugin de WordPress.
Paso 2: Crea un nuevo menú
Tras la activación, visita la página Apariencia » Menús en tu panel de WordPress.
Escribe un nombre para tu menú en el campo ‘Nombre del menú’. Luego, haz clic en el botón ‘Crear menú’.
Paso 3: Agrega y organiza los elementos del menú
A continuación, elige las páginas que deseas agregar de la columna izquierda y haz clic en ‘Añadir al menú’.
Si deseas ver una lista de todas las páginas de tu sitio web, haz clic en la pestaña ‘Ver todo’. Para más detalles, consulta nuestra guía sobre cómo agregar un menú de navegación en WordPress.
Para crear el efecto colapsable, necesitas organizar los elementos en una relación padre-hijo. Simplemente arrastra un elemento de página ligeramente hacia la derecha debajo de un elemento padre.
Arrástralo hacia la derecha hasta que veas que el contorno discontinuo se desplaza hacia adentro. Esto confirma que el elemento ahora es un subelemento, que se ocultará hasta que se haga clic en el padre.
Ahora, cuando un visitante haga clic en un elemento padre en tu menú colapsable, se expandirá para revelar todo el contenido hijo.
No olvides hacer clic en el botón 'Guardar Menú' cuando hayas terminado.
Paso 4: Obtén el código corto del menú
Ahora, queremos agregar este menú colapsable a la barra lateral de WordPress. Para hacer esto, usaremos algunos códigos cortos que Bellows Accordion crea automáticamente.
Para obtener el código corto, ve a la página Apariencia » Menú Bellows desde el panel de WordPress. Si aún no está seleccionado, asegúrate de seleccionar la pestaña 'Mostrar todo'.
Ahora puedes hacer clic en el cuadro de código corto, que debería resaltar todo el código. Ahora, copia este código usando el atajo de teclado Comando + C o Ctrl + C.
Paso 5: Agrega el menú a tu barra lateral
Ahora necesitamos agregar el menú al diseño de tu sitio. Dirígete a la página Apariencia » Widgets desde el área de administración de WordPress.
Esto mostrará todas las áreas de widgets dentro de tu tema actual. Las opciones que veas pueden variar, pero la mayoría de los temas modernos de WordPress tienen una barra lateral.
Busca el área de widgets de la barra lateral y haz clic en el ícono ‘+’ para agregar un nuevo bloque.
Busca 'Shortcode' y selecciona el bloque.
Pega tu shortcode copiado en el bloque y haz clic en 'Actualizar'. Cuando visites tu sitio, deberías ver tu nuevo menú colapsable.
En dispositivos móviles, esta barra lateral generalmente aparecerá en la parte inferior de la página, donde la función colapsable ayuda a ahorrar valioso espacio de desplazamiento vertical.
Paso 6: Personaliza tu menú colapsable
El plugin Bellows Accordion también hace que sea muy fácil personalizar este menú predeterminado. Por ejemplo, podrías cambiar su esquema de color para reflejar mejor la marca de tu sitio.
Si deseas ajustar el menú predeterminado, simplemente ve a la página Apariencia » Bellows Menu en tu panel de WordPress.
Este menú tiene todas las configuraciones que necesitas para personalizar tu menú colapsable. Hay muchas configuraciones para explorar. Sin embargo, es posible que desees comenzar yendo a Configuración Principal » Configuración Básica.
Aquí, puedes alternar entre varios colores de menú diferentes. También puedes elegir si los visitantes pueden expandir varios submenús a la vez usando la configuración ‘Accordion Folding’ (Plegado de Acordeón).
Para cambiar la alineación y el ancho del menú, haz clic en la pestaña ‘Layout & Position’ (Diseño y Posición).
Si prefieres previsualizar tus cambios en tiempo real, puedes editar el menú lateral colapsable en el Personalizador de WordPress.
Para hacer esto, dirígete a la página Apariencia » Personalizar desde el área de administración y selecciona la pestaña ‘Bellows’ en la columna izquierda.
Aquí encontrarás muchas configuraciones diferentes para tu barra lateral. Estas incluyen cambiar su ancho, alineación y el color de tu menú lateral colapsable.
Extra: Trucos de Barra Lateral de WordPress para Obtener Máximos Resultados
Una vez que hayas creado un menú lateral colapsable, puedes usar otros consejos para generar más clientes potenciales con la ayuda de tu barra lateral.
Por ejemplo, puedes hacer que tu widget de barra lateral sea fijo para que sea visible en la página incluso mientras el usuario se desplaza hacia abajo.
Aparte de eso, puedes agregar un formulario de contacto o un formulario de suscripción por correo electrónico en tu barra lateral para crear tu lista de correo. Para hacer esto, puedes usar WPForms, que es el mejor plugin de formularios de contacto del mercado.
En WPBeginner, lo usamos para crear formularios de contacto y encuestas anuales, y nos encanta. Para saber más, consulta nuestra reseña completa de WPForms.
Simplemente necesitarás crear un formulario y luego agregarlo a tu barra lateral usando el bloque de WPForms en el menú de bloques.
Para más detalles, puedes ver nuestro tutorial sobre cómo crear un formulario de contacto en WordPress.
Adicionalmente, puedes mostrar tus publicaciones más populares en la barra lateral, agregar imágenes, mostrar iconos de redes sociales y exhibir prueba social. Esto animará a los usuarios a explorar más tu sitio y aumentará tus conversiones.
Para más consejos, puedes ver nuestra lista de los mejores trucos para la barra lateral de WordPress para obtener resultados máximos.
Tutorial en video
Si no prefieres instrucciones escritas, simplemente mira nuestro video tutorial.
Preguntas frecuentes sobre menús laterales colapsables en WordPress
Aquí tienes algunas preguntas que nuestros lectores han hecho con frecuencia antes de agregar un menú lateral colapsable en sus sitios web:
¿Cómo colapsar un menú en WordPress?
Puedes colapsar un menú usando un plugin como Bellows Accordion Menu. Por defecto, los menús de WordPress no tienen esta función en pantallas de escritorio. Un plugin agrega el código necesario para que los elementos se expandan y oculten al hacer clic.
¿Cómo agrego una sección colapsable en WordPress?
La forma más fácil es usar el bloque predeterminado de WordPress 'Detalles'. Este bloque te permite envolver contenido dentro de una línea de resumen clickeable. Para un estilo más avanzado dentro de tus publicaciones, puedes usar un plugin de acordeón dedicado.
¿Cómo crear un menú desplegable en WordPress?
Puedes crear un menú desplegable visitando Apariencia » Menús en tu panel de control. Simplemente arrastra un elemento del menú ligeramente hacia la derecha debajo de un enlace principal. Esta indentación le indica a WordPress que muestre ese elemento dentro de una lista desplegable.
Para más detalles, echa un vistazo a nuestro tutorial sobre cómo crear un menú desplegable en WordPress.
¿Cómo poner elementos uno al lado del otro en WordPress?
Puedes poner elementos uno al lado del otro usando el bloque de Columnas. En el editor de bloques, selecciona 'Columnas' y elige tu diseño preferido. Luego, simplemente agrega tu texto o imágenes en cada columna.
¿Qué es el plugin de bloque de acordeón para WordPress?
Un plugin de bloque de acordeón te permite agregar secciones de contenido colapsables a tus publicaciones. Ayuda a organizar contenido largo ocultando texto debajo de encabezados. Los usuarios simplemente hacen clic en el encabezado para leer la información que necesitan.
Si quieres agregar acordeones a tu sitio, echa un vistazo a nuestras mejores opciones de los mejores plugins de acordeón para WordPress.
Esperamos que este artículo te haya ayudado a aprender cómo crear un menú de barra lateral colapsable en WordPress. Para más consejos sobre cómo editar el diseño de tu sitio de WordPress, también puedes consultar nuestras guías sobre cómo personalizar el encabezado de tu WordPress y los widgets de WordPress más útiles para tu sitio.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Mrteesurez
Gracias por esta guía, si te entiendo correctamente, ¿eso significa que el plugin generará un shortcode que se puede colocar en cualquier lugar del sitio, incluso dentro de una publicación?
Comentarios de WPBeginner
Si bien podrías intentar usar el shortcode en otras ubicaciones, incluso si funciona, puede que no se muestre de una manera útil.
Jiří Vaněk
Lo probé, y sí, tu idea es correcta. Realmente funciona. Sin embargo, vale la pena considerar cómo lo usarás al final. Porque en mi caso, no pude encontrar ningún otro uso para él además de en la barra lateral. Pero tal vez tu sitio web sea diferente y le encuentres un uso. Entonces, la respuesta a tu pregunta es sí, funciona como lo describiste.
Jiří Vaněk
Para sitios web que tienen muchas categorías, esta es la opción perfecta para que la barra lateral sea clara. Ahora tengo alrededor de 15 categorías en el sitio y estoy pensando en algo similar al acordeón también. Gracias por la inspiración.
Tamie
Gracias por esto. ¿Cómo se puede ajustar el espaciado entre las subcategorías? Tengo muchas categorías y tener lo que parece un doble espacio entre líneas hace que los menús sean muy largos.
Soporte de WPBeginner
Dependería de tu tema específico para la configuración requerida. Deberías empezar por consultar con el soporte de tu tema específico. De lo contrario, podrías usar Inspeccionar elemento para encontrar lo que necesita ser modificado. Tenemos una guía a continuación que muestra cómo usar Inspeccionar elemento para ayudarte con esto:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Administrador