¿Cómo configurar menús en tu sitio web?

¿Cómo configurar menús en tu sitio web?

Aprender a organizar y personalizar el menú de navegación de tu sitio web usando la función de arrastrar y soltar, opciones de visibilidad, y el editor de bloques para agregar contenido en distintas áreas de tus páginas.

Pasos para acceder al menú

1. Ingresa a tu panel de administración.
2. Dirígete a Configuración > Editar sitio > Menúes.

Funcionalidades principales de los menús

1. Visualiza todas las secciones disponibles

   Verás todas las secciones activas de tu sitio web: inicio, contacto, blog, productos, servicios, y las secciones personalizadas que hayas creado.

2. Organiza el menú con arrastrar y soltar (Drag & Drop)

   Puedes reordenar las secciones fácilmente arrastrándolas. El orden afecta cómo se visualiza el menú en tu sitio (de izquierda a derecha en escritorio o de arriba a abajo en móvil).

3. Agregar o editar contenido con el ícono de paleta de pintor 🖌️

   Cada sección del menú cuenta con un ícono de paleta. Al hacer clic en él, accedes al editor de bloques para personalizar el contenido de esa sección.

   • Secciones personalizadas:

     En estas secciones, el editor de bloques se abrirá en blanco para que puedas diseñar libremente tu contenido. Puedes agregar:

     • Textos
     • Imágenes y videos
     • Mapas, formularios, banners, preguntas frecuentes y más.

   • Secciones fijas con contenido dinámico:

     Estas secciones (como Inicio, Productos, Servicios, Contacto o Blog) tienen contenido predefinido por el sistema, pero puedes incorporar bloques adicionales en ubicaciones específicas.

     Al hacer clic en el ícono de paleta, podrás elegir en qué área de esa sección deseas agregar contenido. Las áreas disponibles varían según la sección:

     ▸ Home / Inicio:

     • Debajo del menú superior (header)
     • Debajo del banner principal
     • Arriba de los productos destacados
     • Arriba del menú inferior (footer)

     ▸ Productos:

     • Debajo del menú superior (header)
     • Arriba del menú inferior (footer)

     ▸ Servicios:

     • Debajo del menú superior (header)
     • Arriba del menú inferior (footer)

     ▸ Contacto:

     • Debajo del menú superior (header)
     • Arriba del menú inferior (footer)

     ▸ Blog:

     • Debajo del menú superior (header)
     • Arriba del menú inferior (footer)

     ⚠️ Importante: Actualmente no es posible editar el contenido de los siguientes elementos del sitio:

     • Menú superior (header)
     • Menú inferior (footer)
     • Contenido dinámico como: lista de productos, filtros, ficha de producto, productos destacados, sliders de productos en oferta o contenido del blog.

   Para más información, puedes consultar este tutorial:

   Conoce el entorno de bloques en Waclis

4. Diferencias entre el editor de bloques y la visualización final del sitio

• • Cuando editas una sección desde el ícono de paleta 🖌️ y utilizas el editor de bloques, es importante tener en cuenta lo siguiente:

    • El editor de bloques es una vista de edición, no una representación exacta del diseño final del sitio.
    • Algunas secciones, como Inicio, tienen estructuras y anchos predefinidos que se respetan en el sitio publicado.
    • Por este motivo, una imagen puede verse más grande o más chica en el editor que en el frontend, incluso si ajustas su tamaño dentro del bloque.

  Casos frecuentes donde ocurre esta diferencia

  • • Al agregar una imagen tipo banner dentro de la sección Inicio.
    • Al modificar manualmente el ancho o alto de una imagen desde el bloque.
    • Al visualizar el sitio en distintos dispositivos (escritorio, tablet o móvil).

  El sistema adapta automáticamente el contenido para que sea responsive, priorizando una correcta visualización en todos los tamaños de pantalla.

  Recomendación para banners en la página de inicio

  Si deseas mostrar un banner principal en la página de inicio, ten en cuenta que:

  • • El banner principal del sitio no se configura desde los bloques del menú, sino desde la configuración específica de banners del sitio.
    • Al usar una imagen común dentro de bloques, esta se ajustará al contenedor de la sección y no ocupará todo el ancho de la pantalla, aunque en el editor parezca hacerlo.

  Para banners de gran tamaño o de ancho completo, se recomienda:

  • • Utilizar la sección de banners del sitio (si está disponible).
    • O usar bloques pensados específicamente para ese fin.

5. Mostrar u ocultar secciones del menú

​Haz clic en el ícono del “ojo” para ocultar secciones sin eliminarlas. Las secciones ocultas no se mostrarán ni ​en el menú superior (header) ni en el inferior (footer).

6. Opciones avanzadas (menú de tres puntos)

Al hacer clic en los tres puntos verticales junto a cada sección, podrás:

• • Editar nombre de la sección
  • Activar solo visibilidad en el footer
  • Agregar subsecciones (se mostrarán como desplegables)
  • Eliminar secciones personalizadas (no puedes eliminar secciones fijas como Inicio o Productos)

Agregar una nueva opción al menú

Haz clic en el botón “Agregar” (parte superior derecha).

Completa los siguientes campos:

• Nombre de la opción de menú: Nombre visible en el menú.

• Contenido:

  • Nueva sección: Para crear contenido con el editor de bloques.
  • URL externa: Para redirigir a una página externa o interna (por ejemplo, una categoría de productos).

• Solo visible en el footer: Activa esta opción si quieres que aparezca únicamente en el menú inferior.

Beneficios de una buena configuración de menú

• Mejor experiencia para tus visitantes: Un menú ordenado ayuda a que los usuarios encuentren rápido lo que buscan.
• Flexibilidad total: Puedes ocultar, editar, mover, o agregar secciones según tus necesidades.
• Personalización avanzada: Enlaces externos, subsecciones, visibilidad selectiva y contenido personalizado en cada sección.

Consejos para optimizar tu menú

• Menos es más: Evita sobrecargar tu menú con muchas opciones.
• Nombres claros: Usa nombres que reflejen exactamente el contenido.
• Orden estratégico: Coloca primero las secciones más importantes.