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 Sie zu einer bestimmten Stelle einer Seite weiterleitet. So enthält beispielsweise das Inhaltsverzeichnis dieser Anleitung Anker-Links, die Sie zur jeweiligen Kopfzeile führen.

In dieser Anleitung wird beschrieben, wie du Anker-Links zu beliebigen Block-Abschnitten auf deiner Website mit einem Code-Block hinzufügst.

Schritt 1 – Einen Link erstellen

Fügen Sie den Link hinzu, den Ihre Besucher anklicken sollen. Sie können 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.

Schritt 2 – URL und Seiten-Slug hinzufügen

Für bestimmte 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 Ihrer 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 (/)

Das sollte folgendermaßen aussehen:

https://examplesite.com/pageslug/

Klicke auf das Zahnrad-Symbol, um sicherzustellen, dass In neuem Fenster öffnen deaktiviert ist, wenn du möchtest, dass Besucher auf derselben Seite bleiben.

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

Schritt 3 – Eine spezifische ID hinzufügen

Gib nach deinem Seiten-Slug einen Hashtag (#) gefolgt von Text ein. Der Text, den du eingibst, stellt deine spezifische ID dar.

  • Der Text für Ihre spezifische ID ist frei wählbar, darf jedoch keine Leerzeichen enthalten. Trennen Sie Wörter stattdessen mit einem Bindestrich.
  • Bei spezifischen IDs ist die Groß- und Kleinschreibung zu beachten. Zudem dürfen IDs nur einmal pro Seite verwendet werden. In unseren Best Practices findest du weitere hilfreiche Informationen hierzu.

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

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

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

Schritt 4 - Die spezifische ID mit einem Abschnitt Ihrer Seite verlinken

Scrolle im Seiten-Editor zu dem Abschnitt, zu dem der Link Besucher bringen soll, und füge einen Code-Blockhinzu.

Füge im Codefeld Folgendes hinzu:

<p id="unique-id">Auf diese Stelle verweist der Link</p>

Ersetze im ersten Tag Unique-ID zwischen den Anführungszeichen durch deine spezifische eindeutige ID. Ersetze Auf diese Stelle verweist der Link durch einen beliebigen Text, den du hier auf deiner Website anzeigen möchtest.

Tipp: Geben Sie nicht den Seiten-Slug oder Hashtag aus Ihrem Anker-Link ein.

The_unique_ID_of_an_anchor_link_added_to_a_Code_Block.png

Schritt 5 - Speichern

Klicken Sie auf Save (Speichern), um Ihre Änderungen zu veröffentlichen. Der Link, den du in Schritt 1 erstellt hast, führt Besucher nun direkt zu dem Text, den du in Schritt 4 festgelegt hast.

Verschiedene Arten von Links verwenden

Im Beispiel oben wird Textkörper für den Anker-Link in Schritt 1 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 Linktypen die URL hinzu und erstelle die eindeutige ID, wie in Schritt 2 und Schritt 3 oben gezeigt, in folgendem Format:

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

Landing-Text formatieren

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

Wenn du unterschiedliche Tags verwendest, füge die spezifische ID auf die gleiche Weise wie in Schritt 4 hinzu:

Format_the_anchor_link_text_as_a_header.png

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

<p id="uniqueid"></p>

Seiten-Slugs und Anker-Links

Wir empfehlen in den meisten Fällen, die URL und den Seiten-Slug vor der spezifischen ID hinzuzufügen. Anker-Links ohne entsprechenden Seiten-Slug funktionieren in den folgenden Fällen nicht:

  • im Internet Explorer
  • Wenn es sich bei Ihrem Link um einen Navigationslink handelt
  • Wenn Sie auf eine andere Seite verlinken

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

Wenn du weißt, dass keiner deiner Besucher 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 scrollen), kannst du auch die #unique-id ohne den Seiten-Slug oder die URL verwenden.

Tipp: Im Menü Datenverkehr-Analytics kannst du erkennen, welche Browser deine Besucher verwenden.

Link zum Seitenanfang

