Anker-Links erstellen

Leite Besucher zu einem bestimmten Teil einer Seite weiter.

Zuletzt aktualisiert: 8. August 2024

Ein Anker-Link (auch „Seiten-Sprung“ genannt) ist eine spezielle URL, die dich zu einer bestimmten Stelle auf einer Website weiterleitet. Das hier angezeigte Inhaltsverzeichnis ist bspw. mit Anker-Links versehen, die dich zur jeweiligen Überschrift eines Abschnitts führen.

In dieser Anleitung erläutern wir, wie du Anker-Links zu beliebigen Block-Abschnitten auf deiner Website mit einem Code-Block hinzufügen kannst.

Video ansehen

Schritt 1 – Einen Code-Block hinzufügen

Scrolle im Seiten-Editor zu dem Abschnitt, auf den du verlinken möchtest, und füge einen Code-Block hinzu. Du kannst es zu jedem Block-Abschnitt hinzufügen, aber nicht zu anderen Abschnittstypen wie Galerie-Abschnitten, Sammlungs-Seiten-Abschnitten oder Auto-Layouts, da es nicht möglich ist, Blöcke zu diesen Abschnitten hinzuzufügen.

Füge im Codefeld Folgendes hinzu:

Der Link führt an diese Stelle

Ersetze im ersten Tag unique-ID zwischen den Anführungszeichen durch eine spezifische eindeutige ID für deinen Link:

  • Der Text für deine eindeutige ID ist frei wählbar, er darf allerdings keine Leerzeichen enthalten. Trenne Wörter stattdessen mit einem Bindestrich.
  • Bei eindeutigen IDs ist die Groß- und Kleinschreibung zu beachten. IDs dürfen nur einmal pro Seite verwendet werden. In unseren Bewährten Vorgehensweisen findest du weitere hilfreiche Informationen dazu.

Ersetze Der Link führt an diese Stelle durch einen beliebigen Text, den du auf deiner Website anzeigen möchtest.

Die_eindeutige_ID_eines_Anchor_Links_der_einem_Code_Block_hinzugefügt wurde.png

Die_eindeutige_ID_eines_Anchor_Links_der_einem_Code_Block_hinzugefügt wurde.png

