Hinweis: Während unsere beliebtesten Anleitungen ins Deutsche übersetzt wurden, sind einige Anleitungen nur auf Englisch verfügbar.

Anker-Links erstellen

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

Schritt 1 – Einen Link erstellen

Füge den Link hinzu, den deine Besucher:innen anklicken sollen. Du kannst Links aller Art verwenden. Für dieses Beispiel verwenden wir allerdings einen Text-Link.

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.

Schritt 2 – URL und Seiten-Slug hinzufügen

Für manche Anker-Links ist dieser Schritt optional, aber wir empfehlen ihn für die meisten Links.

Füge im Feld „Webadresse“ Folgendes hinzu:

  1. Die URL deiner Website
  2. Den Slug für die Seite, auf die du verlinken möchtest (auch wenn es sich um die gleiche Seite handelt).
  3. Einen zusätzlichen Schrägstrich (/)

Es sollte folgendermaßen aussehen:

https://beispielwebsite.com/seitenslug/

Klicke auf das Zahnrad-Symbol, um zu prüfen, dass In neuem Fenster öffnen deaktiviert ist, wenn du möchtest, dass Besucher:innen auf derselben Seite bleiben.

Tipp: Wenn du zu einem späteren Zeitpunkt deine Hauptdomain änderst oder den Seiten-Slug aktualisierst, solltest du auch den Anker-Link aktualisieren.

Schritt 3 – Eine eindeutige ID hinzufügen

Gib nach deinem Seiten-Slug einen Hashtag (#) ein, auf den dann Text folgt. Der erstellte Text ist deine eindeutige ID.

  • 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 Verfahrensweisen findest du weitere hilfreiche Informationen dazu.

Nach dem Hinzufügen der eindeutigen ID sollte die URL wie folgt aussehen:

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

Klicke auf Speichern und dann auf Anwenden, um deinen Link zu speichern.

Schritt 4 - Die eindeutige ID mit einem Abschnitt deiner Seite verlinken

Scrolle im Seiten-Editor zu dem Abschnitt, zu dem der Link deine Besucher:innen führen soll und füge einen Code-Block hinzu.

Füge im Codefeld Folgendes hinzu:

<p id="eindeutige-id">Der Link führt an diese Stelle</p>

Ersetze im ersten Tag eindeutige-ID zwischen den Anführungszeichen durch deine spezifische eindeutige ID. Ersetze Der Link führt an diese Stelle durch einen beliebigen Text, den du hier auf deiner Seite anzeigen möchtest.

Tipp: Gib nicht den Seiten-Slug oder Hashtag aus deinem Anker-Link ein.

Die_eindeutige_ID_eines_Anchor_Links_der_einem_Code_Block_hinzugefügt wurde.png

Schritt 5 - Speichern

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

Verschiedene Arten von Links verwenden

Im Beispiel oben wird in Schritt 1 ein Textkörper für den Anker-Link verwendet. Du kannst aber auch andere Links wie z. B. Buttons und Bild-Klick-URLs erstellen. Näheres über die verschiedenen Link-Optionen erfährst du unter Links zu deiner Website hinzufügen.

Füge bei allen Link-Typen die URL hinzu und erstelle die eindeutige ID, wie oben in Schritt 2 und Schritt 3 erklärt wurde, in folgendem Format:

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

Landing-Text formatieren

Wenn du den Landing-Text nicht als Textkörper formatieren möchtest, musst du die Tags <p> und </p> in Schritt 4 ändern. Wenn du dich mit HTML nicht auskennst, solltest du folgende Tags für die Überschrift 1 verwenden: <h1> </h1>

Wenn du unterschiedliche Tags verwendest, kannst du die eindeutige ID auf die gleiche Weise hinzufügen, wie es in Schritt 4 beschrieben wurde:

Formatiere_den_Anker_Link_Text_als_Header.png

Der Anker-Link funktioniert auch ohne sichtbaren Text. Wenn du nicht möchtest, dass Besucher:innen beim Landing-Punkt Text sehen, kannst du den Landing-Text so formatieren, dass zwischen den Tags nichts steht:

<p id="eindeutigeid"></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:

  • Im Internet Explorer
  • 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:innen den Internet Explorer oder 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 ohne den Seiten-Slug oder die URL verwenden.

Tipp: Im Menü Datenverkehr-Analytics kannst du sehen, welche Browser deine Besucher:innen 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.

  1. Füge wie in Schritt 1 bis Schritt 3 beschrieben Text und einen Anker-Link am Seitenende oder im Footer hinzu. Gib allerdings nicht die URL für deine Website oder einen Schrägstrich (/) vor der eindeutigen ID ein. Du kannst Zurück nach oben als Text und #top als deine eindeutige ID verwenden.
  2. Klicke im Hauptmenü auf Einstellungen, dann auf Erweitert und anschließend auf Code einfügen.
  3. 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.
  4. Klicke auf Speichern.

So kannst du auf jeder Seite deiner Website einen Link zum Seitenanfang erstellen. Du kannst das gleiche Prinzip anwenden, um auf den oberen Rand einer einzelnen Seite zu verlinken, indem du den Code zu den erweiterten Einstellungen der Seite hinzufügst.

Einschränkungen und bewährte Verfahrensweisen

Anker-Links können sehr praktisch sein, um Besucher:innen 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:innen 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:innen 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 &nbsp; dargestellt.

Jedes Mal, wenn du die Tag-Abfolge <p>&nbsp;</p> eingibst, wird ein weiterer Zeilenumbruch vor dem Text eingefügt. Sieh dir unten die Bilder zur Verdeutlichung an.

Fehlerbehebung

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

  • Du hast wie in Schritt 2 beschrieben einen Seiten-Slug hinzugefügt und dabei die beiden /-Symbole verwendet. Das ist für Navigationslinks, Links von anderen Seiten und für den Internet Explorer besonders 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.
  • Du hast www. am Anfang deiner URL hinzugefügt, wenn deine primäre Domain dies beinhaltet.

In manchen Fällen kann es vorkommen, dass der Anker-Link auch dann nicht funktioniert, obwohl alles korrekt eingerichtet ist:

  • Wenn du die integrierte Domain deiner Website verwendest und beim Testen eingeloggt bist. Teste den Anker-Link stattdessen in einem Inkognito-Browser.
  • Wenn deine Website auf „privat“ gesetzt ist und du den Anker-Link testest, während du eingeloggt bist. Lege für deine Website stattdessen ein Passwort für die gesamte Website fest und teste in einem Inkognito-Browser.
  • Wenn die Seite diese ID bereits verwendet. Versuche dann, eine andere ID zu verwenden oder die Groß-/Kleinschreibung zu ändern.
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:

Ajax und Anker-Links (Version 7.0)

Ab Version 7.0 ist Ajax ein spezielles Verfahren zum Laden von Websites, die Seiten mit viel Inhalt wesentlich schneller und reaktionsfreudiger macht. Dies kann allerdings die Anker-Link-Funktionalität beeinträchtigen, vor allem 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 für die folgenden Template-Gruppen verfügbar:

  • Brine
  • Farro
  • Tremont
  • York

Anker-Links auf Index-Seiten (Version 7.0)

In Version 7.0 gibt es für gestapelte Index-Seiten eine alternative Möglichkeit, Anker-Links hinzuzufügen, die keinen Code erfordert. Näheres dazu erfährst du hier: Hinzufügen von Anker-Links auf Index-Seiten.

War dieser Beitrag hilfreich?
167 von 399 fanden dies hilfreich