Zo maak je een achor link op je Squarespace website
Een anchor link is een speciale URL die je naar een specifieke plaats op een pagina brengt. Het wordt ook wel ‘page jump’ of ‘paginasprong’ genoemd. In deze blog leg ik je uit hoe je dat doet. Squarespace legt het zelf ook goed uit in dit artikel.
Wanneer gebruik je een anchor link
Ik geef een voorbeeld. Stel, je schrijft een hele lange blog, opgedeeld uit meerdere paragrafen. Je kunt dan naar elke paragraaf linken vanuit een opsomming aan het begin van de blog, zodat bezoekers die alleen een specifiek gedeelte willen lezen, daar gelijk naartoe kunnen ‘springen’.
Zo maak je een achor link
Stap 1 - Voeg een codeblok toe
Ga naar de betreffende pagina of blog en scroll naar het gedeelte waar je naartoe wilt linken, waar de link heen moet springen. Op een pagina klik je op 'add block' en in een blog hover je over de tekst en klik je op het plusje. Er verschijnt bij beide opties een venster, kies ‘</> code’.
Zet het blok op de juiste plek, hiervoor heb je 2 opties. Optie 1: zet tekst, bijvoorbeeld een paragraaf of titel waar je naartoe wilt linken, in het codeblok. Optie 2: je kunt de code verborgen neerzetten, achter of boven het begin van de tekst waarnaar je wilt linken. Bij een blog is dit een minder goede optie, want dan kun je bijvoorbeeld al geen codeblock achter de tekst verbergen, die optie is er niet.
Optie 1: linken naar een codeblok met tekst
Begin door op het witte balkje op het pennetje te klikken. Hier moet je dan een stukje code invoegen:
<p id="unique-id">Daar springt de link naartoe</p>
Vervang “unique-id” door een unieke ID. Dit kan van alles zijn, maar mag geen spaties bevatten. Als je meerdere woorden gebruikt, scheid ze dan met een streepje. Unieke ID's zijn hoofdlettergevoelig en kunnen maar één keer per pagina worden gebruikt.
Het stuk ‘Daar springt de link naartoe’ kun je vervangen door het woord, de zin, de paragraaf of de titel waar de link naartoe moet springen. Als je niet specifiek aangeeft wat voor lettertype je wilt gebruiken, dan kiest Squarespace automatisch voor Paragraph 2, wat als het standaard lettertype wordt gezien.
Je kunt ook grotere of kleinere tekst gebruiken (<p1> = Paragraph 1 of <p3> = Paragraph 3. Of een heading, je kunt in Squarespace 7.1 kiezen voor 4 verschillende headings: Heading 1 t/m 4, dus <h1>, <h2>, <h3> of <h4>. In code plaats je de tekst die je wilt laten zien met een andere grootte of als heading tussen een opening tag, dat ziet er zo uit (bij Heading 1 als voorbeeld): <h1> en de closing tag, dat ziet er zo uit: </h1>.
De code voor een stuk tekst met heading 1 waar de link naartoe moet springen wordt dan:
<p id="unique-id"><h1>Daar springt de link naartoe</h1></p>
Vergeet niet op ‘save’ te klikken linksboven.
Optie 2: linken naar een codeblok zonder tekst
Soms vind ik het makkelijker om geen tekst te plaatsen en gewoon een stukje code waar de link naartoe moet springen achter of boven de betreffende tekst (of een afbeelding) te plaatsen. Als je dat wilt doen, kun je deze code gebruiken:
<p id="unique-id"></p>
Nadeel: het is minder duidelijk zichtbaar en je moet de layout op mobiel ook opnieuw vormgeven. Op de blog kun je geen geen code achter tekst verbergen.
Vergeet niet op ‘save’ te klikken linksboven.
Stap 2 - Maak de link
Nu voeg je de link toe waar de bezoekers op klikken om naar de content te gaan die je in stap 1 hebt aangewezen. Typ in een tekstblok de tekst die je wilt linken, of misschien staat deze er al. Deze markeer je en dan klik je op het pictogram ‘link’ in de werkbalk van het tekstblok.
De link ziet er zo uit: eerst de volledige URL voor de pagina, bijvoorbeeld: https://voorbeeldsite.com/pageslug/. Voer na de paginaslug een hashtag (#) in, gevolgd door de unieke ID uit stap 1. Het moet er zo uitzien:
https://voorbeeldsite.com/pageslug/#unique-id
Als je wilt dat de link in een nieuw tabblad wordt geopend, klik je op het tandwieltje en schakel je ‘open in new window’ in.
Klik op ‘Save’ en vervolgens ‘Apply’ om de link op te slaan. Klik op ‘Save’ linksboven.
Stap 3: testen maar!
Check altijd of het werkt. De site moet wel zijn gepubliceerd trouwens. Is je site nog niet klaar voor het grote publiek, stel dan een wachtwoord in voor de site en ga het dan testen. Log ook wel uit, of probeer het in een incognitobrowser. (ook daar moet je uitgelogd zijn). Klikken op een anchor link terwijl je bent ingelogd kan in sommige gevallen werken, maar het is geen betrouwbare test om echt te weten wat je bezoekers zullen ervaren. Het werkt ook niet als je het ingebouwde domein van je site gebruikt, terwijl je de anchor links met je eigen URL hebt gemaakt.
Als je de bezoekerservering toch wilt optimaliseren, wat je natuurlijk doet met zo’n achor link, is deze blog ook interessant: 23 tips om je eigen professionele webteksten te schrijven. En kijk dan gelijk even of je website wel snel genoeg is (en verbeter het indien nodig).