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 o diseños inteligentes, ya que no es posible agregar bloques a esas secciones.
En el campo de código, agrega:
<p id="unique-id">Aquí es donde te dirigirá el enlace</p>
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:
- En un bloque de texto, escribe el texto que deseas vincular, resáltalo y haz clic en el ícono de enlace de la barra de herramientas Bloque de texto.
- En el campo de dirección web, agrega la URL completa de la página (incluso si es la misma página) y una barra adicional. Debe verse así:
https://examplesite.com/pageslug/
- 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
- Si deseas que el enlace se abra en una nueva pestaña, haz clic en
y habilita Abrir en una ventana nueva.
- Haz clic en Guardar y, a continuación, en Aplicar para guardar el vínculo.
y habilita Abrir en una ventana nueva.
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 <p> y </p> en el paso 1. Si no estás familiarizado con HTML, prueba usar las etiquetas de Encabezado 1: <h1> </h1>
Cuando utilices etiquetas diferentes, agrega el identificador único al código como lo hiciste en el paso 1:
<h1 id="unique-id">Aquí es donde te dirigirá el enlace</h1>
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:
<p id="unique-id"></p>
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.
Enlace al inicio
Para crear un enlace con el inicio de la página, vincula el encabezado usando la Inserción de código. La Inserción de código es una función premium.
- 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.
- Abre el panel de Herramientas de desarrollo.
- Haz clic en Inserción de código.
- En el campo Encabezado, agrega este código: <a id="top"></a>. Si usaste un identificador único que no sea #top cuando creaste el enlace, asegúrate de reemplazarlo en la primera etiqueta <a>.
- 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.
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.
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 <p> 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 <p> </p> que agregues antes del texto añade un salto de línea adicional. Consulta las imágenes a continuación como referencia.
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
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.
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.