Si necesitas crear un enlace ancla en una de las páginas de tu web y no sabes como hacerlo, en este artículo vamos a ver cómo hacerlo paso a paso. Ya verás que es muy fácil. Lo puedes hacer con tan solo dos acciones.
Antes, permíteme que te explique brevemente que es un enlace ancla.
Qué es un enlace ancla
Un enlace ancla, también conocido como enlace de anclaje o anchor link en inglés, es una funcionalidad HTML que permite a los usuarios saltar directamente a una sección específica dentro de la misma página mediante un clic.
Estos enlaces son muy útiles, sobre todo en páginas de contenido extenso, ya que mejoran la experiencia de usuario (UX) al permitir a los lectores acceder rápidamente a la información que les interesa. De esta manera, se evita que tengan que desplazarse manualmente haciendo scroll hasta el contenido que quieren ver
Cómo crear un enlace ancla
Para hacer un enlace ancla, necesitas principalmente dos componentes: un enlace y un ancla, que será a donde apunte el enlace. A continuación te muestro dos formas diferentes de hacerlo.
Crear un enlace ancla con HTML
Una de las formas de hacerlo es mediante la edición, del código HTML de la página web en el que se quiera añadir el enlace.
Paso 1: Identifica el ancla
Para identificar el ancla podemos hacerlo mediante un identificador único (ID). Este ID se asigna a un elemento HTML, normalmente mediante el atributo id. Te pongo un ejemplo para que quede más claro. Imagina que lo que queremos anclar a un subtítulo que tiene una etiqueta H2.
El código de ejemplo del ancla sería así:
<h2 id=»ancla»>Texto de la sección donde irá en ancla</h2>
Paso 2: Crea el enlace que apunte al ancla
El enlace hacia el ancla, es un simple hipervínculo que, al ser pulsado, lleva al usuario directamente a la zona sonde se ha especificado el ancla. Este enlace se indica mediante el atributo href en una etiqueta <a>, utilizando el símbolo # seguido del ID del ancla a la que se quiere dirigir.
Siguiendo el ejemplo anterior, quedaría así
<a href=»#ancla»>Ir a la sección del ancla</a>
Ahora, tu enlace ancla ya debería funcionar correctamente. Ahora, vamos a ver otro método.
Crear un enlace ancla en WordPress
Todo y que el método anterior es efectivo también en WordPress mediante el editor de HTML, también se puede realizar esta acción sin la necesidad de editar el código, Esto facilita mucho la acción, sobre todo para las personas que no tienen conocimiento de HTML. Así que vamos a ver también este método.
Cómo en el caso anterior tenemos que realizar dos acciones: por una parte, especificar el ancla y, por otra, el enlace. Vamos a verlo.
Paso 1: Identifica el ancla
Para identificar en ancla, a donde queremos dirigir el enlace, nos tenemos que situar en el bloque en cuestión. En la parte derecha, en los ajustes de bloque, si despliegas el apartado «Avanzado» verás un apartado para especificar el nombre del ancla que desees.
Paso 2: Crear enlace ancla
Una vez identificada el ancla, tan solo nos queda informar el enlace que tiene que apuntar a la misma. Para hacerlo, selecciona el texto que tiene que formar parte del enlace y selecciona el apartado «link» de la barra de edición que te aparece en la parte superior del bloque.
Una vez nos aparezca el campo añadiremos en nombre del ancla precedido por el símbolo de almohadilla «#». Te lo muestro:
Recomendaciones
Independientemente de los dos métodos explicados, una vez hayas realizado estos dos pasos ya tendrás creado correctamente el enlace ancla. En determinadas ocasiones, se podría dar el caso que el salto de página no se sitúe exactamente en el sitio esperado y quede un poco desajustado.
Si es el caso puedes ajustarlo con mediante los estilos CSS. Con un pequeño retoque será suficiente.
Si no sabes cómo hacerlo, aquí te dejo una guía paso a paso de cómo ajustar un enlace ancla mediante estilos CSS.