Anmerkung: Während unsere beliebtesten Anleitungen ins Deutsche übersetzt wurden, sind andere Anleitungen bisher nur auf Englisch verfügbar
Anker-Links erstellen

Anker-Links, auch „Seiten-Sprünge“ genannt, bringen Besucher zu bestimmten Bereichen einer Seite. Sie können diese Art von Link mithilfe von benutzerdefiniertem HTML-Code auf allen normalen Seiten einfügen.

Das Hinzufügen von Code zu Ihrer Website ist eine Modifikation, die zu den erweiterten Einstellungen zählt. Diese Anleitung hilft Ihnen dabei, einen Anker-Link mit benutzerdefiniertem Code in Squarespace zu erstellen. Bitte beachten Sie, dass die Squarespace-Kundenbetreuung Ihnen nicht mit möglichen Problemen helfen bzw. keine spezifischen Anweisungen für Code-Änderungen geben kann. Eine Liste möglicher Hilfequellen für benutzerdefinierten Code finden Sie hier: Häufig gestellte Fragen zu benutzerdefiniertem Code.

Hinweis: Sie können Anker-Links zu bestimmten Index-Seiten ohne benutzerdefinierten Code hinzufügen. Näheres erfahren Sie hier: Anker-Links zu Index-Seiten hinzufügen.

Schritt 1 - Einen Link mit spezifischer ID erstellen

Um den Anker-Link zu erstellen, den Besucher anklicken werden, fügen Sie zunächst einen Text-Block zur Seite hinzu und geben Sie dann den Text für Ihren Link ein. Markieren Sie den Text und klicken Sie auf das Link-Symbol im Text-Block-Editor.

Geben Sie im Link-Fenster 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, da Sie möchten, dass Besucher auf derselben Seite bleiben.

Zum Beispiel ist die spezifische ID in diesem Fall "Anchor-link-example". Der Text ist frei wählbar, darf jedoch keine Leerzeichen enthalten. Trennen Sie Wörter stattdessen mit einem Gedankenstrich.

Hinweis: Bei spezifischen IDs müssen Sie die Groß- und Kleinschreibung beachten.
Hinweis: Der Internet Explorer behandelt Anker-Links anders als andere Browser. Wenn ein großer Teil Ihrer Besucher den Internet Explorer benutzt, fügen Sie den Seiten-Slug vor dem Hashtag hinzu, als würden Sie auf eine andere Seite verlinken.

Schritt 2 - Die spezifische ID mit einem Bereich 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>

