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.

En los sitios de la versión 7.0, puedes crear enlaces ancla agregando bloques de código a las áreas de contenido.

En esta guía se trata cómo crear manualmente enlaces ancla en cualquier sitio de la versión 7.0. Algunas plantillas de la versión 7.0 también tienen enlaces ancla de página de índice integrados. Para agregar enlaces ancla en la versión 7.1, visita Crear enlaces ancla.

Mira el video

Este video trata sobre la adición manual de enlaces ancla en la versión 7.1, pero los pasos son los mismos en la versión 7.0.

Paso 1: Agregar un bloque de código

En el editor de páginas, desplázate hasta donde quieres que te dirija el enlace y agrega un bloque de código. Puedes agregarlo a cualquier área de contenido de bloque, pero no a páginas de colección, como blogs o galerías, donde no es posible agregar bloques.

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. Comprueba que el control Mostrar código fuente esté desactivado o que el enlace ancla no funcione.

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 completa 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 tus visitantes usa el navegador móvil Safari y estás vinculando a un lugar en la misma página (por ejemplo, desplazándote hacia abajo hasta un encabezado inferior), puedes usar #unique-id en el enlace que crees en el paso 2 sin el slug o la URL de la página, de esta manera:

#unique-id

Consejo: Para verificar 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 extenso y quieres ofrecer a los visitantes una forma conveniente de volver a tu navegación. Para enlazar a la parte superior de una página:

1. Agrega texto y un enlace ancla a la parte inferior de la página o al pie de 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 Volver arriba como texto y #parte superior 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 la ID al final de la URL se mostrará en la barra de direcciones del navegador a los visitantes.

El texto de aterrizaje al que enlaza 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 serie de etiquetas

 

que añadas antes del texto agrega un salto de línea adicional. Por ejemplo, si querías dos saltos de línea antes del texto de aterrizaje del encabezado 3, el bloque de código debe usar el siguiente código:

 
 
Aquí saltará el enlace

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.

Solució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 copias y pegas 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.

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

Nota: Las modificaciones personalizadas del código están fuera del alcance de nuestro soporte. Esto significa que no podemos ayudar más con la configuración o 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én 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 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.