Was ist ein Anker-Link?
Ein Anker-Link (auch „Sprungmarke“ genannt) ist ein spezieller Link, der nicht nur wie üblich zu einer Seite führt, sondern nach dem Laden automatisch zu einem bestimmten Abschnitt auf dieser Seite scrollt.
Wofür Anker-Links verwenden?
Anker-Links helfen, Nutzer direkt zum richtigen Inhalt zu bringen – ohne Umwege.
Du willst z.B. in einem Social-Media-Post direkt auf eure Benefits verlinken?
Dann öffne im Builder die entsprechende Komponente und klicken auf „Direkten Link zu dieser Komponente kopieren“.
Die vollständige URL inklusive Anker wird automatisch in die Zwischenablage kopiert und kann z. B. in eine E-Mail, auf Social Media oder auf eurer Website eingefügt werden.
Wie sieht ein Anker-Link aus?
Ein normaler Link zu deiner Karriereseite könnte so aussehen:
Ein Anker-Link sieht dagegen so aus:
Dieser Link führt auf die Karriereseite und scrollt beim Aufruf automatisch direkt zur Komponente mit der ID 20, in diesem Fall: „Benefits“.
Auch wenn eine Komponente nicht benannt oder später wieder unbenannt wurde, funktioniert der Anker-Link, denn jede Komponente im Builder erhält automatisch eine eigene ID.
Die erzeugte URL berücksichtigt automatisch Ihre benutzerspezifische Domain, sofern diese eingerichtet wurde.
Damit der Link wie gewünscht funktioniert, muss die Seite mit der verlinkten Komponente veröffentlicht (publiziert) sein. Andernfalls kann das System die Komponente nicht finden und scrollt nicht.
Anker-Links in der Navigation verwenden
Anker-Links direkt in der mehrstufigen Navigation zu nutzen und mit normalen Seitenlinks zu kombinieren.
Das bedeutet:
Sprungmarken auf derselben Seite
Unterseiten für ausführliche Inhalte
Alles kombinierbar im selben Menü
Ein Beispiel
Stelle dir vor, du hast folgende Inhalte im Builder vorbereitet:
Eine Startseite mit Benefits und Teamvorstellung
Eine eigene Multipage „Über uns“
Eine eigene Multipage „Kontakt“
In der Navigation könnte das nun so aussehen:
Über uns → Link auf die Multipage „Über uns“
Unsere Benefits → Anker-Link auf der Startseite:
…#anchor:20=BenefitsTeam → Anker-Link auf der Startseite:
…#anchor:22=TeamKontakt → Link auf eine Multipage „Kontakt“
Anker-Link in die Navigation einfügen
Komponente auswählen (z. B. Benefits)
Im Builder auf „Direkten Link zu dieser Komponente kopieren“ klicken
In den Navigationseinstellungen der mehrstufigen Navigation auf das Plus-Symbol klicken, um einen neuen Menüpunkt hinzuzufügen
Den kopierten vollständigen Link (z. B.
https://karriere.firma.de/#anchor:20=Benefits) einfügenEinen passenden Titel vergeben (z. B. „Unsere Benefits“)
Darauf achten, dass „Link im neuen Fenster öffnen“ deaktiviert ist, damit der Anker-Link korrekt funktioniert und innerhalb derselben Seite bleibt
Was passiert beim Klick auf einen Anker-Link?
Wenn Nutzer auf einen Anker-Link in der Navigation klicken:
bleibt die Seite geöffnet (kein Neuladen)
der Browser scrollt automatisch zur gewünschten Komponente
das funktioniert sowohl auf dem Desktop als auch mobil