Envía a los visitantes a una parte específica de una página.

Un enlace ancla (o "salto de página") es una URL especial que te lleva a un lugar específico de la página. Por ejemplo, el índice de esta guía contiene enlaces ancla que te dirigen a cada encabezado.

Esta guía explica cómo agregar enlaces ancla a cualquier sección de bloques de tu sitio con un bloque de código.

Mira el video

Paso 1: Agregar un bloque de código

En el editor de páginas, desplázate hasta la sección a la que quieres vincular y agrega un bloque de código. Puedes agregarlo a cualquier sección de bloques, pero no a otros tipos de sección como secciones de galería, secciones de páginas de colección o diseños inteligentes, ya que no es posible agregar bloques a esas secciones.

En el campo de código, agrega:

Aquí es donde te dirigirá el enlace

Dentro de la primera etiqueta, reemplaza unique-ID entre comillas por un identificador único específico para tu enlace:

• El texto de tu identificador único puede ser el que quieras, pero no puede tener espacios. Separa las palabras con un guión en su lugar.
• Los identificador único distinguen entre mayúsculas y minúsculas y se pueden usar una vez por página. Consulta nuestros consejos de mejores prácticas si necesitas más ayuda.

Reemplaza Aquí es donde te dirigirá el enlace con cualquier texto que quieras mostrar en tu sitio.

Paso 2: Crea el enlace

Agrega el enlace en el que hacen clic quienes visitan el sitio para acceder al contenido que creaste en el paso 1. Puedes usar cualquier tipo de enlace, pero en este ejemplo se usa un enlace de texto:

1. En un bloque de texto, escribe el texto que quieras vincular, resáltalo y haz clic en el ícono de enlace de la barra de herramientas del bloque de texto.
2. En URL, agrega la URL completa de la página (incluso si es la misma página) y una barra inclinada adicional. Debería verse así:

   https://examplesite.com/pageslug/

