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.

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 que visitan el sitio. 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 enlace en la barra de herramientas del bloque de texto.

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

En la casilla Enlace, 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/

Para ciertos enlaces ancla, este paso es optativo, pero lo recomendamos para la mayoría de los enlaces. 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 hashtag (#) seguido por texto. El texto que creas es 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 la identificación única, debe verse así:

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

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 a la sección a la que quieres que el enlace dirija a los visitantes y agrega un bloque de código.

Reemplaza las palabras "Hello, World!" ("¡Hola, mundo!") con el texto que deseas en la página. Luego 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

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 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, crea la identificación única como se muestra en el Paso 2 y en el Paso 3 más arriba, usando el 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 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 menú de Inicio, haz clic en Configuración, en Avanzada y después en Inserció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 browser móvil de Safari. Para encontrar la URL de la página, consulta Cómo identificar el slug de la URL de una página.

Si sabes que ninguno de los visitantes usa el browser móvil de Safari o 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 #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

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 soporte técnico 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 Squarespace Answers o nuestra lista de recursos para ayudarte con el código personalizado.
¿Fue útil este artículo?
Usuarios a los que les pareció útil: 103 de 212