Nota: Si bien hemos traducido las guías más populares al español, algunas guías están disponibles solamente en inglés.
Crear enlaces de anclaje

Los enlaces de anclaje, o "saltos de página", llevan a los visitantes a áreas específicas de una página. Puedes agregar este tipo de enlace a cualquier Página Normal utilizando el código HTML personalizado.

Nota: Puedes agregar un enlace de anclaje a ciertas Páginas de Índice sin un código personalizado. Para obtener más información, consulta Agregar enlaces de anclaje en una Página de índice.

Paso 1 - Crea un enlace con un identificador único

Para crear el enlace de anclaje en el que los visitantes van a hacer clic, agrega un Bloque de Texto a la página e introduce el texto del enlace. Resalta el texto y haz clic en el icono de enlace en el editor de Bloques de Texto.

En la ventana de enlace, introduce una etiqueta seguida de texto. El texto que creas es la identificación única. Asegúrate de que Open in New Window (Abrir en una nueva ventana) no esté activada, ya que quieres que los visitantes se queden en la misma página.

El identificador único en este caso es un ejemplo de enlace de anclaje. El texto puede ser lo que desees, pero no puede tener espacios. Separa las palabras con un guión en su lugar.

Nota: los identificadores únicos distinguen entre mayúsculas y minúsculas.
Nota: Internet Explorer maneja los enlaces de anclaje de manera diferente que otros navegadores. Si muchos de los visitantes utilizan Internet Explorer, agrega el slug de la página antes de la etiqueta como si estuvieras establenciendo un enlace a una página diferente.

Paso 2 - Vincula el identificador exclusivo a una sección en la página

En el editor de contenido de la página, desplázate a la sección a la que deseas que el enlace lleve a los visitantes. Haz clic en un Punto de Inserción y selecciona el Bloque de Código.

Reemplaza las palabras "Hello, World!" ("¡Hola, mundo!") con el texto que deseas en la página. Luego agrega

id="anchor-link-example" (id="anclaje-enlace-ejemplo")

dentro de la primera etiqueta, agregando tu identificación única entre las comillas, de la siguiente manera:

<p id="anchor-link-example">Aquí es donde se dirigirá el enlace</p>

