Hinweis: Während unsere beliebtesten Anleitungen ins Deutsche übersetzt wurden, sind einige Anleitungen nur auf Englisch verfügbar.
Anker-Links auf Index-Seiten hinzufügen

Anker-Links (auch „Seiten-Sprünge“ genannt) sind spezielle URLs, die Sie zu bestimmten Stellen auf einer Seite weiterleiten. Gestapelte Indexseiten haben eine einzigartige URL-Struktur, mit der Sie Anker-Links ohne benutzerdefinierten Code erstellen können.

Wenn Sie beispielsweise auf der Demo-Website des Hayden-Templates auf den Button „Sehen Sie unsere Arbeiten“ klicken, scrollt die Seite nach unten zum Abschnitt „Moreau“.

Hinweis: Um Anker-Links auf anderen Seiten und Templates mit benutzerdefiniertem Code hinzuzufügen, gehen Sie zu Anker-Links erstellen.

Unterstützte Templates

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

  • Bedford
  • Brine – Ajax Loading kann im Konflikt mit dem Anker-Link-Verhalten stehen. Alternativ können Sie auch die integrierte Index-Navigation verwenden.
  • Pacific – Sie müssen „-section“ am Ende des Links hinzufügen. Weitere Informationen dazu finden Sie in Schritt 3 weiter unten.
Tipp: Manche Raster-Indizes unterstützen eine ähnliche Funktionalität. Sie können auch benutzerdefinierten Code verwenden, um bei jedem Template reguläre Anker-Links hinzuzufügen.

Schritt 1 – Den Slug finden

Fahren Sie im Seiten-Menü mit dem Mauszeiger über den Index-Abschnitt, auf den Sie verlinken möchten. Klicken Sie auf das Zahnrad-Symbol, um die Seiteneinstellungen für diesen Abschnitt zu öffnen.

Kopieren Sie den Slug aus dem Feld URL-Slug. Sie verwenden diesen Slug, um einen Anker-Link zu erstellen.

Tipp: Der Slug kann in der Browserleiste angezeigt werden, wenn Besucher zu diesem Abschnitt navigieren. Sie können den Slug ändern, indem Sie neuen Text in dieses Feld eingeben.

Adding_Index_Page_anchor_links.png

Schritt 2 - Den Link erstellen

Fügen Sie den Link hinzu, den Ihre Besucher anklicken sollen. Sie können Links aller Art verwenden, in diesem Beispiel ist jedoch ein Text-Link abgebildet. Markieren Sie den Text in einem Text-Block und klicken Sie dann auf das Link-Symbol in der Werkzeugleiste des Text-Blocks.

Tipp: Der Index jedes Templates verfügt über einzigartige Optionen. Weitere Informationen finden Sie in der Anleitung für die Gruppe Ihres Templates: Bedford, Brine oder Pacific.

Schritt 3 - Den Seiten-Slug hinzufügen

Befolgen Sie anschließend diese Schritte:

  1. Fügen Sie im Link-Feld den Slug ein, den Sie in Schritt 1 kopiert haben.
  2. Fügen Sie ein Hashtag-Symbol (#) am Anfang des Slugs hinzu, um den Link abzuschließen. Der Anker-Link in diesem Beispiel ist #hours-and-location.
  3. Klicken Sie auf das Zahnrad-Symbol, um die Einstellungen zu öffnen, und stellen Sie sicher, dass In neuem Fenster öffnen deaktiviert ist.
  4. Fügen Sie nur für die Templates Pacific, Charlotte, Fulton, Horizon und Naomi -section am Ende Ihres Anker-Links hinzu, so wie hier: #hours-and-location-section
  5. Klicken Sie auf Speichern.

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ügen Sie für jeden anderen Link den Slug der Index-Seite vor dem Anker-Link ein. Dadurch wird sichergestellt, dass Ihre Links an folgenden Orten funktionieren:

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

So fügen Sie dies hinzu:

  1. Kopieren Sie den Slug für Ihre Index-Seite aus deren Seiten-Einstellungen.
  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. Klicken Sie auf Speichern.

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.

Erstellen Sie eine Navigation, indem Sie Anker-Links nebeneinander anordnen. Dieses Beispiel verwendet das Bedford-Template und Text-Links. 

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

Raster-Index-Seiten und Anker-Links

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 Ihre Website-Navigation oder andere Seiten auf Ihrer Website. Die Seite wird mit jeder indexspezifischen Formatierung geöffnet, so wie sie es auch tun würde, wenn Sie das Vorschaubild der Seite im Index anklicken.

Dieses Beispiel verwendet das Avenue-Template.

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

Fehlerbeseitigung

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

  • Stellen Sie bei Bedarf sicher, dass Sie den Index-Seiten-Slug wie in Schritt 4 beschrieben hinzugefügt haben, einschließlich der beiden /-Symbole. Das ist bei Navigationslinks, Links von anderen Seiten und im Internet Explorer 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.
  • Stellen Sie sicher, dass der Index-Seiten-Slug und der Seiten-Slug des Abschnitts korrekt sind. Wenn Sie einen dieser beiden Slugs geändert haben, müssen Sie den Anker-Link manuell aktualisieren.
War dieser Beitrag hilfreich?
39 von 113 fanden dies hilfreich
Anker-Links auf Index-Seiten hinzufügen