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 ancla ("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.

Paso 1 – Crear un enlace

Agrega el vínculo en el que harán clic los que visitan el sitio. Puedes usar cualquier tipo de vínculo, pero este ejemplo muestra un vínculo 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.

Paso 3: Agrega la URL y el slug de la página

Para ciertos enlaces ancla, este paso es optativo, pero lo recomendamos para la mayoría de los enlaces.

En el campo de dirección web, agrega:

  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/

Haz clic en el icono del engranaje para verificar que Abrir en una ventana nueva esté desactivado si quieres que los que visitan la página permanezcan en ella.

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

Paso 2: Crea una identificación única

Después del slug de tu página, ingresa un símbolo de numeral o hashtag (#) seguido por texto. El texto que crees será tu identificación única.

  • El texto de tu identificación única 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.

Después de agregar el ID único, la URL debería verse así:

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

Haz clic en Aplicar para guardar el enlace.

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

En el editor de páginas, desplázate hasta la sección a la que deseas que el enlace lleve a los visitantes y agrega un bloque de código.

Reemplaza las palabras ¡Hola, mundo! con el texto que desees en la página. A continuación, agrega

id="unique-id"

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

<p id="unique-id">This is where the link will jump to</p>
Consejo: No incluyas el slug de página o la etiqueta de tu enlace de anclaje.

code-block-example.jpg

Haz clic en Aplicar.

Paso 5 - Guarda

Posiciona el cursor sobre Listo y, luego, haz clic en Guardar. El vínculo que has establecido en el Paso 1 ahora llevará a los que visiten el sitio al texto que has configurado en el Paso 4.

Usar diferentes tipos de enlaces

El ejemplo anterior usa el cuerpo del texto como enlace ancla en el paso 1, pero puedes utilizar cualquier tipo de enlace, incluidos los 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 crea el ID único como se muestra en los pasos 2 y 3 anteriores utilizando este formato:

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

Formato del texto de destino

Para dar formato al texto de la página de aterrizaje como otro elemento diferente del cuerpo del 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

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

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 los slugs de URL.

Si sabes que ninguno de los que visitan el sitio usa el browser de Safari o Internet Explorer para dispositivos móviles, 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 #unique-id sin la URL o el slug de página.

Consejo: Para ver qué navegadores usan tus visitantes, 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 Inyección de Código. La Inyección de Código es una función premium.

  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 los pasos 1 a 3 , pero no incluyas la URL de tu sitio o una barra diagonal (/) antes del identificador único. Puede que desees usar Volver a arriba como texto y #arriba como ID único.
  2. En el menú de Inicio, haz clic en Configuración, en Avanzada y después en Inserción de código.
  3. 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>.
  4. Haz clic en Guardar.

Este método permite enlazar a la parte superior de cada página en todo tu sitio. Puedes utilizar el mismo proceso para enlazar 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 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, 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 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 añadir etiquetas <p> con espacios duros en el texto de destino para crear un espacio. En HTML, un espacio duro se crea con &nbsp. 

Cada conjunto de etiquetas <p>&nbsp;</ p> que añadas antes del texto crea un salto de línea adicional. Mira las imágenes a continuación como referencia.

Resolución de problemas

Si un enlace ancla no funciona, verifica lo siguiente:

  • Asegúrate de haber agregado un slug de página como se describe en el Paso 2, 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.
  • 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á.
  • 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”
  • Agregaste www. al principio de tu URL si tu dominio principal lo incluye.

En estos casos, el enlace ancla no funcionará, incluso si todo se ha configurado correctamente:

  • 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.
  • Si la página ya usa ese ID, intenta usar otro 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á orientarte para hacer otras modificaciones al código. Si necesitas más ayuda, te recomendamos explorar la comunidad Foro de Squarespace o nuestra lista de recursos para ayudarte con el código personalizado.

Ajax y enlaces ancla (versión 7.0)

En la versión 7.0, Ajax es un método especial para la carga del sitio que hace que las páginas pesadas en contenido sean mucho más rápidas y ágiles. Sin embargo, puede interferir con la funcionalidad de 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 en páginas de índice (versión 7.0)

En la versión 7.0, 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, visita Cómo agregar enlaces ancla en páginas de índice.

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 135 de 302