Leite Besucher zu einem bestimmten Teil einer Seite weiter.

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.

Auf Websites der Version 7.0 kannst du Anker-Links erstellen, indem du Code-Blöcke zu Inhaltsbereichen hinzufügst.

In dieser Anleitung wird erläutert, wie du Anker-Links auf einer Website der Version 7.0 manuell erstellen kannst. Einige Templates der Version 7.0 verfügen außerdem über integrierte Anker-Links für Index-Seiten. Informationen zum Hinzufügen von Anker-Links in Version 7.1 findest du unter Anker-Links erstellen.

Ein Video anschauen

Dieses Video behandelt das manuelle Hinzufügen von Anker-Links in Version 7.1, aber die Schritte sind in Version 7.0 identisch.

Schritt 1 – Einen Code-Block hinzufügen

Scrolle im Seiten-Editor zu der Stelle, an die der Link führen soll, und füge einen Code-Block hinzu. Du kannst ihn zu jedem Block-Inhaltsbereich hinzufügen, aber nicht zu Sammlungs-Seiten wie Blogs oder Galerien, bei denen es nicht möglich ist, Blöcke hinzuzufügen.

Füge im Codefeld Folgendes hinzu:

Der Link führt an diese Stelle

Ersetze im ersten Tag eindeutige-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. Stelle sicher, dass die Option Quellcode anzeigen deaktiviert ist, sonst funktioniert der Anker-Link nicht.

Schritt 2 - Den Link erstellen

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.

Verschiedene Arten von Links verwenden

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

und

in Schritt 1. Wenn du dich mit HTML nicht auskennst, versuche es mit Heading-1-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

Link zu einem Leerraum

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:

Seiten-Slugs und Anker-Links

In den meisten Fällen empfehlen wir, die komplette 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 #eindeutige-id, die du im 2. Schritt erstellst, ohne den Seiten-Slug oder die URL verwenden.

#eindeutige-id

Tipp: Im Menü Datenverkehr-Analytics kannst du überprüfen, 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.

Link zum Seitenanfang

Ein Link zum Seitenanfang ist nützlich, wenn der Inhalt deiner Seite lang ist und du den Besuchern eine bequeme Möglichkeit bieten möchtest, 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.

Nach dem Anklicken des Anker-Links wird die eindeutige ID Teil der URL

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.

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. Beachte, dass die ID am Ende der URL Besuchern die Adressleiste des Browsers anzeigt.

Der Landing-Text, auf den du verlinkt hast, 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

-Tags mit geschützten Leerzeichen zum Landing-Text hinzufügst. In HTML wird ein geschütztes Leerzeichen als   dargestellt.

Jeder Satz von

 

-Tags, die du vor dem Text hinzufügst, fügt einen zusätzlichen Zeilenumbruch hinzu. Wenn du beispielsweise zwei Zeilenumbrüche vor dem Landing-Text von Überschrift 3 möchtest, würde der Code-Block den folgenden Code verwenden:

 
 
Der Link führt an diese Stelle

Links regelmäßig aktualisieren

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

Der Anker-Link funktioniert nicht

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.

Ajax und Anker-Links

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

Hinweis: Codebasierte Anpassungen fallen nicht in den Rahmen unserer Kundenbetreuung. Das bedeutet, dass wir keine weitere Unterstützung bei der Einrichtung oder Fehlerbehebung leisten können. Außerdem können wir bei einer codebasierten Lösung die Funktionalität oder vollständige Kompatibilität mit Squarespace nicht garantieren. Dies bezieht sich etwa auf die Funktionalität in Verbindung mit Responsive Design, insbesondere auf das Erscheinungsbild auf Mobilgeräten, und auf die Kompatibilität mit allen Templates. Zudem kann benutzerdefinierter Code im Anschluss an zukünftige Updates unserer Plattform zu Anzeigeproblemen führen. Wir können dir in diesem Fall nicht weiterhelfen, allerdings gibt es viele andere Informationsquellen, die dich hier unterstützen können:

• Mach dich mit den bewährten Verfahrensweisen zum Hinzufügen von benutzerdefiniertem Code vertraut.
• Lies unsere allgemeine Anleitung für Anpassungen von Drittanbietern.
• Besuche das Squarespace Forum, unsere Community für Kunden und Entwickler.
• Beauftrage Squarespace-Experten mit der Erstellung eines benutzerdefinierten Codes für deine Website.

Anker-Links auf dem Mobilgerät

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 andere 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.

Anker-Links auf Index-Seiten

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.