Nota: No incluyas la etiqueta (#) del enlace de anclaje. 

Haz clic en Save (Guardar). El enlace que has establecido en el paso 1 ahora llevará a los visitantes al texto que has configurado en el paso 2.

Usar diferentes tipos de enlaces y el texto de inicio

El ejemplo anterior utiliza el cuerpo de texto, tanto para el enlace de anclaje y como para la sección a la que dirige, pero hay muchas otras opciones.

Puedes utilizar cualquier tipo de enlace, incluidos los botones y las imágenes para hacer clic, como enlace de anclaje. Visita Agregar enlaces al sitio para conocer las diferentes opciones de enlaces.

Para todos los tipos de enlaces, crea el identificador único como lo hiciste en el paso 1, utilizando el formato #palabra como el enlace, pero reemplazando "palabra" con un identificador único.

Nota: No se recomienda agregar enlaces de anclaje a la navegación utilizando un Enlace de navegación, ya que los enlaces se mostrarán, pero no funcionarán en las páginas que no incluyen el texto de destino correspondiente. Además, los enlaces de anclaje de navegación no funcionan de forma confiable en los dispositivos móviles.

Si deseas dar formato al texto de destino para algo que no sea cuerpo de texto, cambia las etiquetas <p> y </p> en el paso 2, antes de añadir el identificador único. Si no estás familiarizado con el lenguaje HTML, una sugerencia sería el uso de etiquetas de header 1: <h1> </h1>

Al utilizar diferentes etiquetas, añade el identificador único a la primera etiqueta de la manera que lo hiciste en el paso 2 anterior, utilizando el formato id=“palabra” , pero reemplazando "palabra" con tu identificador único.

Enlaces de anclaje a diferentes páginas

Para crear un enlace de anclaje a una sección en una página diferente, agrega el slug de la URL de la página que estás enlazando antes de la etiqueta y el identificador único en el enlace.

Nota: También puedes añadir el slug de la página de la página actual para hacer que los enlaces de anclaje funcionen en Internet Explorer.

Para encontrar el slug URL de la página, haz clic en el icono del engranaje para la página en el panel de Páginas. En el panel Page Settings (Configuración de la Página) que se abre, busca el campo URL Slug (Slug de la URL) .

Crear el texto de inicio en la página que estás enlazando de la misma manera que en el paso 2, arriba. Este ejemplo utiliza etiquetas <h1> en lugar de <p>.

Colocar enlaces de anclaje en la parte superior

Para crear un enlace a la parte superior de tu sitio, créalo desde el encabezado usando la Inyección de Código.

  1. Añade texto a un enlace de anclaje a la página o al pie de página, como se describe en el Paso 1. Tal vez quieras utilizar "Volver arriba" como texto y #arriba como tu identificador único.
  2. En el Home Menu (Menú Principal), haz clic en Settings (Configuración), haz clic en Advanced (Avanzada) y después en Code Injection (Inyección de Código).
  3. En el campo Header (Encabezado), añade una etiqueta como se describe en el Paso 2. Para asegurarte de que tu encabezado no incluya texto extra, te recomendamos usar etiquetas sin texto entre ellas, como por ejemplo:<p id="top"></p> 
  4. Si usaste un identificador único que no sea #arriba cuando creaste el enlace, asegúrate de reemplazarlo en la primera etiqueta <p>.
  5. Haz clic en Save (Guardar).
Consejo: Puedes seguir el mismo proceso para crear enlaces a la parte superior de páginas individuales.

Limitaciones y mejores prácticas

Los enlaces de anclaje 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, una vez que se utiliza el identificador "panda" en la Página de Inicio, no se puede añadir "panda" como un identificador más adelante en la Página de Inicio. Lo podrías utilizar en la página "Acerca de", pero no una segunda vez en la Página de Inicio.

Los identificadores distinguen mayúsculas y minúsculas

Si el código HTML indica id="Panda", pero el enlace muestra el identificador como #panda, el enlace no funcionará.

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

Cuando un visitante hace clic en un enlace de anclaje, el único identificador 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 de anclaje también pueden ser una manera de añadir humor y personalidad al sitio. Solo 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 quieres que el texto esté en la parte superior de la ventana del navegador, puedes crear el espacio antes agregando etiquetas <p> con espacios de no separación en la copia de texto de destino. En HTML un espacio de no separación es &nbsp; 

Cada conjunto de etiquetas <p> </ p> que agregas antes del texto añade un salto de línea adicional. Ver las imágenes más abajo como referencia.

Los enlaces de anclaje podrían no funcionar en sitios donde Ajax esté habilitado

Ajax es un método especial que permite cargar el sitio de forma más rápida y ágil. Sin embargo, puede interferir con la funcionalidad de los enlaces de anclaje. Si tu plantilla admite Ajax, tal vez tengas que deshabilitar esta opción en el Editor de Estilo para que funcionen los enlaces de anclaje.

Ajax actualmente está disponible en las siguientes plantillas. Las plantillas se agrupan por familia.

  • Brine, Aria, Basil, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Polaris, Rally, Rover, Sofia, Sonny, Sonora, Thorne, Wav, West
  • Farro, Haute
  • Tremont, Camino, Carson, Henson
  • York, Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori

Resolución de problemas

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

  • Asegúrate de que el identificador único es 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 enlace y el texto HTML de inicio están configurados correctamente. Si el identificador único es "bambú", el enlace es #bambu y agregaremos id=“bambu” al texto HTML de inicio.
  • El enlace de anclaje no funcionará si la plantilla ya está utilizando ese identificador. Intenta utilizar un identificador diferente o cambiar el uso de mayúsculas.
  • Los enlaces de anclaje funcionan de manera diferente en Internet Explorer. Para garantizar que los enlaces de anclaje funcionan para todos los navegadores, agrega el slug de la página antes de la etiqueta en el enlace como si estuvieras vinculandola a una página diferente .
  • Las Páginas de Índice de Squarespace a menudo tienen su propia funcionalidad integrada de enlace de anclaje, que puede entrar en conflicto con los enlaces de anclaje que estás agregando. Para obtener más información, consulta Agregar enlaces de anclaje a Páginas de Índice. Si los enlaces de anclaje no están funcionando correctamente en la Página de Índice, intenta utilizar un identificador diferente o cambiar el uso de mayúsculas.
  • Si tu plantilla admite Ajax, deshabilítalo momentáneamente para ver si ese era el motivo del problema.
Note: While Squarespace's Customer Care team can help with the steps in this guide, they can't provide directions for additional code modifications. If you need more help, we recommend exploring the Squarespace Answers community, or our list of resources to help with custom code.
¿Fue útil este artículo?
Usuarios a los que les pareció útil: 68 de 116