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

Un enlace de anclaje ("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 de anclaje que te dirigen a cada encabezado.

Existen dos tipos de enlaces de anclaje que puedes usar en tu sitio:

  • Regular anchor links - A link that takes you to a specific place on any Regular Page or blocks-editable area. This requires a Code Block.
  • Enlaces de anclaje de la Página de Índice - Las Páginas de Índice Apiladas tienen una manera alternativa de agregar enlaces de anclaje que no requiere código.

Esta guía explica cómo agregar un enlace de anclaje normal.

Paso 1 – Crear un enlace

Agrega el enlace en el que harán clic los visitantes. Puedes usar cualquier tipo de enlace, pero este ejemplo muestra un Bloque de Texto. En el Bloque de Texto, resalta el texto y haz clic en el ícono del enlace en la barra de herramientas del Bloque de Texto.

Paso 2 - Crear una identificación única

En la pestaña External (Externa) de 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é marcada, ya que quieres que los visitantes se queden en la misma página.

  • La identificación única en el ejemplo siguiente es un anchor-link-example (ejemplo de enlace de anclaje).
  • El texto puede ser el que quieras, pero no puede tener espacios. Separa las palabras con un guión en su lugar.
  • Las identificaciones únicas 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.

Paso 3 - Agrega el slug de página

Antes de la etiqueta, agrega el slug para la página que vincularás (incluso si está en la misma página) y una barra diagonal inversa adicional (/), de la siguiente forma:

/slugdepagina/#id-unica

Este paso es opcional, pero lo recomendamos para la mayoría de los enlaces. Visita Encontrar el slug de tu página para recibir más ayuda.

Consejo: Si actualizas el slug de página en el futuro, actualiza también el slug en el enlace de anclaje.

pageslug.png

Paso 4 - Vincula la identificación única con una sección de tu 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>
Consejo: No incluyas el slug de página o la etiqueta de tu enlace de anclaje.

Paso 5 - Guarda

Haz clic en Guardar. El enlace que has establecido en el Paso 1 ahora llevará a los visitantes al texto que has configurado en el Paso 4.

Usar diferentes tipos de enlaces

El ejemplo anterior usa el cuerpo del texto como enlace de anclaje en el Paso 1, pero 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 enlace, crea la identificación única como se muestra en el Paso 2 y en el Paso 3 más arriba, usando el formato

/slugdepagina/#id-unica

Aquí tienes un ejemplo de enlace de anclaje en un Bloque de Botón:

button.png

Formato del texto de destino

Para dar formato al texto de destino para algo que no sea cuerpo de texto, cambia las etiquetas <p> y </p> en el Paso 3. Si no estás familiarizado con el lenguaje HTML, prueba usar las etiquetas de encabezado: <h1> </h1>

Cuando uses diferentes etiquetas, agrega la identificación única como lo hiciste en el Paso 4:

Enlace al inicio

Para crear un enlace con el inicio de la página, vincula el encabezado usando la Inyección de Código. La Inyección de Código es una función premium.

  1. Agrega un texto y un enlace de anclaje a la página o al pie de página, como se describe del Paso 1 al Paso 3. 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), agrega este código: <a id="top"></a> 
  4. Si usaste un identificador único que no sea #top cuando creaste el enlace, asegúrate de reemplazarlo en la primera etiqueta <a>.
  5. Haz clic en Guardar.
Consejo: Puedes seguir el mismo proceso para crear enlaces a la parte superior de páginas individuales.

Slugs de página y enlaces de anclaje

Te recomendamos que agregues el slug de página antes de la identificación única en la mayoría de los casos. Si un enlace de anclaje no tiene el slug de página, no funcionará:

  • En Internet Explorer
  • Si tu enlace es un enlace de navegación.
  • Si estás vinculando con otra página.

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 URL) . También puedes verlo en la vista previa completa o cuando visualices tu sitio en el modo de incógnito.

anchor2-about1.png

pageslug2.png

Si sabes que ninguno de tus visitantes usa Internet Explorer, y estás creando un enlace a un lugar de la misma página (por ejemplo, desplazándote a un encabezado que está más abajo), puedes usar el formato #id-unica sin el slug de página.

Consejo: Para ver qué navegadores usan tus visitantes, mira el panel Analytics de la Visión General del Tráfico

Ajax y enlaces de anclaje

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 un enlace de anclaje, especialmente en dispositivos móviles.

Si tu plantilla es compatible con Ajax, deshabilítalo temporalmente en el Editor de Estilo para ver si ese es el motivo del problema.

Ajax está disponible en las siguientes plantillas. Las plantillas están agrupadas por familia.

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

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 otra página, pero no una segunda vez en tu 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. 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 un espacio agregando las etiquetas <p> con espacios en blanco en el texto de destino. En HTML un espacio se crea con &nbsp; 

Cada conjunto de etiquetas <p>&nbsp;</ p> que agregas antes del texto, crea un salto de línea adicional. Ve las imágenes más abajo como referencia.

Resolución de problemas

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

  • Asegúrate de haber agregado un slug de página como se describe en el Paso 3, incluyendo los dos símbolos /. Esto es de suma importancia para los enlaces de navegación, enlaces de otras páginas y en Internet Explorer.
  • Si tienes problemas en dispositivos móviles, podrías tener que deshabilitar Ajax.
  • 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 texto HTML de inicio esté configurado correctamente. Por ejemplo, si tu identificación única es #bamboo, el enlace que agregarás al texto HTML de inicio es id=“bamboo”
  • 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.
  • 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.
Nota: Si bien el equipo de Atención al Cliente de Squarespace puede ayudarte con los pasos de esta guía, no podrán orientarte para hacer otras modificaciones al código. Si necesitas más ayuda, te recomendamos explorar la comunidad de Answers de Squarespace, o nuestra lista de recursos para ayudarte con el código personalizado.
¿Fue útil este artículo?
Usuarios a los que les pareció útil: 78 de 146