Füge den Link hinzu, auf den Besucher klicken, um zu den in Schritt 1 erstellten Inhalten zu gelangen. Du kannst Links aller Art verwenden, in diesem Beispiel wird jedoch ein Text-Link verwendet:

  1. Gib in einem Text-Block den Text ein, den du verknüpfen möchtest, markiere ihn und klicke in der Symbolleiste „Text-Block“ auf das Symbol Link.
  2. Füge unter URL die vollständige URL für die Seite hinzu (auch wenn es sich um dieselbe Seite handelt) und einen zusätzlichen Schrägstrich. Es sollte folgendermaßen aussehen:
    https://beispielwebsite.com/seitenslug/
  3. Gib nach dem Seiten-Slug einen Hashtag (#) gefolgt von der eindeutigen ID aus Schritt 1 ein. Es sollte so aussehen:
    https://beispielwebsite.com/seitenslug/#eindeutige-id
  4. Wenn du möchtest, dass der Link in einem neuen Tab geöffnet wird, aktiviere den Schalter Link in neuem Tab öffnen.
  5. Drücke die Eingabetaste.

Für bestimmte Anker-Links, einschließlich der vollständigen Website-Adresse, ist dies optional, aber wir empfehlen es für die meisten Links.

Tipp

Wenn du Anker-Links zu deiner Startseite hinzufügst, musst du den Seiten-Slug nicht einfügen. Falls du deine Startseite änderst, füge den Slug zu allen Anker-Links hinzu, die du auf der alten Startseite erstellt hast, da diese sonst nicht richtig funktionieren.

Schritt 3 – Speichern und veröffentlichen

Klicke auf Speichern, um deine Änderungen zu veröffentlichen. Der Link, den du in Schritt 2 erstellt hast, führt Besucher nun direkt zu dem Text, den du in Schritt 1 festgelegt hast.

Im Beispiel oben wird Textkörper für den Anker-Link in Schritt 2 verwendet. Du kannst jedoch Links aller Art verwenden, darunter Buttons und Bild-Klick-URLs. Näheres über die verschiedenen Link-Optionen erfährst du unter Links zu deiner Website hinzufügen.

Füge für alle Link-Typen die URL und die eindeutige ID hinzu, wie oben in Schritt 2 gezeigt, und verwende dabei dieses Format:

https://beispielwebsite.com/seitenslug/#eindeutige-id

Landing-Text formatieren

Wenn du den Landing-Text nicht als Textkörper formatieren möchtest, ändere die Tags

Wenn du verschiedene Tags verwendest, füge die eindeutige ID zum Code hinzu, wie du es in Schritt 1 getan hast:

Der Link führt an diese Stelle

Der Anker-Link funktioniert auch ohne sichtbaren Text. Wenn du nicht möchtest, dass Text an deinem Landing-Punkt angezeigt wird, formatiere den Landing-Text so, dass zwischen den Tags nichts steht:

In den meisten Fällen empfehlen wir, die URL und den Seiten-Slug vor der eindeutigen ID hinzuzufügen. Ein Anker-Link ohne entsprechenden Seiten-Slug funktioniert in den folgenden Fällen nicht:

  • Wenn es sich bei deinem Link um einen Navigationslink handelt
  • Wenn du auf eine andere Seite verlinkst

Anker-Links ohne die Website-URL können auf Mobilgeräten auch Probleme in Safari-Browsern machen. Gehe zu URL-Slugs, um die URL deiner Seite zu finden.

Wenn du weißt, dass keiner deiner Besucher den mobilen Safari-Browser verwendet, und du auf eine bestimmte Stelle derselben Seite verlinken möchtest (um beispielsweise zu einem Header weiter unten zu springen), kannst du auch die #unique-id ohne den Seiten-Slug oder die URL verwenden.

Tipp

Im Menü Datenverkehr-Analytics kannst du sehen, welche Browser deine Besucher verwenden.

Auf den Anfang oder das Ende einer Seite verlinken

Um einen Link zum Seitenanfang oder -ende zu setzen, kannst du über Code einfügen auf den Header oder den Footer verlinken. „Code einfügen“ ist eine Premium-Funktion.

Eine Verlinkung zum Seitenanfang ist nützlich, wenn dein Seiteninhalt lang ist und du den Besuchern eine einfache Möglichkeit geben willst, zu deiner Navigation zurückzukehren. So verlinkst du zum Seitenanfang:

  1. Füge Text und einen Anker-Link am Ende der Seite oder des Footers hinzu, wie in Schritt 2 beschrieben, aber füge nicht die URL für deine Website oder einen Schrägstrich (/) vor der eindeutigen ID ein. Du kannst Zurück zum Seitenanfang als Text und #top als eindeutige ID verwenden.
  2. Öffne das Menü „Code einfügen“.
  3. Füge im Feld Header diesen Code hinzu: . Wenn du bei der Erstellung des Links eine andere eindeutige ID als #top verwendet hast, musst du diese im ersten -Tag verwenden.
  4. Klicke auf Speichern.

Diese Methode verlinkt auf den Anfang jeder Seite deiner Website. Du kannst denselben Vorgang verwenden, um auf den Anfang einer einzelnen Seite zu verlinken, indem du den Code stattdessen zu den erweiterten Einstellungen der Seite hinzufügst.

Auf das Ende verlinken

Das Verlinken auf das Seitenende ist nützlich, wenn du möchtest, dass Besucher Informationen finden oder mit etwas in deinem Footer interagieren, z. B. einem Newsletter-Block.

So verlinkst du auf das Seitenende:

  1. Füge Text und einen Anker-Link an einer beliebigen Stelle im Inhalt der Seite hinzu, wie in Schritt 2 beschrieben, aber füge weder die URL für deine Website noch einen Schrägstrich (/) vor der eindeutigen ID ein. Du kannst Zum Footer als Text und #bottom als eindeutige ID verwenden.
  2. Öffne das Menü „Code einfügen“.
  3. Füge im Feld Footer diesen Code hinzu: . Wenn du bei der Erstellung des Links eine andere eindeutige ID als #bottom verwendet hast, musst du diese im ersten -Tag ersetzen.
  4. Klicke auf Speichern.

Diese Methode verlinkt auf den Footer auf jeder Seite deiner gesamten Website.

Einschränkungen und bewährte Verfahrensweisen

Anker-Links können sehr praktisch sein, um Besuchern die Navigation auf deiner Website zu erleichtern. Dennoch gilt es Folgendes zu beachten:

Eine ID kann auf jeder Seite nur einmal benutzt werden

Ein Beispiel: Nachdem du die ID panda auf deiner Startseite verwendet hast, kannst du panda später nicht nochmal als ID auf deiner Startseite hinzufügen. Du kannst sie wieder auf einer anderen Seite verwenden, aber kein zweites Mal auf deiner Startseite.

Beachte bei IDs die Groß- und Kleinschreibung

Wenn in deinem HTML-Code id="Panda" steht, aber dein Link die ID #panda aufweist, wird dein Link nicht funktionieren.

Wenn Besucher auf einen Anker-Link klicken, wird die eindeutige ID am Ende der Website-URL angezeigt. Stelle sicher, dass deine eindeutige ID für Besucher sichtbar ist.

KB Guide Image

Für deine eindeutige Id kannst du einen beliebigen Text verwenden

Die Erstellung einer einprägsamen ID kann den Einrichtungsprozess erleichtern und dir bei der Fehlersuche helfen, falls mal etwas schiefgeht. Einprägsame IDs sind meist die, die einfach logisch sind, wie zum Beispiel #top für einen Link zum Seitenanfang.

Mithilfe von Anker-Links kannst du deine Website humorvoll und individuell gestalten. Denke daran, dass die ID am Ende der URL für deine Besucher sichtbar sein wird.

Der verlinkte Abschnitt wird oben im Browser angezeigt.

Der Landing-Text wird oben im Browser bzw. so weit oben wie möglich angezeigt, wenn sich darunter wenig Inhalt befindet.

Wenn du nicht möchtest, dass dein Text ganz oben im Browserfenster erscheint, kannst du darüber Platz lassen, indem du

 

Jedes Mal, wenn du die Tag-Abfolge

 

KB Guide Image
KB Guide Image

Auf Abschnitte verlinken, die keine Blöcke unterstützen

Du kannst nicht direkt auf einige Abschnittstypen wie Galerie-Abschnitte oder Auto-Layouts verlinken, da du diesen Abschnitten keine Blöcke hinzufügen kannst. Aber du kannst einen ähnlichen Effekt erzielen, indem du die folgenden Schritte ausführst:

  1. Füge einen leeren Abschnitt über dem Abschnitt hinzu, auf den du verlinken möchtest.
  2. Führe die obigen Schritte aus, um deinen Code-Block zum leeren Abschnitt hinzuzufügen und den Anker-Link einzurichten.
  3. Um eine Lücke zu vermeiden, die durch den leeren Abschnitt entsteht, klicke auf den leeren Abschnitt, dann auf Abschnitt bearbeiten und deaktiviere die Funktion Bildschirm füllen.

Wenn du deine Hauptdomain änderst oder den Seiten-Slug aktualisierst, solltest du auch deine Anker-Links aktualisieren. Anker-Links funktionieren nicht richtig, wenn sie veraltete URLs verwenden.

Fehlerbehebung

Funktioniert ein Anker-Link nicht, solltest du Folgendes überprüfen:

  • Du hast die URL wie in Schritt 2 beschrieben hinzugefügt, einschließlich des Seiten-Slugs und zweier /-Symbole. Das ist insbesondere für Navigationslinks und Links von anderen Seiten wichtig.
  • Die eindeutige ID ist in deinem Link und im Landing-Text identisch. Der Link funktioniert nicht, wenn die Schreibweise oder die Groß- und Kleinschreibung voneinander abweichen.
  • Die HTML des Landing-Texts wurde korrekt erstellt. Wenn deine eindeutige ID beispielsweise #bamboo lautet, musst du id="bamboo" als Link im Landing-Text-HTML einfügen.
  • Die Anführungszeichen in deinem Landing-Text-HTML sind "gerade" Anführungszeichen, wie in den Beispielen in dieser Anleitung. “Typografische” oder „intelligente“ Anführungszeichen funktionieren im Code-Block nicht. Der Code-Block verwendet standardmäßig "gerade" Anführungszeichen, aber du könntest “typografische” Anführungszeichen haben, wenn du den Code kopiert und in den Block eingefügt hast.
  • Du hast www. am Anfang deiner URL hinzugefügt, wenn deine primäre Domain dies beinhaltet.
  • Du testest ihn, während du abgemeldet bist oder einen Inkognito-Browser verwendest. Das Klicken auf einen Anker-Link, während du angemeldet bist, kann in einigen Fällen funktionieren, aber es ist kein zuverlässiger Test dafür, was deine Besucher erleben werden.

Selbst wenn alles richtig eingerichtet ist, funktioniert der Anker-Link unter folgenden Umständen nicht:

  • Wenn du die integrierte Domain deiner Website verwendest und beim Testen angemeldet bist. Teste den Anker-Link stattdessen in einem Inkognito-Browser.
  • Deine Website ist auf „privat“ gesetzt ist und du testest den Anker-Link, während du angemeldet bist. Lege für deine Website stattdessen ein Passwort für die gesamte Website fest und teste in einem Inkognito-Browser.
  • Die Seite nutzt diese ID bereits. Versuche es mit einer anderen ID oder ändere die Groß- und Kleinschreibung.

Wenn im Header deiner Website die Option Feste Position aktiviert ist, kann es sein, dass ein Anker-Link unter den Code-Block mit deiner eindeutigen ID springt. Um dies zu verhindern, deaktiviere den Schalter Feste Position oder füge etwas Platz unter dem Code-Block und über dem Inhalt hinzu, zu dem der Anker-Link führen soll.

Hinweis

Kundenspezifische codebasierte Anpassungen fallen nicht in den Bereich unserer Kundenbetreuung. Das bedeutet, dass wir bei der Einrichtung oder Fehlerbehebung keine weitere Unterstützung bieten können. Des Weiteren können wir bei einer codebasierten Lösung die Funktionalität oder vollständige Kompatibilität mit Squarespace nicht garantieren. Dies bezieht sich z. B. auf die Funktionalität in Verbindung mit Responsive Design, insbesondere, was die Darstellung auf Mobilgeräten betrifft, und ob es mit allen Templates kompatibel ist. Zudem kann ein benutzerdefinierter Code nach zukünftigen Updates auf unserer Plattform zu Anzeigeproblemen führen. Wir können dir in diesem Fall nicht weiterhelfen, allerdings stehen dir viele andere Informationsquellen zur Verfügung, die dich dabei unterstützen können:

Je nach Gerät und Browser variiert das Verhalten von Anker-Links auf dem Mobilgerät. Wenn dein Anker-Link beispielsweise die vollständige URL enthält, wie wir es empfehlen, lädt der Browser die Seite möglicherweise am Landing-Punkt neu, anstatt sofort zum Landing-Punkt zu springen.

Wenn du ein anderes Verhalten von Anker-Links auf Mobilgeräten bevorzugst, kannst du alternative Formate für den Anker-Link ausprobieren, z. B. /pageslug#unique-id oder #unique-id. Beachte jedoch, dass diese Formate möglicherweise nicht bei bestimmten Konfigurationen oder in bestimmten mobilen Browsern (z. B. dem mobilen Safari-Browser) funktionieren.

Mehr dazu erfährst du unter Seiten-Slugs und Anker-Links.

Wenn deine Website Version 7.0 verwendet, solltest du beim Einrichten von Anker-Links einige besondere Aspekte berücksichtigen.

Ajax ist eine spezielle Methode, die den Ladevorgang einer Website beeinflusst und Seiten mit viel Inhalt deutlich schneller macht. Sie kann jedoch die Anker-Links beeinträchtigen, insbesondere auf Mobilgeräten.

Wenn die obigen Schritte zur Fehlerbehebung nicht funktionieren und dein Template Ajax unterstützt, solltest du es vorübergehend in Website-Stile deaktivieren, um zu prüfen, ob das Problem dadurch verursacht wird. Ajax ist in diesen Template-Gruppen verfügbar:

  • Brine
  • Farro
  • Tremont
  • York

Gestapelte Index-Seiten bieten eine alternative Möglichkeit, Anker-Links hinzuzufügen, für die kein Code erforderlich ist. Um mehr zu erfahren, besuche Anker-Links auf Index-Seiten hinzufügen.

Footer Image
  • Hol dir Hilfe von der Community

  • Hol dir Hilfe von unserer Community zu erweiterten individuellen Anpassungen.

  • Beauftrage einen Squarespace-Experten

  • Hebe dich online von der Masse ab, indem du dir von einem erfahrenen Webdesigner oder Entwickler helfen lässt.