Zo voeg je ankerlinks toe aan Webflow Collections

Hoewel we dol zijn op Webflow, is het vervelend dat je geen sectielinks of anchorlinks aan je blogposts kunt toevoegen als je blog als collection in Webflow staat. Het gaat dan om een link bovenaan, bijvoorbeeld in een inhoudsopgave, waarmee je direct naar het juiste onderdeel van de pagina springt.

Ik heb een paar omwegen gezien, waaronder de embed-functie om code in de body van de post te zetten, maar dat is erg handmatig en vervelend om te doen. Daarom hebben we hier een kleine hack voor je: een stukje JavaScript dat je één keer in het template van je blogposts zet. Daarna kun je anchorlinks toevoegen aan élke post in die 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.

Stap 1: Voeg de code toe aan je collectionpagina

Je collection heeft altijd een templatepagina. Dit template wordt gebruikt voor alle items in de collection. Elke wijziging aan deze pagina geldt dus voor al je collection-items. Wij voegen een stukje JavaScript toe aan de header van deze pagina, zodat het voor alle blogposts werkt. Het geldt alleen voor pagina's die dit template gebruiken en verandert niets aan de rest van je website.

Als je deze pagina hebt gevonden, ga je naar de instellingen en scroll je naar beneden tot je <head> ziet staan.

Stap 2: Voeg je JavaScript-code toe

Kopieer vervolgens de onderstaande code en plak die in het vak. Zo meteen leggen we uit wat de code doet.

Zo werkt het

Deze code zoekt op de webpagina naar alles wat als H2-kop is gemarkeerd. Dat zijn meestal de koppen waar je met anchorlinks naartoe wilt linken. Je kunt het script uiteraard aanpassen voor andere koppen door h2 te veranderen in h3 enzovoort, of in iets heel anders.

Zodra de code al deze koppen heeft, loopt hij door de lijst met koppen en voegt een ID toe dat begint met

Het volgende deel van de code maakt een anchorlink-element en plaatst dat vóór het kopelement, zodat je naar dat element kunt linken. Daarvoor gebruikt de code het hierboven gemaakte headingID als referentie voor de link. De anchorlink van sectie 1 wordt dus #section-1, enzovoort.

Als je niet bekend bent met JavaScript hoef je dit niet volledig te begrijpen, dus maak je er niet druk om! Je kunt de code altijd in ChatGPT plakken en het laten uitleggen.

Stap 3: Publiceer naar het testdomein & controleer de H2-stijlen

De volgende stap is dat je deze wijzigingen publiceert naar je staging- of testdomein, meestal het domein met 'webflow' in de URL. We raden aan dit domein uit de index van Google te laten verwijderen, zodat het niet concurreert met je hoofddomein.

Controleer na het publiceren hoe je koppen eruitzien. Ze kunnen nu op links lijken, omdat je er een link aan hebt toegevoegd. In dat geval kun je op de templatepagina van de blogpost een aangepaste stijl toevoegen voor je H2-links, alleen voor die pagina. Zo ziet dat er als basisvoorbeeld uit in code:

Je kopieert deze code opnieuw naar het <head>-gedeelte van je templatepagina, maar je moet er de <style> </style>-tags omheen zetten om het te laten werken. Daarna kun je de stijl aanpassen zodat die past bij je gewone koppen.

Stap 4: Voeg anchors toe bovenaan de pagina

Als dat klaar is, kun je je anchorlinks bovenaan je pagina toevoegen. Je hoeft alleen een link aan de tekst op de pagina toe te voegen en de link #section-1 te gebruiken voor sectie één, #section-2 voor sectie twee, enzovoort.

Het mooie van dit script is dat er geen limiet is aan het aantal links dat het maakt. Zolang de kop als H2 is ingesteld, wordt er een link voor aangemaakt die je als anchor kunt gebruiken.

Wij vonden dit erg handig voor onze eigen website, dus hopelijk helpt het ook iemand anders! Neem gerust contact met ons op als iets onduidelijk is. Als je de code gewoon kopieert zoals beschreven en eventueel je H2-stijlen aanpast, hoef je alleen nog de anchors toe te voegen en de juiste verwijzingslinks te gebruiken. Veel linkplezier!