Cómo añadir enlaces de anclaje en Squarespace 7.1
¿Qué es un enlace de anclaje?
Un enlace de anclaje, o enlace de «ir a», es un enlace que te lleva a otra sección de la página sin necesidad de desplazarte por ella.
Los enlaces del índice que aparece a la izquierda son un buen ejemplo.
¿Cuándo conviene utilizar enlaces de anclaje?
Los enlaces de anclaje resultan más útiles en páginas largas o en artículos con muchos subtítulos que no se ven en la parte visible de la página.
Los enlaces «Volver al inicio» tienen una función similar y funcionan de la misma manera.
Básicamente, consiguen que los usuarios permanezcan en la página ayudándoles a encontrar lo que buscan más rápidamente.
Así pues, esto te resultará útil en cualquier caso en el que quieras acceder a una parte concreta de una página mediante un enlace.
¿Acordeones o enlaces de anclaje?
En algunos casos, como en los dispositivos móviles, un diseño tipo acordeón puede ser una forma más adecuada de organizar el contenido.
Mientras que los enlaces de salto te llevan a secciones concretas, un acordeón te permite ocultar grandes bloques de contenido en pestañas independientes.
Esto podría resultar útil en el móvil, ya que el área de desplazamiento es más reducida.
Si quieres saber más sobre cómo añadir un acordeón a tu página web, echa un vistazo a nuestro plugin de acordeón para Squarespace aquí.
Ventajas de los enlaces de anclaje para el SEO
El uso de enlaces de anclaje ofrece dos ventajas principales en materia de SEO.
Hace que tu página web sea más intuitiva y fácil de navegar. Esto se traduce en usuarios más satisfechos.
La otra ventaja se aprecia en la propia página de resultados del buscador. He aquí un ejemplo.
Paso 1: Crea una etiqueta de anclaje utilizando un bloque de código
Añade un bloque de código en el lugar al que quieras ir y pega el código que aparece a continuación.
<div id="here"></div>
Cambia «aquí» por tu propia etiqueta o «identificador único». Ten en cuenta la finalidad de la etiqueta y asegúrate de que sea relevante. Ten en cuenta también que se distingue entre mayúsculas y minúsculas.
Haz clic en «Aplicar».
Nota: También puedes ajustar el texto dentro de la etiqueta de anclaje.
Paso 2: Añade tu enlace de anclaje
Ahora añade un hipervínculo normal en cualquier lugar de la página.
Empieza con un # y utiliza la etiqueta de anclaje.
En este ejemplo, sería «#aquí»
Paso 3: Haz que el desplazamiento sea fluido
Ve a tu CSS personalizado y pega el código que aparece a continuación para que el enlace se desplace suavemente hacia abajo por la página.
html { scroll-behavior: smooth; }
Ya está. Ya has terminado.
Cuando alguien haga clic aquí, se le redirigirá a la sección que definimos en el paso 1.
Cómo añadir enlaces de anclaje a tu barra de navegación
Puedes utilizar enlaces de anclaje para crear una navegación en una sola página.
Es decir, cada enlace de la barra de navegación te lleva a una sección diferente de la página.
Crea un enlace en tu barra de navegación principal.
Sigue el paso 2.
Cómo enlazar a enlaces de anclaje en otras páginas
También puedes crear enlaces a etiquetas de anclaje de otras páginas utilizando la URL de la página junto con la etiqueta.
He aquí un ejemplo.
/tu-página#aquí
¿Y si no funciona? Echa un vistazo a alguno de estos recursos de ayuda.
Cómo conseguir el complemento de índice
Para las entradas del blog, esta es, con diferencia, la forma más sencilla de hacerlo. Todos los encabezados que selecciones (h1, h2, h3) se convertirán en un bloque de índice que podrás personalizar como quieras.
Te recomiendo que utilices el plugin de la barra lateral junto con el plugin de índice para conseguir una barra lateral fija.
