Anmerkung: Unsere beliebtesten Anleitungen wurden ins Deutsche übersetzt, alle restlichen Anleitungen sind bisher nur auf Englisch verfügbar
Anker-Links erstellen

Ein Anker-Link (auch „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:

  • Regular anchor links - A link that takes you to a specific place on any Regular Page or blocks-editable area. This requires a 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, im konkreten Beispiel ist jedoch ein Text-Block abgebildet. Markieren Sie den Text in einem Text-Block und klicken Sie dann auf das Link-Symbol in der Werkzeugleiste des Text-Blocks.

Schritt 2 - Eine spezifische ID erstellen

Geben Sie im Reiter External (Extern) des Link-Fensters erst einen Hashtag und dann den Text ein. Der Text stellt die spezifische ID dar. Vergewissern Sie sich, dass Open in New Window (In neuem Fenster öffnen) nicht ausgewählt ist, wenn Sie möchten, dass Besucher auf derselben Seite bleiben.

  • Im Beispiel unten lautet die spezifische ID anchor-link-example.
  • Der Text ist frei wählbar, darf jedoch keine Leerzeichen enthalten. Trennen Sie Wörter stattdessen mit einem Gedankenstrich.
  • 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.

Schritt 3 - Den Seiten-Slug hinzufügen

Fügen Sie vor dem Hashtag den Slug der Seite hinzu, die Sie verlinken möchten (auch wenn es sich um dieselbe Seite handelt), und geben Sie anschließend ein zusätzliches Slash-Zeichen ein (/):

/pageslug/#unique-id

Dieser Schritt ist optional, wird aber für die meisten Links empfohlen. Unter Ihren Seiten-Slug finden erhalten Sie weitere Hilfestellungen.

Tipp: Wenn Sie zu einem späteren Zeitpunkt den Seiten-Slug aktualisieren, sollten Sie auch den Slug der Anker-Links aktualisieren.

pageslug.png

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

Scrollen Sie im Editor für Seiteninhalte zu dem Bereich, den Sie für Besucher verlinken möchten. Klicken Sie auf einen Einfügepunkt und wählen Sie den Code-Block.

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

id="anchor-link-example"

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

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

Schritt 5 - Speichern

Klicken Sie auf Save (Speichern). Der Link, den Sie in Schritt 1 erstellt haben, bringt 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 Clickthrough-Bilder. Näheres über die verschiedenen Link-Optionen erfahren Sie hier: 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:

/pageslug/#unique-id

Hier sehen Sie ein Beispiel für einen Anker-Link in einem Button-Block:

button.png

Landing-Text formatieren

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

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

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 Home Menu (Hauptmenü) auf Settings (Einstellungen), dann auf Advanced (Erweitert) und anschließend auf Code Injection (Benutzerdefinierter Code).
  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, 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

Um den URL-Slug einer Seite zu finden, klicken Sie auf das Symbol im Seiten-Menü der jeweiligen Seite. Suchen Sie dann im sich öffnenden Einstellungs-Menü der Seite nach dem Feld URL Slug (URL-Slug). Der Slug wird auch in der vollständigen Vorschau oder beim Betrachten Ihrer Website im Inkognito-Modus angezeigt.

anchor2-about1.png

pageslug2.png

Wenn Sie wissen, dass keiner Ihrer Besucher den Internet Explorer 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 verwenden.

Tipp: Der Traffic-Übersicht in Ihrem Statistiken-Menü 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 Ihr Template Ajax unterstützt, deaktivieren Sie die Option vorübergehend im Style Editor und finden Sie heraus, ob das Problem auf diese Ursache zurückzuführen ist.

Ajax ist derzeit in den folgenden Templates verfügbar. Die Templates sind in Gruppen eingeteilt.

  • Brine-Gruppe - Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West
  • Farro-Gruppe - Farro, Haute
  • Tremont-Gruppe - Camino, Carson, Henson, Tremont
  • York-Gruppe - Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, 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:

  • 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.
  • Bei Problemen auf Mobilgeräten müssen Sie unter Umständen Ajax deaktivieren.
  • 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 von Squarespace hilft Ihnen bezüglich der einzelnen Schritte dieser Anleitung gerne weiter, kann Ihnen jedoch keinerlei Hilfestellungen im Hinblick auf Code-Modifizierungen bieten. Wenn Sie weitere Hilfe benötigen, empfehlen wir die Squarespace Answers-Community oder unsere Liste der Hilfe-Ressourcen für benutzerdefinierten Code.
War dieser Beitrag hilfreich?
80 von 151 fanden dies hilfreich