3. Después del slug de página, introduce un hashtag (#) seguido del identificador único del paso 1. Debe verse así:

   https://examplesite.com/pageslug/#unique-id

4. Si quieres que el enlace se abra en una pestaña nueva, cambia el control Abrir enlace en una pestaña nueva a Activado.
5. Presiona Enter.

Para ciertos enlaces ancla, incluir la dirección completa del sitio web es opcional, pero lo recomendamos para la mayoría de los enlaces.

Consejo: Si agregas enlaces ancla a tu página de inicio, no tienes que incluir el slug de la página. Si cambias tu página de inicio, agrega el slug a cualquier enlace ancla que hayas creado en la página de inicio anterior o no funcionará correctamente.

Paso 3: Guardar y publicar

Haz clic en Guardar para publicar tus cambios. El enlace que creaste en el paso 2 ahora lleva a quienes visitan el sitio al texto que estableciste en el paso 1.

Usar diferentes tipos de enlaces

El ejemplo anterior usa el cuerpo del texto como enlace ancla en el paso 2, pero puedes utilizar cualquier tipo de enlace, incluidos botones y clickthrough de imágenes. Visita Cómo agregar enlaces al sitio para conocer las diferentes opciones de enlaces.

Para todos los tipos de enlace, agrega la URL y el identificador único como se muestra en el paso 2 anterior, con este formato:

https://examplesite.com/pageslug/#unique-id

Formato del texto de destino

Para dar formato al texto de la página de aterrizaje que sea distinto al del cuerpo del texto, cambia las etiquetas

y

en el paso 1. Si no estás familiarizado con HTML, prueba usar las etiquetas de Encabezado 1:

Cuando utilices etiquetas diferentes, agrega el identificador único al código como lo hiciste en el Paso 1:

Aquí es donde te dirigirá el enlace

Enlace a un espacio en blanco

El enlace ancla funciona incluso sin texto visible. Si no quieres que aparezca texto en tu punto de destino, aplica formato al texto de destino sin nada entre las etiquetas:

Slugs de página y enlaces ancla

Te recomendamos que agregues la URL y el slug de página antes del identificador único en la mayoría de los casos. Si un enlace ancla no tiene el slug de página, no funcionará en ninguno de estos lugares:

• Si tu enlace es un enlace de navegación
• Si estás enlazando con otra página

Los enlaces ancla sin la URL del sitio también pueden tener problemas en los navegadores móviles de Safari. Para encontrar la URL de tu página, visita slugs de URL.

Si sabes que ninguno de los visitantes a tu sitio usa el navegador Safari para dispositivos móviles, y estás creando un enlace a un lugar de la misma página (por ejemplo, para desplazarte a un encabezado que está más abajo), puedes usar el identificador #unique-id en tu enlace sin el slug de página o la URL.

Consejo: Para ver qué navegadores usan quienes visitan el sitio, mira el panel Analytics del tráfico.

Enlazar a la parte superior o inferior de una página

Para enlazar a la parte superior o inferior de la página, vincula al encabezado o pie de página mediante la inserción de código. La inserción de código es una función premium.

Enlace al inicio

Enlazar a la parte superior de una página es útil si el contenido de tu página es largo y quieres dar a los visitantes una manera fácil de volver a tu navegación. Para enlazar a la parte superior de una página:

1. Agrega texto y un enlace ancla en la parte inferior de la página o el pie de página como se describe en el paso 2, pero no incluyas la URL de tu sitio ni una barra (/) antes del identificador único. Es posible que quieras usar Volver arriba como texto y #arriba como tu identificador único.
2. Abre el Panel de inserción de código.
3. En el campo Encabezado, agrega este código: . Si usaste un identificador único que no sea #top cuando creaste el enlace, asegúrate de reemplazarlo en la primera etiqueta .
4. Haz clic en Guardar.

Este método vincula a la parte superior de cada página de tu sitio. Puedes usar el mismo proceso para vincular a la parte superior de una sola página agregando el código a la configuración avanzada de la página.

Enlazar a la parte inferior

Enlazar a la parte inferior de una página es útil si quieres que los visitantes encuentren información o interactúen con algo en el pie de página, como un bloque de newsletter.

Para enlazar a la parte inferior de una página:

1. Agrega texto y un enlace ancla en cualquier parte del contenido de la página como se describe en el Paso 2, pero no incluyas la URL de tu sitio o una barra (/) antes del identificador único. Es posible que quieras usar Ir al pie de página como texto y #parte inferior como tu identificador único.
2. Abre el Panel de inserción de código.
3. En el campo Pie de página, agrega este código: . Si usaste un identificador único que no sea #bottom cuando creaste el enlace, asegúrate de reemplazarlo en la primera etiqueta .
4. Haz clic en Guardar.

Este método enlaza al pie de página en cada página de tu sitio.

Limitaciones y mejores prácticas

Los enlaces ancla pueden ser una herramienta poderosa para ayudar a los visitantes a navegar por el sitio, pero es bueno tener algunas cosas en mente.

Un indicador solo se puede utilizar una vez en cada página

Por ejemplo, después de usar el ID panda en tu página de inicio, no puedes agregar panda como ID más adelante en esta página. Puedes usarlo en una página diferente, pero no una segunda vez en tu página de inicio.

Los identificadores distinguen mayúsculas y minúsculas

Si tu HTML dice id="Panda", pero tu enlace muestra el ID como #panda, el enlace no funcionará.

El identificador único se convierte en parte de la URL después de hacer clic en el enlace ancla

Cuando un visitante hace clic en un enlace ancla, el identificador único aparece al final de la URL del sitio. Asegúrate de que tu identificador única sea algo que no te importe que los los visitantes vean.

Puedes utilizar cualquier texto como identificador único

Crear un identificador memorable puede simplificar el proceso de configuración y te puede ayudar a solucionar problemas si algo sale mal. Los identificadores memorables son, a menudo, los que tienen sentido lógico, por ejemplo, usando #top (arriba) para un enlace de "Volver arriba".

Los enlaces ancla también pueden ser una manera de añadir humor y personalidad al sitio. Recuerda que los visitantes podrán ver el identificador al final de la URL.

La sección a la que vinculas se mostrará en la parte superior del navegador

El texto de inicio se mostrará en la parte superior del navegador o lo más superior que se pueda si no hay mucho contenido por debajo.

Si no deseas que el texto esté en la parte superior de la ventana del navegador, puedes crear espacio antes de este agregando etiquetas

con espacios de no separación a la copia de texto de aterrizaje. En HTML, un espacio de no separación es  .

Cada conjunto de etiquetas

 

que agregues antes del texto añade un salto de línea adicional. Consulta las imágenes a continuación como referencia.

Vincular a secciones que no admiten bloques

No puedes vincular directamente a algunos tipos de sección como secciones de galería o diseños inteligentes porque no puedes agregar bloques a esas secciones, pero puedes crear un efecto similar siguiendo estos pasos:

1. Agrega una sección en blanco arriba de la sección a la que quieres vincular.
2. Sigue los pasos anteriores para agregar tu bloque de código a la sección en blanco y configurar el enlace ancla.
3. Para evitar el espacio creado por la sección en blanco, haz clic en la sección en blanco, luego Editar sección y desactiva Llenar pantalla .

Mantener los enlaces actualizados

Si cambias tu dominio principal o actualizas el slug de la página posteriormente, actualiza también los enlaces ancla, ya que no funcionarán correctamente si se usan URL desactualizadas.

Resolución de problemas

El enlace ancla no funciona

Si un enlace ancla no funciona, verifica lo siguiente:

• Agregaste la URL como se describe en el paso 2, incluido el slug de página y los dos símbolos /. Esto es especialmente importante para enlaces de navegación y enlaces de otras páginas.
• Asegúrate de que el identificador único sea exactamente el mismo en el enlace y el texto de inicio. Si hay alguna diferencia en la ortografía o de capitalización, el enlace no funcionará.
• Asegúrate de que el texto HTML de inicio esté configurado correctamente. Por ejemplo, si tu identificador único es #bamboo, el enlace que agregarás al texto HTML de inicio es id=“bamboo”.
• Las comillas en el HTML de texto de aterrizaje son "rectas", como en los ejemplos de esta guía. Las comillas "inglesas" o "tipográficas" no funcionarán en el bloque de código. El bloque de código tiene por defecto comillas "rectas", pero es posible que aparezcan comillas "inglesas" si copiaste y pegaste el código en el bloque.
• Agregaste www. al principio de tu URL si tu dominio principal lo incluye.
• Lo estás probando mientras hayas cerrado la sesión o en un navegador de incógnito. Hacer clic en un enlace ancla mientras hayas iniciado sesión puede funcionar en algunos casos, pero no es una prueba confiable de lo que experimentarán tus visitantes.

Incluso si todo está configurado correctamente, el enlace ancla no funcionará si:

• Usa el dominio integrado de tu sitio y lo pruebas después de haber iniciado sesión. Pruébalo con un navegador en modo incógnito.
• Tu sitio está configurado como privado y pruebas el enlace ancla después de haber iniciado sesión. Establece una contraseña para todo el sitio y prueba en un navegador en modo incógnito.
• Si la página ya usa esa ID. Intenta utilizar otra ID o cambiar el uso de mayúsculas.

El enlace ancla salta por debajo del bloque de código

Si el encabezado de tu sitio tiene  Posición fija habilitada, es posible que aparezca un enlace ancla que salte debajo del bloque de código con tu ID único. Para evitar esto, desactiva el botón Posición fija o agrega un poco de espacio debajo del bloque de código y encima del contenido al que quieres que vaya el enlace ancla.

Nota: Las modificaciones personalizadas del código están fuera del alcance de nuestro soporte. Esto significa que no podemos ayudarte más con la configuración o la solución de problemas. Además, con una solución basada en un código, no podemos garantizar su funcionamiento o la compatibilidad total con Squarespace. Esto incluye cómo funciona con nuestro diseño adaptable, en especial su aspecto en dispositivos móviles y sus funciones en todas las plantillas. El código personalizado tambié pueden ocasionar problemas de visualización con actualizaciones futuras de nuestra plataforma. Aunque no podemos ayudarte más, hay muchos recursos que te pueden orientar en la dirección correcta:

• Infórmate sobre las mejores prácticas para agregar código personalizado.
• Lee nuestra guía general sobre las personalizaciones de terceros.
• Visita Squarespace Forum, nuestra comunidad de clientes y desarrolladores.
• Contrata a un Squarespace Expert para ayudar a crear código personalizado para tu sitio.

Enlaces ancla en dispositivos móviles

Según el dispositivo y el navegador, el comportamiento de los enlaces ancla puede variar en dispositivos móviles. Por ejemplo, cuando tu enlace ancla incluye la URL completa como recomendamos, el navegador puede volver a cargar la página en el punto de destino en lugar de saltar de inmediato a este.

Si prefieres un comportamiento de enlace ancla diferente en dispositivos móviles, puedes probar formatos alternativos para el enlace ancla, como /pageslug#unique-id o #unique-id, pero ten en cuenta que estos formatos pueden no funcionar para ciertas configuraciones o en ciertos navegadores móviles, como el de Safari.

Para obtener más información, consulta Slugs de página y enlaces ancla.

Enlaces ancla en la versión 7.0

Si tu sitio está en la versión 7.0, hay algunas consideraciones especiales que debes tener en cuenta al configurar enlaces ancla.

Ajax y enlaces ancla

Ajax es un método especial para cargar sitios que hace que las páginas con mucho contenido sean mucho más rápidas. Sin embargo, puede interferir con los enlaces ancla, especialmente en dispositivos móviles.

Si los pasos de solución de problemas anteriores no funcionan y tu plantilla es compatible con Ajax, inhabilítalo temporalmente en Estilos del sitio para ver si eso está causando el problema. Ajax está disponible en estas familias de plantillas:

• Brine
• Farro
• Tremont
• York

Enlaces ancla de página de índice

Las páginas de índice apiladas tienen una forma alternativa de agregar enlaces ancla que no requieren código. Para obtener más información, consulta Añadir enlaces ancla a una página de índice.