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.
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 ihn zu jedem Block-Abschnitt hinzufügen, aber nicht zu anderen Abschnittsarten wie Galerie-Abschnitten oder Auto-Layouts, da es nicht möglich ist, Blöcke zu solchen Abschnitten hinzuzufügen.
Füge im Codefeld Folgendes hinzu:
<p id="eindeutige-id">Der Link führt an diese Stelle</p>
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.
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:
- 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.
- Füge im Feld „Webadresse“ 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 so aussehen:
https://beispielwebsite.com/seitenslug/
- 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
- Wenn der Link in einem neuen Tab geöffnet werden soll, klicke auf
und aktiviere In neuem Fenster öffnen.
- Klicke auf Speichern und dann auf Anwenden, um deinen Link zu speichern.
und aktiviere In neuem Fenster öffnen.
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 <p> und </p> in Schritt 1. Wenn du dich mit HTML nicht auskennst, versuche es mit Heading-1-Tags: <h1> </h1>
Wenn du verschiedene Tags verwendest, füg die eindeutige ID zum Code hinzu, wie du es in Schritt 1 getan hast:
<h1 id="eindeutige-id">Der Link führt an diese Stelle</h1>
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:
<p id="eindeutige-id"></p>
Seiten-Slugs und Anker-Links
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.
Link zum Seitenanfang
Um einen Link zum Seitenanfang zu setzen, kannst du über Code einfügen auf den Header verlinken. „Code einfügen“ ist eine Premium-Funktion.
- 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.
- Öffne das Menü „Code einfügen“.
- Füge im Feld Header diesen Code hinzu: <a id="top"></a>. Wenn du bei der Erstellung des Links eine andere eindeutige ID als #top verwendet hast, musst du diese im ersten <a>-Tag ersetzen.
- 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.
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.
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 <p>-Tags mit geschützten Leerzeichen zum Landing-Text hinzufügst. In HTML wird ein geschütztes Leerzeichen als dargestellt.
Jedes Mal, wenn du die Tag-Abfolge <p> </p> eingibst, wird ein weiterer Zeilenumbruch vor dem Text eingefügt. Sieh dir unten die Bilder zur Verdeutlichung an.
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
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.
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:
- 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 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.
Anker-Links auf Version 7.0
Wenn deine Website Version 7.0 verwendet, solltest du beim Einrichten von Anker-Links einige besondere Aspekte berücksichtigen.
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
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.