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

Zuletzt aktualisiert: 17. Juli 2024

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 auf Version 7.0. Zum Hinzufügen von Anker-Links auf Version 7.1 oder auf anderen Seitentypen in Version 7.0 findest du unter Erstellen von Anker-Links.

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. Weitere Informationen dazu findest du in Schritt 3 weiter unten.

Tipp

Manche Raster-Indizes unterstützen eine ähnliche Funktionalität. Du kannst auch benutzerdefinierten Code verwenden, um bei jedem Template reguläre 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.

Tipp

Der Slug wird möglicherweise in der Browserleiste angezeigt, 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

Adding_Index_Page_anchor_links.png

Füge den Link hinzu, auf den Besucher klicken werden. Du kannst jede Art von Link verwenden, aber diese Schritte 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.

Tipp

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 Sie Ihren Link in Schritt 2 zu einem Abschnitt innerhalb desselben Index hinzugefügt haben, können Sie 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. Öffnen Sie den Link-Editor erneut.
  3. Fügen Sie den Seiten-Slug vor dem Anker-Link zwischen zwei /-Symbolen hinzu, so wie hier:
https://examplesite.com/indexslug/#pageslug
  1. Drücke die Eingabetaste.

Hinweis

If your primary domain includes www. before your domain name, include that in your anchor link URL too.

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 Funktionalität:

  • 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 innerhalb des 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 Sie Probleme auf Mobilgeräten sehen und Ihr Template zur Brine-Familie gehört, versuchen Sie, vorübergehend Ajax zu deaktivieren, um zu sehen, ob das Problem dadurch verursacht wird.
  • Stelle sicher, 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