Cómo añadir enlaces ancla en las Collections de Webflow

Aunque nos encanta Webflow, hay algo molesto: si tienes tu blog como una collection, no puedes añadir enlaces de sección ni enlaces ancla en tus artículos. Es decir, no puedes hacer clic en un enlace de una tabla de contenidos al principio y que la página salte directamente a la sección correspondiente.

He visto algunas soluciones alternativas. Una de ellas es usar la función embed para añadir código en el cuerpo del artículo, pero es bastante manual y pesado. Por eso tenemos un pequeño truco: un poco de JavaScript que añades una sola vez en el archivo de plantilla de los artículos del blog y que te permite añadir enlaces ancla en todos los artículos de esa collection.

Note: this code will add anchor links into all of your H2 headings on all of your collection pages. It's not a big issue really, it just means all of your H2 headings become links but if you prefer not to do this then you may want to find an alternative method.

Paso 1: añade el código a la página de tu collection

Tu collection siempre tendrá una página de plantilla. Es la plantilla que se usa para todos los elementos de la collection, así que cualquier cambio en ella afecta a todos. Lo que vamos a hacer es añadir un poco de JavaScript en el header de esta página para que se aplique a todos los artículos del blog. Solo afectará a las páginas que usen esta plantilla y no cambiará el resto de tu sitio web.

Cuando hayas encontrado esta página, ve a los ajustes y desplázate hacia abajo hasta donde dice <head>.

Paso 2: añade tu código JavaScript

A continuación, copia y pega el código de abajo en el cuadro. En un momento te explicamos qué hace.

Cómo funciona

Este código recorre la página web en busca de todo lo marcado como encabezado H2, porque suelen ser los encabezados a los que conviene enlazar con enlaces ancla. Por supuesto, puedes modificar el script para que funcione con otros encabezados cambiando h2 por h3, etc., o por otra cosa.

Una vez que tiene todos esos encabezados, recorre la lista y añade un ID que empieza por

La siguiente parte del código crea un elemento de enlace ancla y lo añade antes del encabezado, lo que permite enlazar a ese elemento. Usa como referencia del enlace el headingID creado antes. Así, el enlace ancla de la sección 1 sería #section-1, y así sucesivamente.

Si no estás familiarizado con JavaScript, no hace falta que lo entiendas del todo, ¡no te preocupes! Siempre puedes pegarlo en ChatGPT y pedirle que te lo explique.

Paso 3: publica en el dominio de prueba y revisa los estilos de los H2

El siguiente paso es publicar estos cambios en tu dominio de staging o de prueba, que suele ser el que lleva 'webflow' en la URL. Te recomendamos excluir este dominio del índice de Google para que no compita con tu dominio principal.

Una vez publicado, revisa el aspecto de tus encabezados: ahora que les has añadido un enlace, es posible que parezcan enlaces. En ese caso, puede que quieras añadir un estilo personalizado a la página de plantilla del artículo para tus enlaces H2, específico de esa página. Así se vería desde el punto de vista del código, como ejemplo básico:

Tendrías que copiar este código de nuevo en la parte <head> de tu página de plantilla, pero poniendo alrededor las etiquetas <style> </style> para que funcione. Después puedes ajustar el estilo para que coincida con tus encabezados normales.

Paso 4: añade los anclas al principio de la página

Una vez hecho esto, puedes añadir los enlaces ancla al principio de la página. Solo tienes que añadir un enlace al texto de la página y usar el enlace #section-1 para la sección uno, #section-2 para la sección dos, y así sucesivamente.

Lo mejor de este script es que no hay límite en el número de enlaces que crea: mientras el encabezado sea un H2, se creará un enlace que podrás usar como ancla.

Nos ha resultado muy útil en nuestro propio sitio web, así que esperamos que también ayude a otros. No dudes en ponerte en contacto con nosotros si algo no te queda claro. Pero lo normal es que, si copias el código tal como se indica y quizá ajustas los estilos de tus H2, solo te quede añadir los anclas y usar los enlaces de referencia correctos. ¡Feliz enlazado!