Um Links zum Seitenanfang einzufügen, kannst du mithilfe der Option Code einfügen auf den Header verlinken. „Code einfügen“ ist eine Premium-Funktion.

  1. Füge Text und einen Anker-Link am Ende der Seite oder im Footer hinzu, wie in Schritt 1 bis Schritt 3 beschrieben. Füge jedoch 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. Klicken Sie 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 spezifische ID als #top verwendet hast, musst du diese im ersten <a>-Tag verwenden.
  4.  Klicken Sie auf Save (Speichern).

Diese Methode ermöglicht es, auf jeder Seite auf deiner Website einen Link zum oberen Rand jeder Seite zu erstellen. Du kannst den gleichen Vorgang verwenden, um 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 hilfreich sein, um Besuchern die Navigation auf Ihrer Website zu erleichtern. Dennoch gilt es Folgendes zu beachten:

Eine ID kann nur einmal auf jeder Seite benutzt werden

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

Beachten Sie die Groß- und Kleinschreibung bei IDs

Wenn dein HTML id="Panda" sagt, aber dein Link die ID als #panda listet, wird dein Link nicht funktionieren.

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

Wenn ein Besucher auf einen Anker-Link klickt, wird die spezifische ID am Ende der Website-URL angezeigt.

Sie können beliebigen Text für Ihre spezifische ID verwenden

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

Mithilfe von Anker-Links können Sie Ihre Website humorvoll und individuell gestalten. Bedenken Sie, dass die ID am Ende der URL für Besucher sichtbar ist.

Der verlinkte Abschnitt wird oben im Browser angezeigt.

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

Wenn du nicht möchtest, dass dein Text ganz oben im Browserfenster erscheint, kannst du darüber Platz schaffen, 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 die Bilder unten zur Verdeutlichung an.

Fehlerbeseitigung

Funktioniert ein Anker-Link nicht, überprüfe bitte Folgendes:

  • Du hast wie in Schritt 2 beschrieben einen Seiten-Slug hinzugefügt, einschließlich der beiden /-Symbole. Besonders wichtig ist dies bei Navigationslinks, Links von anderen Seiten und bei Nutzung des Internet Explorer.
  • In deinem Link und im Landing-Text verwendest du dieselbe spezifische ID. Der Link funktioniert nicht, wenn die Schreibweise oder die Groß- und Kleinschreibung abweicht.
  • Die HTML des Landing-Texts wurde korrekt erstellt. Wenn deine spezifische ID beispielsweise #bamboo lautet, musst du id="bamboo" als Link ins Landing-Text-HTML einfügen.
  • Du hast www am Anfang deiner URL hinzugefügt, wenn deine primäre Domain es beinhaltet.

Es kann manchmal vorkommen, dass der Anker-Link auch dann nicht funktioniert, wenn sämtliche Einstellungen korrekt sind:

  • Wenn du die integrierte Domain deiner Website benutzt und beim Testen angemeldet bist. Teste ihn stattdessen in einem Inkognito-Browser.
  • Wenn deine Website auf „privat“ eingestellt ist und du den Anker-Link testest, während du angemeldet bist. Lege für deine Website stattdessen ein Passwort für die gesamte Website fest und teste ihn in einem Inkognito-Browser.
  • Wenn die Seite diese ID bereits verwendet, versuche, eine andere ID zu verwenden oder die Groß-/Kleinschreibung zu ändern.
Hinweis: Codebasierte Anpassungen fallen nicht in den Rahmen unserer Kundenbetreuung. Das bedeutet, dass wir keine weitere Unterstützung bei der Einrichtung oder Fehlerbehebung bieten 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:

Ajax und Anker-Links (Version 7.0)

Auf Version 7.0 ist Ajax eine spezielle Methode zum Laden von Websites, die Seiten mit viel Inhalt viel schneller und reaktionsfreudiger macht. Dies kann jedoch die Anker-Link-Funktionalität beeinträchtigen, insbesondere auf Mobilgeräten.

Wenn die obigen Schritte zur Fehlerbehebung nicht funktionieren und dein Template Ajax unterstützt, deaktiviere es vorübergehend in Website-Stile, um festzustellen, ob das Problem dadurch verursacht wird. Ajax ist in folgenden Template-Gruppen verfügbar:

  • Brine
  • Farro
  • Tremont
  • York

Anker-Links auf Index-Seiten (Version 7.0)

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

War dieser Beitrag hilfreich?
159 von 377 fanden dies hilfreich