Navegación

Tu navegación es el menú que recorre la parte superior de tu sitio público (el encabezado) y la franja de enlaces de la parte inferior (el pie de página). Puedes crear varias variantes con nombre de cada uno: todo sitio tiene un encabezado y un pie de página Predeterminado obligatorios, y puedes agregar más variantes y asignarlas a páginas individuales (útil para un programa de categorías juveniles, un centro de eventos o cualquier sección que necesite su propio menú). Lo encuentras en Gestión del sitio web, en la barra lateral de administración, en la página Navegación.

Quién puede usar esto

Necesitas el rol de administrador para crear, editar o guardar menús. Los moderadores pueden abrir las páginas y recorrerlas, pero solo los administradores pueden guardar: el guardado de un moderador se rechaza. Todo lo que guardas aparece de inmediato en tu sitio público.

Qué hay en la página

La página Navegación es una galería de tus variantes de menú, dividida en Variantes de encabezado y Variantes de pie de página:

• Cada variante es una tarjeta que muestra su nombre, un resumen de lo que contiene y cuántas páginas la usan. El Predeterminado de cada tipo tiene una insignia y no se puede eliminar.
• + Nuevo encabezado / + Nuevo pie de página crea una variante (hasta 8 de cada tipo). Duplicar empieza una variante nueva a partir de una existente; suele ser la forma más rápida.
• Cambiar nombre, Hacer predeterminado y Eliminar están en cada tarjeta. Al eliminar una variante, sus páginas vuelven automáticamente al Predeterminado.

Al hacer clic en Editar, se abre el editor de lienzo de ese menú, con tres pestañas:

• Lienzo (predeterminada): el menú se muestra sobre una página de muestra y se edita con un clic, como en el editor de páginas. Haz clic en cualquier parte (un elemento del menú, la barra superior, el logotipo, el fondo de la barra, una columna del pie de página, la franja de patrocinadores) y se abre la configuración de solo ese elemento en un panel de configuración a la derecha, el mismo panel que usa el editor de páginas para las secciones. El lienzo sigue funcionando detrás, así que al hacer clic en otro elemento el panel pasa a ese elemento; Esc o la ✕ lo cierran. Arrastra un elemento del menú (o una columna del pie de página) sobre otro para reordenarlo. Los botones Agregar a este encabezado / pie de página están sobre el lienzo y en la parte inferior del panel, así que siempre están a mano: agregan un elemento nuevo al final y lo seleccionan de inmediato.
• En una pantalla angosta (un teléfono o una ventana dividida), el panel ocupa toda la pantalla y los campos se apilan en una sola columna en lugar de achicarse, así que nada queda demasiado pequeño para leer o tocar. Ciérralo para volver al lienzo.
• Toda la configuración: los paneles completos en formato largo con una vista previa en vivo fija, prácticos para editar muchas cosas a la vez.
• JSON (avanzado): para copiar un menú entre variantes u organizaciones.

El botón flotante de guardado habitual está arriba a la derecha.

Paso a paso

Agrega un enlace, un botón o un menú al encabezado

1. Abre una variante de encabezado y busca la sección Elementos.
2. Haz clic en + Enlace, + CTA (un botón de llamada a la acción), + Desplegable o + Megamenú.
3. Define el Texto (lo que leen los visitantes), elige un Estilo y define la Visibilidad.
4. Para un enlace o un CTA, elige Página interna y selecciona un destino, o Enlace externo y pega una dirección completa https://.
5. Usa las flechas ↑ / ↓ para reordenar o ✕ para quitar. Puedes tener hasta 12 elementos de primer nivel; los desplegables admiten hasta 8 enlaces secundarios; los megamenús admiten hasta 4 columnas de 8 enlaces cada una.

Crea un megamenú

Un megamenú abre un panel de ancho completo con columnas de enlaces agrupados: el patrón que usan los sitios de federaciones grandes para secciones con mucho contenido.

1. Agrega un elemento + Megamenú (o cambia el Tipo de un desplegable existente a Megamenú: sus enlaces pasan a la primera columna).
2. Agrega hasta 4 columnas, cada una con un título opcional y hasta 8 enlaces.
3. En los teléfonos, el panel se contrae en un solo grupo desplegable dentro del menú de hamburguesa.

Agrega una barra superior de utilidades

1. En una variante de encabezado, activa la sección Barra superior de utilidades.
2. Elige un fondo y luego agrega enlaces pequeños (hasta 8) e íconos de redes sociales (hasta 8).
3. La franja aparece sobre tu barra de navegación principal: ideal para enlaces entre sitios (redes del estilo "Mi Fútbol") e íconos de redes sociales.

Elige un diseño y un fondo para el encabezado

1. Abre una variante de encabezado y haz clic en el fondo de la barra en el lienzo (o usa Toda la configuración).
2. Elige un Diseño:
   • Logotipo a la izquierda, enlaces a la derecha: tu logotipo a la izquierda, y el menú y el botón de inicio de sesión a la derecha. Todos los sitios empiezan con este.
   • Logotipo centrado, enlaces debajo: tu logotipo centrado en su propia fila, con el menú centrado debajo.
   • Enlaces centrados, botones a la derecha: el logotipo a la izquierda, el menú centrado, y tus botones CTA y de inicio de sesión a la derecha.
   • Menú dividido, logotipo centrado: el menú dividido a ambos lados de un logotipo centrado. La primera mitad de tus elementos va a la izquierda.
3. Elige un Fondo: Color principal (el color principal de tu tema con texto blanco, o texto oscuro si ese color es muy claro), Claro (el fondo de tu página con el color de texto de tu tema), Oscuro (casi negro con texto blanco) o Claro con una línea de color (una barra clara con una línea de tu color principal debajo).
4. El lienzo se actualiza a medida que eliges. Guarda para publicarlo.

