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:

  • Enlaces ancla normales: Enlace que te conduce a un lugar específico en cualquier Página de Diseño o área editable por bloques. Se requiere un Bloque de código.
  • 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 vínculo en el que harán clic los visitantes. Puedes usar cualquier tipo de vínculo, pero este ejemplo muestra un vínculo de texto. En el Bloque de Texto, resalta el texto y haz clic en el ícono del Vínculo en la barra de herramientas del Bloque de Texto.

add-a-text-link.jpg

Paso 2 - Crear una identificación única

En la pestaña Externa de la ventana de enlace, introduce un hashtag (#) seguido de texto. El texto que creas es tu identificación única. Asegúrate de que Abrir en una nueva ventana no esté marcada, ya que quieres que quienes visitan el sitio 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.

example-of-anchor-link.jpg

Paso 3: Añade la URL y el slug de la página

Antes del hashtag, agrega lo siguiente:

  1. La URL de tu sitio
  2. El slug de tu página a las que quieres vincular (incluso si están en la misma página)
  3. Una barra adicional (/)

Debería verse así:

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

Este paso es optativo, pero lo recomendamos para la mayoría de los enlaces.

Consejo: Si cambias tu dominio principalactualizas el slug de la página en el futuro, también debes actualizar el enlace ancla.

example-with-url-and-slug.png

Paso 4 - Vincula la identificación única con una sección de tu página

En el editor de Contenidos de la página, desplázate hasta la sección a la que quieres que el enlace dirija a los que visitan tu sitio. Haz clic en Punto de inserción y añade un 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.

code-block-example.jpg

Paso 5 - Guarda

Haz clic en Agregar Vínculoy, luego, en Guardar. El vínculo 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-example.jpg

Formato del texto de destino

Para dar formato al texto de la página de aterrizaje como otro elemento diferente del cuerpo de texto, cambia las etiquetas <p> y </p> en el Paso 4. Si no sabes cómo usar HTML, intenta usar las etiquetas de Encabezado 1: <h1> </h1>

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

format-text-as-h1s.jpg

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 la URL y el slug de página antes de la identificación única 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:

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

Además, los enlaces ancla sin la URL del sitio pueden presentar problemas en el navegador móvil de Safari.

Para encontrar la URL y el slug de la página, abre la página en un navegador privado.

pageslug2.png

Si sabes que ninguno de tus visitantes usa Internet Explorer o el navegador móvil de Safari, 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 la URL o el slug de página.

Consejo: Para ver qué navegadores usan tus visitantes, mira el panel Analytics 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 Estilos del sitio para ver si ese es el motivo del problema.

Ajax se admite en estas familias de plantillas:

  • Brine
  • Farro
  • Tremont
  • 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: 99 de 199