Personaliza la fuente, el color y el tamaño de los enlaces de navegación de tu sitio.
La navegación del sitio es un conjunto de enlaces que dirige a los visitantes al contenido del sitio. La navegación suele aparecer en la parte superior del sitio, aunque algunas plantillas de la versión 7.0 admiten la navegación en pies de página o barras laterales.
Todos los sitios incluyen opciones para cambiar la fuente, el color y el tamaño de los enlaces de navegación. En esta guía, se explica cómo personalizar la navegación en cualquier sitio.
Antes de comenzar
- Agrega enlaces a tu navegación añadiendo páginas en el panel de Páginas. No se mostrarán las páginas de la sección No vinculadas.
- Cambia el texto de cualquiera de los enlaces actualizando su Título de navegación en la Configuración de página.
- Para cambiar el orden de los enlaces del menú, arrastra y suelta páginas en el panel Páginas.
Encontrar los ajustes de estilo de navegación
La forma en que cambias el estilo de navegación depende de la versión de tu sitio.
Los estilos de enlace de navegación se establecen principalmente en el encabezado de tu sitio. En el editor de encabezado, puedes cambiar:
- El diseño de navegación
- Los colores de navegación
- Espaciado del enlace de navegación
- El relleno alrededor del texto
- Si la navegación está fija
- Cómo se ve la navegación en equipos de escritorio frente a dispositivos móviles
También puedes utilizar las opciones de Estilos del sitio para cambiar fuentes y tamaños. Para obtener más información, revisa las secciones a continuación.
Cada familia de plantillas tiene sus propios estilos del sitio, por lo que no existe una sola regla para actualizar los enlaces de navegación. Sigue estos consejos para encontrar las opciones de estilo que admite tu plantilla:
- Para abrir estilos del sitio desde el menú de Inicio, haz clic en Diseño y, a continuación, en Estilos del sitio.
- Desplázate por los ajustes de la izquierda y busca los ajustes relacionados. Por lo general, los ajustes incluyen la palabra Navegación.
- También puedes desplazar el cursor sobre los enlaces de navegación de tu sitio en la vista previa del sitio, que se encuentra a la derecha. Cuando aparece un cuadro de resaltado azul alrededor, haz clic en cualquier enlace de navegación. Esto ayuda a filtrar los ajustes que no afectan los enlaces de navegación. Cuando hayas terminado, haz clic en Mostrar todos para regresar a la vista principal.
Este es un ejemplo de cómo luce en la plantilla Thorne, que es parte de la familia Brine:
Cambia la fuente y el tamaño:
La forma en que cambia la fuente de navegación depende de la versión del sitio.
De forma predeterminada, la fuente de navegación coincide con la fuente de todo el sitio. Para configurar otro tipo de fuente o tamaño para la navegación:
- Al editar una página, haz clic en el ícono del pincel y, a continuación, en Fuentes.
- En Estilos globales del texto, haz clic en Asignar estilos.
- Haz clic en Navegación del sitio.
- Para cambiar la fuente, haz clic en Estilo y, a continuación, elige Personalizado. Selecciona una nueva familia de fuentes, peso, estilo y otros detalles. Haz clic en Guardar para aplicar los cambios.
- Para cambiar el tamaño, haz clic en Tamaño y, a continuación, elige un tamaño de párrafo preestablecido o selecciona Personalizado. Para establecer un tamaño personalizado, utiliza el control deslizante o introduce manualmente un nuevo valor rem. Haz clic en Guardar para aplicar los cambios.
Consejo: Para obtener información sobre cómo la versión 7.1 utiliza valores rem para tamaños de fuente, visita Cómo cambiar fuentes.
Para cambiar la fuente de navegación, haz clic en el ícono v junto al nombre del ajuste para abrir el menú desplegable. Desde aquí, puedes cambiar:
- Los nombres de las fuentes
- Estilo
- Tamaño
- La altura de las líneas
- Los espacios entre las letras
Si necesitas más ayuda, consulta Cambiar fuentes.
Cambiar el color
La forma en que cambias el color de navegación depende de la versión de tu sitio.
Para cambiar los colores del enlace de navegación, cambia el tema cromático de la sección de encabezado. También puedes cambiar el tema cromático de la superposición de encabezado para dispositivo móvil.
Después de establecer un tema cromático, puedes personalizar aún más el tema estableciendo colores específicos para los enlaces de navegación.
Para cambiar los colores de los enlaces de navegación, haz clic en un ajuste de color en estilos del sitio. Elige un color nuevo haciendo clic en uno de los colores que se encuentran en la parte superior del selector y, luego, elige un tono en el recuadro. También puedes ingresar un valor específico en el campo de texto. Para obtener más ayuda, visita Cómo cambiar colores o la guía de plantillas de tu sitio.
Cambiar el diseño y el espaciado
La forma de cambiar el diseño de navegación depende de la versión de tu sitio.
Para cambiar la posición y el espaciado de los enlaces de navegación, edita cómo aparece el encabezado de tu sitio en equipos. También puedes personalizar el aspecto y la ubicación del ícono del menú en dispositivos móviles.
En algunas plantillas, puedes cambiar la posición de los enlaces. En los estilos del sitio, busca los ajustes Posición de navegación, Alineación de navegación o algo similar. Para conocer las posiciones disponibles en la plantilla, revisa la tabla a continuación.
Consejo: Algunas plantillas admiten navegación fija, que permanece en la misma posición en la parte superior del navegador mientras te desplazas hacia abajo por la página.
Aspecto de la navegación en cada plantilla
El diseño de navegación del sitio depende de la plantilla del sitio y se muestra de forma diferente en los dispositivos móviles. Los dispositivos móviles más grandes, como tabletas, pueden mostrar los estilos de un equipo de escritorio.
A continuación, se muestra la navegación principal en los equipos de estas familias de plantillas:
|
Plantilla |
Diseño |
|
Adirondack |
Horizontal, parte superior central |
|
Avenue |
Horizontal, parte superior izquierda/central/derecha |
|
Aviator |
Vertical, parte superior izquierda (Tarjeta de negocio/Posición de desplazamiento); u horizontal, parte superior central (Póster) |
|
Bedford |
Horizontal, parte superior derecha |
|
Brine |
Horizontal, parte superior izquierda/central/derecha, puede ocultarse En el Panel de páginas, se denomina "Navegación principal". |
|
Farro |
Horizontal, parte superior izquierda/central/derecha, puede ocultarse |
|
Five |
Vertical, en la barra lateral (Posición de la navegación superior: Ninguna); u horizontal parte superior izquierda/central/derecha (Arriba del banner, abajo del banner) |
|
Flatiron |
Horizontal, parte superior izquierda |
|
Forte |
Horizontal, parte superior derecha |
|
Galapagos |
Horizontal, parte superior central |
|
Ishimoto |
Horizontal, parte superior izquierda/central/derecha |
|
Momentum |
Horizontal, en la barra de navegación |
|
Montauk |
Horizontal, parte superior izquierda/central/derecha |
|
Native |
Horizontal, parte superior central |
|
Pacific |
Horizontal, parte superior central, puede dividirse alrededor del título |
|
Skye |
Vertical, dentro de un recuadro superpuesto |
|
Supply |
Vertical, barra lateral izquierda |
|
Tremont |
Horizontal, arriba a la izquierda/derecha |
|
Wells |
Vertical, barra lateral izquierda |
|
Wexley |
Horizontal, parte superior izquierda/central/derecha |
|
York |
Horizontal, parte superior izquierda/central/derecha, puede ocultarse |
Cambiar el espaciado entre enlaces
Para cambiar el espacio alrededor de los enlaces de navegación, busca ajustes en los estilos del sitio que cambien el encabezado, el banner o la navegación. Si bien los ajustes varían según la plantilla, los ajustes de espaciado de vínculos suelen incluir palabras como Relleno, Espaciado o Ancho.
Opciones activas y de desplazamiento (versión 7.0)
En la versión 7.1 , no es posible establecer diferentes colores para los enlaces de navegación activos y de posicionar el cursor. Los enlaces activos siempre están subrayados.
En algunas plantillas, hay más opciones para los enlaces de navegación según si se ha hecho clic en ellos. En ocasiones a esto se le llama su “estado“ o “fase“. Si bien los ajustes varían según la plantilla, busca estas palabras:
- Posicionar el cursor: El enlace cambia cuando el visitante posiciona el cursor sobre él.
- Activo: Cuando la persona que visita el sitio ingresa en una de las páginas de tu navegación, su enlace cambia de estilo.
Para obtener ayuda con tu plantilla, consulta la guía de plantillas.
Consejo: Los enlaces de navegación externa no mostrarán los estilos activos, incluso si dirigen a una página de tu sitio.
Navegación en dispositivos móviles
En dispositivos móviles, los enlaces de navegación principal se contraen detrás de un enlace o ícono ☰ (también conocido como ícono de hamburguesa) en Menú. Un visitante puede hacer clic en este o pulsarlo para mostrar el menú completo. Esto ayuda con la usabilidad y mantiene al sitio apto para dispositivos móviles.
El enlace o ícono también puede aparecer en los navegadores de escritorio dependiendo del tamaño del navegador del visitante, el número de enlaces del menú o la longitud de los títulos de navegación.
La forma en que diseñas tu navegación móvil depende de la versión de tu sitio.
Para dar estilo a la navegación móvil, edita el encabezado del sitio. En el editor de encabezados, haz clic en el ícono Móvil para establecer estilos específicos para dispositivo móviles, incluidos el diseño y el tipo de ícono de menú.
Ten en cuenta lo siguiente:
- Los botones de encabezado siempre aparecen con los enlaces de navegación detrás del enlace Menú o el ícono ☰.
- No es posible cambiar el tamaño de la fuente de navegación móvil.
- No es posible hacer que el ícono del menú aparezca siempre en un equipo.
- El ícono del menú no aparecerá si todas tus páginas están en la sección No vinculadas. Si el ícono del menú sigue apareciendo incluso sin páginas en la navegación, deshabilita el inicio de sesión de las cuentas de clientes en el encabezado.
En muchos casos, la navegación móvil hereda estilos de la pantalla del equipo para mantener la coherencia de la gestión de marca. Algunas plantillas tienen opciones avanzadas de estilo para dispositivos móviles, lo que te da un mayor grado de control. Para obtener más información, visita la guía de tu plantilla.
Para explorar qué ajustes afectan la navegación en dispositivos móviles, abre la navegación en la vista de teléfono antes de abrir los estilos del sitio:
- Cambia la vista en dispositivo a teléfono.
- Haz clic en el enlace de navegación (por lo general, un ☰) para que aparezca la navegación en dispositivos móviles.
- En el menú de Inicio, haz clic en Diseño y, luego, en Estilos del sitio. La navegación en dispositivos móviles continuará abierta.
Nota: Si no puedes ver tu navegación en los dispositivos móviles, cerciórate de no haber configurado el color de fondo o del encabezado con el mismo color que el texto de la navegación. Los enlaces podrían aparecer sobre este color en los dispositivos móviles.
Diseño de ícono de menú o enlace por plantilla
A continuación, se muestra cómo se ve el ícono ☰ o el enlace de menú en estas familias de plantillas:
|
Familia de plantillas |
Ícono o enlace (se muestra siempre en dispositivo móvil) |
Se muestra en equipos... |
|
Adirondack |
Ícono ☰ |
|
|
Avenue |
Enlace de menú |
|
|
Aviator |
Enlace de menú |
|
|
Bedford |
Ícono ☰ |
|
|
Brine |
Ícono ☰. Cambia el estilo con la sección Dispositivo móvil: ícono de menu en estilos del sitio. |
|
|
Farro |
Ícono ☰ |
|
|
Five |
Ícono ☰ |
|
|
Flatiron |
Enlace de menú |
|
|
Forte |
Ícono ☰ |
|
|
Galapagos |
Ícono ☰ |
|
|
Ishimoto |
Enlace de menú |
|
|
Momentum |
Ícono ☰ |
|
|
Montauk |
Enlace de menú |
|
|
Native |
Enlace de menú |
|
|
Pacific |
Ícono ☰ |
|
|
Skye |
Ícono ☰ |
|
|
Supply |
Ícono ☰ |
|
|
Tremont |
Ícono ☰ |
|
|
Wells |
Enlace de menú |
|
|
Wexley |
Enlace de menú |
|
|
York |
Ícono ☰ |
|
Íconos de navegación en dispositivos móviles vacíos
En algunas plantillas, el ícono siempre aparece en dispositivos móviles, incluso si todas las páginas están en la sección No vinculada.
Puedes ocultar el ícono de menú en estas familias de plantillas:
- Familia Brine
- Familia Farro
En el menú de Inicio, haz clic en Diseño y, a continuación, en Estilos del sitio. Desplázate hasta la sección Dispositivo móvil: ícono de menú y establece el ajuste de posición del ícono de menú en Ocultar.
En estas familias de plantillas, no existe una forma integrada de ocultar el ícono de navegación en dispositivos móviles:
- Bedford
- Forte
- Galapagos
- Montauk
- Wells
- York
Consejo: puedes ocultar el ícono de navegación móvil añadiendo código personalizado. Para obtener más información, visita esta publicación en el Squarespace Forum.
Ten en cuenta que las modificaciones al código personalizado están fuera del alcance de nuestro soporte técnico. Esto significa que no podemos ayudarte a configurar ni resolver problemas de las soluciones basadas en código.
Ocultar el menú contraído en los equipos
Para evitar que el enlace o el ícono se muestren en los equipos:
- Mantén breves los títulos de navegación.
- Reduce el número de enlaces del menú. Puedes utilizar carpetas para agrupar páginas relacionadas en menús desplegables o, si tu sitio está en la versión 7.0, mover páginas a navegación secundaria o pie de página.
- Si el sitio está en la versión 7.0, cambia de plantilla. Haz clic en la pestaña Versión 7.0 anterior y, a continuación, explora las opciones Se muestra en equipos....