Ankerlinks in Squarespace einbauen – Schritt für Schritt erklärt
Hey Sqauraspacer! In diesem Artikel zeige ich dir, wie du in Squarespace coole Ankerlinks (aka Sprungmarken) einbaust, damit deine Besucher mit einem Klick genau dort landen, wo sie hin sollen. Perfekt für Salespages, One-Pager oder einfach, um deine Website smoother zu gestalten. Also, let's go!
Warum Ankerlinks?
Vieleicht hast du einen Onepager oder eine Salespage und du willst, dass Leute mit einem Klick direkt zu einer bestimmten Stelle springen, ohne wild rumzuscrollen. Genau dafür sind Ankerlinks da!
Un so ghet’s:
Du setzt ein Ziel (den Ankerpunkt).
Deine Buttons oder Links referenzieren diesen Punkt.
BOOM! Ein Klick und deine Besucher landen genau dort, wo sie sein sollen.
Dei Schritt-für-Schritt-Anleitung
1. Codeblock einfügen
Squarespace erlaubt keine direkten Ankerpunkte in der nativen UI, aber keine Sorge! Mit einem kleinen Code-Snippet fixen wir das easy.
Gehe auf den Abschnitt deiner Seite, wo du den Ankerlink setzen willst.
Füge einen Codeblock an die Stelle ein, wo dein Ankerpunkt sein soll.
Kopiere und füge folgenden Code ein:
<div id="anmeldung"></div>Hier haben wir eine einfache div mit einer ID namens "anmeldung". Diese ID ist unser Sprungziel.
2. Button-Link setzen
Nun musst du deinen Button mit dem Ankerpunkt verknüpfen:
Gehe zu deinem Button und bearbeite den Link.
Füge einfach
#anmeldungals Link ein.
That’s it! Wenn jemand auf den Button klickt, springt er direkt zu deinem Ankerpunkt.
3. Mehrere Buttons auf dasselbe Ziel? Achtung! ⚠️
Falls du mehrere Buttons auf dieselbe Sektion springen lassen willst, brauchst du individuelle IDs. Sonst funktioniert der Sprung nur einmal – not cool. 😅
Hier ist der Trick:
Kopiere den Codeblock mehrmals und vergib eindeutige IDs
<div id="anmeldung1"></div>
<div id="anmeldung2"></div>
<div id="anmeldung3"></div>Weise den Buttons nun unterschiedliche Links zu:
#anmeldung1#anmeldung2#anmeldung3
So kann jeder Button seinen eigenen Sprungpunkt haben – smooth!
4. Check die mobile Ansicht – wichtig!
Manchmal erscheinen Codeblöcke in der mobilen Version an komischen Stellen. Falls das passiert, schau dir das mobile Layout an und passe die Position dementsprechend an.
Fazit
Mit diesen simplen Tricks hast du jetzt Ankerlinks in Squarespace eingebaut – easy peasy! Deine Besucher springen nun blitzschnell zu den wichtigsten Stellen auf deiner Website.
Probier’s aus und sag mir, wie’s bei dir klappt!
Schau dir alles im Tutorial an:
Du willst mehr hilfreiche Tipps, rundum deine Business Website und Hacks zu Squarespace?
Trage dich jetzt in meine Newsletter und werde Teil meiner grandiosen Community! In regelmäßigen Abständen erhältst du von mir super nützliche Infos – taufrisch in deinen Posteingang geflattert!
