Agregar enlaces ancla de página de índice en la versión 7.0

Última actualización: 13 de febrero de 2025

En la versión 7.0, las páginas de índice apiladas tienen una estructura de URL única que puedes utilizar para crear enlaces ancla (o “saltos de página”) sin código personalizado. Estos enlaces ancla te llevan a lugares específicos de la página de índice. 

Por ejemplo, cuando haces clic en el botón Ver nuestro trabajo en el sitio de demostración de la plantilla de Hayden, se desplaza hacia abajo en la página hasta la sección "Moreau".

Cómo acceder a esta función

Esta guía es para las páginas de índice en la versión 7.0. Para agregar enlaces ancla en la versión 7.1, visita crear enlaces ancla. Para agregar enlaces ancla a las páginas de diseño en la versión 7.0, visita Cómo crear manualmente enlaces ancla en la versión 7.0.

Plantillas admitidas

Los enlaces ancla de la página de índice funcionan mejor en las plantillas con páginas de índice apiladas. En estas familias de plantillas, hacer clic en un enlace ancla te lleva a la sección correspondiente en la página de índice.

  • Bedford
  • Brine: la carga de Ajax puede interferir con la conducta del enlace ancla. Como alternativa, puedes usar la navegación del índice integrada.
  • Pacific: debes agregar -section al final del enlace. Revisa el paso 3 a continuación para informarte mejor.

algunos índices en cuadrícula admiten una funcionalidad similar. También puedes usar código personalizado para añadir manualmente enlaces ancla en cualquier plantilla.

Paso 1: Encuentra el slug

En el panel de Páginas, pasa el cursor sobre la sección de Índice con la que desees enlazar. Haz clic en el icono del engranaje para abrir la Configuración de página de esa sección.

Copia el slug del campo Slug de URL. Usarás este slug para crear el enlace ancla.

el slug puede aparecer en la barra del navegador cuando los visitantes navegan a esa sección. Puedes cambiar el slug escribiendo el texto nuevo en este campo.

Adding_Index_Page_anchor_links.png

Paso 2: Crea el enlace

Agrega el enlace en el que harán clic los visitantes. Puedes usar cualquier tipo de enlace, pero usaremos un enlace de texto como ejemplo.

En un bloque de texto, resalta el texto y haz clic en el ícono del enlace en la barra de herramientas del bloque de texto.

el índice de cada plantilla ofrece opciones únicas. Para informarte mejor, consulta la guía de la familia a la que pertenece tu plantilla: Bedford, Brine o Pacific.

Paso 3: Agrega el slug de página

A continuación, sigue estos pasos:

  1. En el campo URL, pega el slug que copiaste en el paso 1.
  2. Agrega el símbolo de numeral (#) al frente del slug para completar el enlace. El enlace ancla de este ejemplo es #horario-y-ubicación.
  3. Desactiva la opción Abrir enlace en la nueva pestaña.
  4. Solo para las plantillas Pacific, Charlotte, Horizon y Naomi, agrega -sección al final del enlace ancla, así: #horario-y-ubicación-sección.
  5. Presiona Enter.

Paso 4: Añade el slug del Índice

Si creaste tu enlace en el paso 2 en una sección de la misma página de índice, puedes omitir este paso.

Para cualquier otro enlace, como enlaces de navegación o enlaces en otras páginas, incluye el slug de la página de índice antes del enlace ancla. De esta manera, se garantiza que tus enlaces funcionen desde:

  • Otra páginas.
  • La navegación de tu sitio.
  • La URL directa de una subpágina.

Para añadirlo:

  1. Copia el slug de tu Página de Índice desde su configuración de página.
  2. Vuelve a abrir el editor de enlaces.
  3. Añade el slug de la página antes del enlace ancla entre dos símbolos /, así:
/indexslug/#pageslug
  1. Presiona Enter.

Ejemplos

Agrega enlaces ancla a varias secciones para permitir que los visitantes naveguen en tu Página de Índice. Este ejemplo usa la plantilla Brine y tres diferentes tipos de enlaces: Bloque de botón, enlace de texto y URL clickthrough de imágenes.

Ejemplos de enlaces ancla en la plantilla Brine con un Bloque de botón, un enlace de texto y una URL clickthrough de imagen.

Crea una navegación acomodando tus enlaces ancla lado a lado. Este ejemplo usa la plantilla Bedford y enlaces de texto.

Ejemplos de enlaces ancla en la plantilla Bedford colocados a la par.

Página de índice de cuadrícula y enlaces ancla

Estas familias de plantillas con páginas de índice en cuadrícula admiten una opción integrada similar:

  • Avenue
  • Flatiron
  • Montauk

Puedes crear un enlace ancla a la Página de Índice en estas plantillas con el siguiente formato de URL:

/index-page-slug/#/page-slug

Esta es una buena opción para agregar enlaces a páginas dentro del índice desde la navegación de tu sitio o desde otras páginas de tu sitio. La página se abre con cualquier formato específico del Índice, del mismo modo que se abriría si hicieras clic en su imagen destacada en el índice.

Este ejemplo usa la plantilla Avenue.

Ejemplo del comportamiento de un enlace ancla en una Página de Índice en grilla.

Solución de problemas

Si un enlace ancla no funciona, estos consejos pueden ser útiles:

  • Si es necesario, asegúrate de haber agregado el slug de la página de índice como se describe en el paso 4, incluyendo los dos símbolos /. Esto es necesario para los enlaces de navegación y los enlaces de otras páginas.
  • Si tienes problemas en los sitios móviles y tu plantilla pertenece a la familia Brine, prueba deshabilitar Ajax transitoriamente para ver si esto está causando el problema.
  • Verifica que el slug de la página de índice y el slug de la página de la sección sean correctos. Si cambiaste alguno de ellos, deberás actualizar el enlace ancla manualmente.
Footer Image
  • Recibe ayuda de nuestra comunidad

  • Recibe la ayuda de nuestra comunidad para personalizaciones avanzadas.

  • Contrata a un Squarespace Expert

  • Destácate en línea con la ayuda de un diseñador o desarrollador con experiencia.

Agregar enlaces ancla de página de índice en la versión 7.0