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.

Es gibt zwei verschiedene Arten von Anker-Links, die Sie auf Ihrer Website verwenden können:

  • Reguläre Anker-Links – Ein Link, der Sie zu einer bestimmten Stelle einer Layout-Seite bzw. zu einem mit Blöcken bearbeitbaren Bereich führt. Dies erfordert einen Code-Block.
  • Anker-Links auf Index-Seiten - Auf Index-Seiten im Stapelformat besteht eine alternative Möglichkeit zum Hinzufügen von Anker-Links, die keinerlei Code erfordert.

Aus dieser Anleitung geht hervor, wie Sie einen regulären Anker-Link hinzufügen.

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. Markieren Sie den Text in einem Text-Block und klicken Sie dann auf das Link-Symbol in der Werkzeugleiste des Text-Blocks.

Schritt 2 – URL und Seiten-Slug hinzufügen

Füge Sie im Feld Link 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/

Für bestimmte Anker-Links ist dieser Schritt optional, aber wir empfehlen ihn für die meisten Links. Klicken Sie auf das Zahnrad-Symbol, um sicherzustellen, dass In neuem Fenster öffnen deaktiviert ist, wenn Sie möchten, 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

Geben Sie nach Ihrem Seiten-Slug einen Hashtag (#) gefolgt von Text ein. Der Text, den Sie eingeben, stellt Ihre 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.

Nachdem Sie die spezifische ID hinzugefügt haben, sollte sie so aussehen:

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

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

Scrollen Sie im Editor für Seiteninhalte zu dem Bereich, zu dem Besucher über den Link geführt werden sollen, und fügen Sie einen Code-Block hinzu.

Ersetzen Sie die Wörter “Hello, World!” mit dem Text, den Sie auf der Seite haben möchten. Fügen Sie dann

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

Schritt 5 - Speichern

Klicken Sie auf Link hinzufügen und dann auf Speichern. Der Link, den Sie in Schritt 1 erstellt haben, führt Besucher nun direkt zu dem Text, den Sie in Schritt 4 festgelegt haben.

Verschiedene Arten von Links verwenden

Im Beispiel oben wird Bodytext für den Anker-Link in Schritt 1 verwendet. Sie können jedoch Links aller Art verwenden, darunter Buttons und Bild-Klick-URLs. Näheres über die verschiedenen Link-Optionen erfahren Sie unter Links zu Ihrer Website hinzufügen.

Erstellen Sie die spezifische ID für Links aller Art wie oben in Schritt 2 und Schritt 3 beschrieben und halten Sie sich an das folgende Format:

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

Landing-Text formatieren

Wenn Sie den Landing-Text nicht als Textkörper formatieren möchten, ändern Sie die Tags <p> und </p> in Schritt 4. Wenn Sie sich nicht mit HTML auskennen, verwenden Sie folgende Tags für Überschrift 1: <h1> </h1>

Wenn Sie unterschiedliche Tags verwenden, fügen Sie die spezifische ID auf die gleiche Weise wie in Schritt 4 hinzu:

format-text-as-h1s.jpg

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ügen Sie wie in Schritt 1 bis Schritt 3 beschrieben Text und einen Anker-Link zur Seite oder Fußzeile hinzu. Als Text empfiehlt sich hier etwa „Zurück zum Seitenanfang“ – verbunden mit der spezifischen ID #top.
  2. Klicken Sie im Hauptmenü auf Einstellungen, dann auf Erweitert und anschließend auf Code einfügen.
  3. Fügen Sie im Feld Kopfzeile diesen Code hinzu: <a id="top"></a> 
  4. Wenn Sie bei der Erstellung des Links eine andere spezifische ID als #top verwendet haben, müssen Sie diese im ersten <a>-Tag verwenden.
  5.  Klicken Sie auf Save (Speichern).
Tipp: Auf die gleiche Weise können Sie auch zum Seitenanfang von einzelnen Seiten verlinken.

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

Und Anker-Links ohne die Website-URL können Probleme in Safari-Browsern auf Mobilgeräten verursachen. Um die URL Ihrer Seite zu finden, gehen Sie zu URL-Slugs.

Wenn Sie wissen, dass keiner Ihrer Besucher Internet Explorer oder den mobilen Safari-Browser verwendet, und Sie auf eine bestimmte Stelle derselben Seite verlinken möchten (um beispielsweise zu einer Kopfzeile weiter unten zu scrollen), können Sie auch die Formatierung #unique-id ohne den Seiten-Slug oder die URL verwenden.

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

Ajax und Anker-Links

Ajax ist eine spezielle Methode, die den Ladevorgang einer Website beeinflusst und Seiten mit viel Inhalt deutlich schneller und reaktionsfreudiger macht. Dies kann jedoch die Funktionalität von Anker-Links beeinträchtigen, insbesondere auf Mobilgeräten.

Wenn Ihre Vorlage Ajax unterstützt, deaktivieren Sie dies vorübergehend in Website-Stil, um zu überprüfen, ob das Problem auf diese Ursache zurückzuführen ist.

Ajax ist in diesen Template-Gruppen verfügbar:

  • Brine
  • Farro
  • Tremont
  • York

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

Wenn Sie beispielsweise die ID „Panda“ bereits auf Ihrer Startseite verwenden, können Sie „Panda“ nicht später auf Ihrer Startseite als ID einfügen. Sie können die ID auf einer anderen Seite verwenden, aber kein zweites Mal auf Ihrer Startseite.

Beachten Sie die Groß- und Kleinschreibung bei IDs

Wenn Ihre HTML id="Panda" anzeigt, aber Ihr Link die ID als #panda ausgibt, wird Ihr 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 Sie nicht möchten, dass Ihr Text ganz oben im Browser-Fenster erscheint, können Sie darüber Platz schaffen, indem Sie <p>-Tags mit geschützten Leerzeichen zum Landing-Text hinzufügen. In HTML wird ein geschütztes Leerzeichen folgendermaßen eingegeben: &nbsp;

Jedes Mal, wenn Sie die Tag-Abfolge <p>&nbsp;</p> eingeben, wird ein weiterer Zeilenumbruch vor dem Text eingefügt. Bitte sehen Sie sich die Bilder unten zur Verdeutlichung an.

Fehlerbeseitigung

Diese Tipps können hilfreich sein, wenn ein Anker-Link nicht funktioniert:

  • Denken Sie daran, Ajax zu deaktivieren.
  • Vergewissern Sie sich, dass Sie den Seiten-Slug wie in Schritt 3 beschrieben inklusive der beiden Backslash-Symbole (/) eingegeben haben. Besonders wichtig ist dies bei Navigationslinks, Links von anderen Seiten und bei Nutzung des Internet Explorer.
  • Vergewissern Sie sich, dass die spezifischen IDs in Ihrem Link und im Landing-Text identisch sind. Der Link funktioniert nicht, wenn die Schreibweise oder die Groß- und Kleinschreibung auch nur geringfügig abweicht.
  • Vergewissern Sie sich, dass die HTML des Landing-Texts korrekt erstellt wurde. Wenn Ihre spezifische ID beispielsweise #bamboo lautet, müssen Sie id=“bamboo” als Link in die Landing-Text-HTML einfügen.
  • Der Anker-Link funktioniert nicht, wenn Ihr Template diese ID schon verwendet. Versuchen Sie es mit einer anderen ID oder ändern Sie die Groß- und Kleinschreibung.
  • Index-Seiten von Squarespace haben oft eigene eingebaute Anker-Link-Funktionen. Unter Umständen sind diese jedoch nicht mit den Anker-Links kompatibel, die Sie gerade einfügen. Näheres erfahren Sie hier: Anker-Links auf Index-Seiten hinzufügen. Wenn Anker-Links auf Ihrer Index-Seite nicht funktionieren, versuchen Sie eine andere ID oder ändern Sie die Groß- und Kleinschreibung.
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.
War dieser Beitrag hilfreich?
106 von 216 fanden dies hilfreich