Anker-Links auf Index-Seiten in Version 7.0 hinzufügen

Zuletzt aktualisiert: 14. Februar 2025

In Version 7.0 haben gestapelte Index-Seiten eine einzigartige URL-Struktur, mit der du Anker-Links (oder „Seiten-Sprünge“) ohne benutzerdefinierten Code erstellen kannst. Diese Anker-Links führen dich zu bestimmten Stellen auf der Index-Seite. 

Wenn du beispielsweise auf der Demo-Website des Hayden-Templates auf den Button Unsere Arbeit klickst, wird die Seite nach unten zum Abschnitt „Moreau“ gescrollt.

So erlangst du Zugriff auf diese Funktion

Diese Anleitung gilt für Index-Seiten unter Version 7.0. Informationen zum Hinzufügen von Anker-Links in Version 7.1 findest du unter Anker-Links erstellen. Informationen zum Hinzufügen von Anker-Links zu Layout-Seiten in Version 7.0 findest du unter Manuelles Erstellen von Anker-Links in Version 7.0.

Unterstützte Templates

Anker-Links auf Index-Seiten funktionieren am besten bei Templates mit gestapelten Index-Seiten. In diesen Template-Gruppen gelangst du durch Klicken auf einen Anker-Link zum entsprechenden Abschnitt der Index-Seite.

  • Bedford
  • Brine – Ajax Loading kann im Konflikt mit dem Anker-Link-Verhalten stehen. Alternativ kannst du auch die integrierte Index-Navigation verwenden.
  • Pacific – du musst -section am Ende des Links hinzufügen. Sieh dir Schritt 3 unten an, um mehr zu erfahren.

Manche Raster-Indizes unterstützen eine ähnliche Funktionalität. Du kannst auch benutzerdefinierten Code verwenden, um bei jedem Template manuell Anker-Links hinzuzufügen.

Schritt 1 – Den Slug finden

Fahre im Seiten-Menü mit dem Mauszeiger über den Index-Abschnitt, auf den du verlinken möchtest. Klicke auf das Zahnrad-Symbol, um die Seiteneinstellungen für diesen Abschnitt zu öffnen.

Kopiere den Slug aus dem Feld URL-Slug. Mit diesem Slug erstellst du einen Anker-Link.

Der Slug kann in der Browserleiste angezeigt werden, wenn Besucher zu diesem Abschnitt navigieren. Du kannst den Slug ändern, indem du neuen Text in dieses Feld eingibst.

Adding_Index_Page_anchor_links.png

Füge den Link hinzu, auf den Besucher klicken werden. Du kannst jede Art von Link verwenden, aber wir verwenden einen Text-Link als Beispiel.

Markiere in einem Text-Block den Text und klicke auf das Link-Symbol in der Werkzeugleiste des Text-Blocks.

Der Index jedes Templates verfügt über einzigartige Optionen. Weitere Informationen findest du in der Anleitung für die Gruppe deines Templates: Bedford, Brine oder Pacific.

Schritt 3 - Den Seiten-Slug hinzufügen

Befolgen Sie anschließend diese Schritte:

  1. Füge im URL-Feld den Slug ein, den du in Schritt 1 kopiert hast.
  2. Füge ein Hashtag-Symbol (#) am Anfang des Slugs hinzu, um den Link abzuschließen. Der Anker-Link in diesem Beispiel ist #hours-and-location.
  3. Deaktiviere den Schalter Link in neuem Tab öffnen.
  4. Füge nur für die Templates Pacific, Charlotte, Horizon und Naomi -section am Ende deines Anker-Links hinzu, so wie hier: #hours-and-location-section
  5. Drücke die Eingabetaste.

Schritt 4 – Den Index-Slug hinzufügen

Wenn du deinen Link in Schritt 2 in einem Abschnitt innerhalb derselben Index-Seite erstellt hast, kannst du diesen Schritt überspringen.

Füge bei jedem anderen Link, wie Navigationslinks oder Links auf anderen Seiten, den Slug der Index-Seite vor dem Anker-Link ein. Dadurch wird sichergestellt, dass deine Links funktionieren von:

  • Einer anderen Seite.
  • Der Navigation Ihrer Website.
  • Die direkte URL einer Unterseite.

So fügen Sie dies hinzu:

  1. Kopiere den Slug für deine Index-Seite aus den Seiteneinstellungen.
  2. Öffne den Link-Editor erneut.
  3. Fügen Sie den Seiten-Slug vor dem Anker-Link zwischen zwei /-Symbolen hinzu, so wie hier:
/indexslug/#pageslug
  1. Drücke die Eingabetaste.

Beispiele

Fügen Sie Anker-Links zu mehreren Abschnitten hinzu, um den Besuchern die Navigation auf Ihrer Index-Seite zu erleichtern. Dieses Beispiel verwendet das Brine-Template und drei verschiedene Link-Typen: Button-Block, Text-Link und Bild-Klick-URLs.

Beispiele für Anker-Links in der Brine-Vorlage unter Verwendung eines Schaltflächen-Blocks, eines Text-Links und einer Bild-Klick-URL.

Erstelle eine Navigation, indem du Anker-Links nebeneinander anordnest. Dieses Beispiel verwendet das Bedford-Template und Text-Links.

Beispiele für Anker-Links in der Bedford-Vorlage, die nebeneinander angeordnet sind.

Diese Template-Gruppen mit Raster-Index-Seiten unterstützen eine ähnliche integrierte Option:

  • Avenue
  • Flatiron
  • Montauk

Sie können in diesen Vorlagen einen Anker-Link auf die Index-Seite mit dem folgenden URL-Format erstellen:

/index-page-slug/#/page-slug

Dies ist eine gute Option für die Verknüpfung mit Seiten im Index über deine Website-Navigation oder andere Seiten auf deiner Website. Die Seite wird mit jeder indexspezifischen Formatierung geöffnet, so wie sie es auch tun würde, wenn du das Vorschaubild der Seite im Index anklickst.

Dieses Beispiel verwendet das Avenue-Template.

Beispiel für das Verhalten von Anker-Links auf einer Raster-Index-Seite.

Fehlerbehebung

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

  • Stelle bei Bedarf sicher, dass du den Index-Seiten-Slug wie in Schritt 4 beschrieben hinzugefügt hast, einschließlich der beiden /-Symbole. Das ist bei Navigationslinks und Links von anderen Seiten erforderlich.
  • Wenn Probleme auf Mobilgeräten auftreten und dein Template zur Brine-Familie gehört, versuche, vorübergehend Ajax zu deaktivieren, um zu sehen, ob das Problem dadurch verursacht wird.
  • Vergewissere dich, dass der Index-Seiten-Slug und der Seiten-Slug des Abschnitts korrekt sind. Wenn du einen dieser beiden Slugs geändert hast, musst du den Anker-Link manuell aktualisieren.
Footer Image
  • Hol dir Hilfe von der Community

  • Hol dir Hilfe von unserer Community zu erweiterten individuellen Anpassungen.

  • Beauftrage einen Squarespace-Experten

  • Hebe dich online von der Masse ab, indem du dir von einem erfahrenen Webdesigner oder Entwickler helfen lässt.

Anker-Links auf Index-Seiten in Version 7.0 hinzufügen