En los teléfonos, todos los diseños muestran tu logotipo y el botón del menú, así que el menú para celulares funciona igual sin importar cuál elijas.

Haz que un enlace apunte a una de tus páginas

1. Con Página interna seleccionada, usa el cuadro de búsqueda para filtrar tus rutas integradas y todas las páginas de tu organización (incluidos los borradores).
2. Si escribes una ruta que todavía no existe, verás un aviso en ámbar. Para una ruta simple, puedes hacer clic en Crear página en … para crear un borrador e ir directamente al editor de páginas.
3. Un enlace a una página que no existe muestra una insignia Página faltante y queda oculto en el sitio público hasta que esa página se publique.

Edita un pie de página

1. Abre una variante de pie de página.
2. Define el Diseño, el Fondo, el Tono del texto, un Texto de introducción opcional y tu Línea de derechos de autor. Los diseños son:
   • Columnas: columnas de enlaces con título, una al lado de la otra, con los patrocinadores encima. Todos los sitios empiezan con este.
   • Centrado y compacto: todo centrado, con tus enlaces en una sola fila que se ajusta.
   • Columnas con una franja de patrocinadores: columnas de enlaces con título y luego tus patrocinadores en una franja propia.
   • Línea mínima: derechos de autor, enlaces e íconos de redes sociales en una sola línea.
3. Agrega Columnas (hasta 6, cada una con hasta 10 filas de enlaces), Redes sociales (hasta 10, con un selector de íconos de marca), un botón CTA del pie de página opcional y una franja de logotipos Patrocinadores y socios comerciales (hasta 12 logotipos, cada uno con un enlace opcional al sitio del patrocinador).

Dale a una página su propio encabezado o pie de página

1. Primero crea la variante aquí (por lo general, duplicando el Predeterminado).
2. Abre la página en el editor de Páginas. Cuando tienes más de una variante de un tipo, aparecen los selectores Encabezado y Pie de página en la barra de herramientas del editor, junto al control de la barra lateral.
3. Elige la variante: se guarda de inmediato y la vista previa del editor se actualiza. Elige la opción "(predeterminado)" para volver atrás.

Guarda tus cambios

1. En cuanto editas algo, el botón de guardado dice Cambios sin guardar.
2. Haz clic en Guardar encabezado (o Guardar pie de página). El botón muestra Guardando… y luego Guardado.
3. Descartar vuelve a tu última versión guardada; Exportar JSON descarga una copia del menú.

Vuelve a una versión anterior

Cada guardado registra una versión, que aparece de la más reciente a la más antigua en la tarjeta Historial de versiones, al final del editor del menú.

1. Abre el menú desde la galería de Navegación y baja, debajo del editor, hasta Historial de versiones. Cada fila muestra cuándo se guardó, quién la guardó, un breve resumen (cantidad de elementos, megamenú, logotipos de patrocinadores, etc.) y cuántas opciones cambiaron desde la versión anterior; la primera fila tiene la insignia Publicada ahora.
2. Haz clic en Restaurar en la versión que quieres recuperar y confirma. El editor se vuelve a cargar con esa versión y se publica en tu sitio público de inmediato. Si la versión ya no cumple las reglas actuales de los menús, verás un mensaje y no cambia nada.
3. La restauración también queda registrada como una versión nueva, así que siempre puedes volver a avanzar: nunca se pierde nada. Usa los enlaces ← Más recientes / Más antiguas → para recorrer historiales más largos.

Referencia de campos

Consejos y preguntas frecuentes

• ¿Qué menú aparece en qué página? Todas las páginas usan el encabezado y el pie de página Predeterminado, salvo que fijen una variante en el editor de páginas. Las rutas integradas (noticias, eventos, tienda, cuenta) siempre usan el Predeterminado.
• Íconos en los textos: abre la ayuda "Usa íconos de FontAwesome en cualquier texto" para pegar un fragmento de ícono gratuito en cualquier texto.
• Los enlaces de inscripción y de inicio de sesión se ocultan solos cuando ya no corresponden. Un enlace a la página de inscripción se oculta automáticamente para los visitantes que ya pertenecen a tu organización (incluida cualquier persona con una solicitud pendiente), y los enlaces de iniciar sesión y de registrarse se ocultan para los visitantes con sesión iniciada, diga lo que diga la opción de Visibilidad del elemento. Puedes dejar estos enlaces en "Siempre visible" sin problema.
• Desaparecieron los títulos de las columnas de mi pie de página. Los pies de página Centrado y compacto y Línea mínima muestran tus enlaces en una sola fila, así que no se muestran los títulos de las columnas. Vuelve a Columnas para recuperarlos; no se pierde nada.
• ¿El encabezado se puede superponer a mi imagen principal? Todavía no. El texto sobre una foto no se puede mantener legible en todas las páginas, así que cada fondo es sólido.
• Los enlaces externos se abren en una pestaña nueva y se protegen automáticamente.
• ¿Te equivocaste? Cada guardado registra una versión: usa el Historial de versiones, debajo del editor del menú, para restaurar cualquier versión anterior, así puedes hacer cambios con confianza.
• La marca ClubHelix aparece debajo de tu pie de página editable y depende de tu plan. En el plan Free, la franja "Con la tecnología de ClubHelix" aparece sobre el encabezado de tu sitio y en el pie de página; en Standard, solo en el pie de página; en Pro y Enterprise, tu sitio no muestra ninguna marca visible de ClubHelix. No hay una opción para esto: cambia automáticamente según tu plan.
• Relacionado: crea las páginas a las que enlaza tu menú en Páginas, ajusta los colores y los botones en Tema y define tu logotipo en Identidad visual. Consulta el Resumen de administración para tener el panorama completo.