Hinweis: Geben Sie nicht den Hashtag (#) aus Ihrem Anker-Link ein. 

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 2 eingefügt haben.

Verschiedene Arten von Links und Landing-Text verwenden

Im oben aufgeführten Beispiel wird Fließtext sowohl für den Anker-Link als auch für den verlinkten Bereich verwendet. Es gibt zahlreiche weitere Möglichkeiten.

Sie können eine beliebige Art von Link als Anker-Link verwenden, darunter auch 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 bei allen Link-Arten wie oben in Schritt 1, mit dem Format #word (Wort) als Link, wobei Sie word (Wort) durch eine spezifische ID ersetzen.

Hinweis: Wir empfehlen, keine Anker-Links zu Ihrer Navigation mit einem Navigationslink hinzuzufügen. Diese Links werden zwar angezeigt, funktionieren allerdings nicht auf Seiten, die nicht den dazugehörigen Landing-Text enthalten. Darüber hinaus funktionieren Anker-Links auf Mobilgeräten nicht verlässlich.

Wenn Sie den Landing-Text nicht als Fließtext formatieren möchten, ändern Sie die Tags <p> und </p> in Schritt 2, bevor Sie die spezifische ID hinzufügen. Wenn Sie sich nicht mit HTML auskennen, könnten Sie beispielsweise folgende Tags für Kopfzeile 1 benutzen: <h1> </h1>

Wenn Sie verschiedene Tags benutzen, fügen Sie die spezifische ID wie oben in Schritt 2 zum ersten Tag hinzu. Verwenden Sie hierzu das Format id=“word” (id="Wort") und ersetzen Sie dann word (Wort) durch Ihre spezifischen ID.

Anker-Links zu verschiedenen Seiten

Um einen Anker-Link zu einem Bereich auf einer anderen Seite zu erstellen, fügen Sie den URL-Slug für die Zielseite vor dem Hashtag und der spezifischen ID in Ihren Link ein.

Hinweis: Sie können auch den Seiten-Slug der aktuellen Seite einfügen, um Ihre Anker-Links speziell für den Internet Explorer zu optimieren.

Um den URL-Slug einer Seite zu finden, klicken Sie auf das Symbol im Seiten-Menü der jeweiligen Seite. Suchen Sie dann im Einstellungs-Menü der Seite, welches sich dann öffnet, nach dem Feld URL Slug (URL-Slug) .

Erstellen Sie den Landing-Text auf der Zielseite so, wie es in Schritt 2 oben erklärt wird. In diesem Beispiel werden <h1>-Tags anstelle von <p>-Tags verwendet.

Anker-Links zum Seitenanfang

Um Links zum Anfang Ihrer Seite einzufügen, sollten Sie mithilfe von benutzerdefiniertem Code auf die Kopfzeile verlinken.

  1. Fügen Sie wie in Schritt 1 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. Geben Sie im Feld Kopfzeile wie in Schritt 2 beschrieben ein Tag (Schlagwort) ein. Um sicherzustellen, dass Ihre Kopfzeile keinen zusätzlichen Text enthält, empfehlen wir Tags ohne dazwischenliegenden Text zu verwenden (z. B.: <p id="top"></p>).
  4. Wenn Sie bei der Erstellung des Links eine andere spezifische ID als #top verwendet haben, müssen Sie diese im ersten <p>-Tag verwenden.
  5.  Klicken Sie auf Save (Speichern).
Tipp: Auf die gleiche Weise können Sie auch zum Seitenanfang von einzelnen Seiten verlinken.

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 Ihrer "Über uns"-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.

Anker-Links können auch eine Möglichkeit sein, Ihrer Website Humor und Persönlichkeit zu verleihen. Bedenken Sie immer, dass Besucher die ID am Ende der URL sehen.

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 eine weitere Leerzeile vor dem Text eingefügt. Bitte sehen Sie sich die Bilder unten zur Verdeutlichung an.

Anker-Links funktionieren möglicherweise nicht auf Ajax-Websites

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. Wenn Ihr Template Ajax unterstützt, müssen Sie die entsprechende Option im Style Editor unter Umständen deaktivieren, damit Anker-Links auf Ihrer Website funktionieren.

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

  • Brine, Aria, Basil, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Polaris, Rally, Rover, Sofia, Sonny, Sonora, Thorne, Wav, West
  • Farro, Haute
  • Tremont, Camino, Carson, Henson
  • York, Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori

Fehlerbeseitigung

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

  • 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 abweicht.
  • Vergewissern Sie sich, dass die HTML des Links und des Landing-Texts korrekt erstellt wurde. Wenn Ihre spezifische ID bamboo ist, ist der Link #bamboo, und Sie müssen id=“bamboo” 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.
  • Anker-Links funktionieren im Internet Explorer etwas anders. Um sicherzugehen, dass Anker-Links in allen Browsern funktionieren, fügen Sie den Seiten-Slug vor dem Hashtag im Link hinzu, als würden Sie auf eine andere Seite verlinken.
  • 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.
  • Wenn Ihr Template Ajax unterstützt, deaktivieren Sie die Option vorübergehend und finden Sie heraus, ob das Problem auf diese Ursache zurückzuführen ist.
Hinweis: Leider kann Ihnen die Kundenbetreuung von Squarespace nicht bei der Fehlersuche helfen oder spezifische Anweisungen für Code-Änderungen geben. Wenn Sie das Problem nicht allein lösen können, kann Ihnen vielleicht Squarespace Answers weiterhelfen.
War dieser Beitrag hilfreich?
53 von 93 fanden dies hilfreich