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 Sie verlinken (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 Sie zu einem späteren Zeitpunkt Ihre Hauptdomain ändern oder den Seiten-Slug aktualisieren, aktualisieren Sie 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 erhalten Sie weitere Hilfestellungen.

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

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

Klicke auf Anwenden, um den 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.

Ersetze die Worte Hallo, Welt! mit dem Text, den du auf der Seite möchtest. Dann füge

id="unique-id"

fügen Sie im ersten Tag Ihre spezifischen ID zwischen den Anführungszeichen ein, etwa so:

<p id="unique-id">Auf diese Stelle verweist der Link</p>
Tipp: Geben Sie nicht den Seiten-Slug oder Hashtag aus Ihrem Anker-Link ein.

code-block-example.jpg

Klicken Sie auf Anwenden.

Schritt 5 - Speichern

Fahre mit dem Mauszeiger über Fertig und klicke dann auf Speichern. 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-text-as-h1s.jpg

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. Um die URL deiner Seite zu finden, besuche URL-Slugs.

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 einer Kopfzeile weiter unten zu scrollen), kannst du auch die #unique-id ohne den Seiten-Slug oder die URL verwenden.

Tipp: Dem Menü Traffic-Analytics können Sie entnehmen, welche Browser Ihre Besucher verwenden. 

Link zum Seitenanfang

Um Links zum Seitenanfang einzufügen, sollten Sie mithilfe von benutzerdefiniertem Code auf die Kopfzeile verlinken. Benutzerdefinierter Code ist ein Premium-Feature.

  1. Füge Text und einen Anker-Link am unteren Rand 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 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 Kopfzeile 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 denselben 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 Ihnen bei der Fehlersuche helfen, falls etwas schiefgeht. Einprägsame IDs sind oft die, die einfach logisch sind, wie zum Beispiel #top (#oben) 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 Bereich 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 Browser-Fenster 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 folgendermaßen eingegeben: &nbsp;

Jedes Mal, wenn du die Tag-Abfolge <p>&nbsp;</p> eingibst, wird ein weiterer Zeilenumbruch vor dem Text eingefügt. Bitte 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 in die 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 die Seite diese ID bereits verwendet, versuche, eine andere ID zu verwenden oder die Groß-/Kleinschreibung zu ändern.
Hinweis: Der Kundensupport hilft Ihnen bezüglich der einzelnen Schritte dieser Anleitung gerne weiter, wir können jedoch keinerlei Hilfestellungen im Hinblick auf Code-Änderungen bieten. Wenn Sie weitere Hilfe benötigen, empfehlen wir das Squarespace-Forum oder unsere Liste der Hilfe-Ressourcen für benutzerdefinierten Code.

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. Weitere Informationen findest du unter Hinzufügen von Index-Seiten-Anker-Links.

War dieser Beitrag hilfreich?
141 von 320 fanden dies hilfreich